Last updated May 7, 2012. Created by ghoti on March 21, 2008.
Edited by rhouse, jwoolson, NancyDru, mr.baileys. Log in to edit this page.

Project Page

Slideshow Creator

Installation

  1. Just copy the folder to your sites/all/modules/ folder
  2. Activate the module in your Drupal installation. Go to
    • administer > modules (on Drupal 4.7 or Drupal 6) or
    • administer > site building > modules (on Drupal 5)
    • modules (on Drupal 7) or
  3. Go to
    • administer > input formats (on Drupal 4.7) or
    • administer > site configuration > input formats (on Drupal 5)
    • administer > input formats (on Drupal 6)
    • configuration > text formats (on Drupal 7)

    and add slideshow filter in any filter type your site has.

Usage

You can insert a slideshow in any node, adding the string:
[slideshow:VERSION, img=|IMAGE_URL|LINK|TITLE|CAPTION|TARGET|, img=|IMAGE_URL|LINK|TITLE|CAPTION|TARGET|]

where:
VERSION: REQUIRED the slideshow filter version: currently 2

then, for each image you want to insert, use:
IMAGE_URL: REQUIRED the image itself
LINK: if you want to provide a link to some page, put the URL here
TITLE: often the bold text over the image
CAPTION: often the text under the image
TARGET: where the linked page will show: _blank (default) will show on another window, _parent and _top is only used when pages have frames, _self shows on the very window or you can use a window name.

Or automatically extract images from a given directory.

All images in a directory

You can create a normal slideshow, but you can scan for more images using

dir=|DIR_IMAGE|RECURSIVE|LINK|TITLE|CAPTION|TARGET|

where:
DIR_IMAGE: REQUIRED the directory containing the images. The folder base is the default site files folder, generally "sites/default/files".
RECURSIVE: "yes" if you want to scan recursively or leave it blank.
LINK: "yes" if you want link all images to their own path or leave it blank, or provide a URL that all images will link to.

TITLE, CAPTION and LINK are applied to all images, but starting
with versions 7.x-1.5 and D6.x-1.41, these can be overridden.

Overriding TITLE, CAPTION and LINK for particular images

When using "dir", you have to specify one TITLE, CAPTION and LINK in the slideshow code and it applies to every image found in the directory. To override, include in the same directory a control file with the same name as the image file, but with the image extension replaced by ".sscctl". For example, the image "fred.jpg" should be accompanied by a control file called "fred.sscctl". In this control file, include any or all of these lines in any order:

Title: The title to apply to this image
Caption: The caption to apply to this image
Link: http://example.com

The "Link:" line may also be:
Link: yes
meaning to link back to this image itself.

Unrecognised and empty lines in the ".sscctl" file are silently ignored.

Example of a Slideshow

[slideshow: 2, height=240, width=300, img=|http://drupal.org/files/druplicon.small_.png|drupal.org|Drupal|The ultimate CMS. Download it now!|Drupal|, img=|http://www.mysql.com/common/logos/mysql_100x52-64.gif|http://www.mysql.com|MySQL|Free and reliable SQL server and client.|_self|, dir=|files/|yes||Generic Photos|Aren't they great?||]

Additional Features

You can include various control options as shown below:

[slideshow:VERSION, rotate=ROTATE_SPEED, blend=BLEND, layout=LAYOUT,  order=ORDER,
name=SLIDESHOW_NAME, height=HEIGHT, width=WIDTH, img=|IMAGE_URL|LINK|TITLE|CAPTION|TARGET|, img=|IMAGE_URL|LINK|TITLE|CAPTION|TARGET|]

The additional options are:
ROTATE_SPEED [optional]: the speed, in seconds, to rotate images (0 to not rotate at all)
SLIDESHOW_NAME [optional]: you can theme your slideshow through CSS giving it a class name
HEIGHT [optional]: image height (required for best results)
WIDTH [optional]: image width (required for best results)
BLEND [optional]: how long will take the fading transaction between images
LAYOUT [optional]: See below.
ORDER [optional]: (Introduced in versions 6.x-1.39 and 7.x-1.2.) See below.

Dimensioning

Although HEIGHT and WIDTH are optional, slideshows display better if they are specified and are large enough for the largest image. Height must also include allowance for the title and caption lines, if they are present.

Arrangement

LAYOUT and ORDER work in tandem, but either or both may be omitted. LAYOUT was originally the only option for ordering the pieces of the slideshow, but due to a very long-standing bug, not all options were distinct. Fixing this would have broken many slideshows that users had designed while the bug was in force, so in order to provide all the missing options, a new directive, ORDER, was designed so that the bug can be removed without changing the behaviour of existing slideshows. They now work as follows:

We consider a slideshow to consist of two parts: the slideshow proper and the 'next/previous' control line. LAYOUT controls the order of these parts:

LAYOUT: takes options 'top', 'bottom', and 'none' (and still recognises the buggy old option 'reverse', which is identical to 'top'):

top: the slideshow proper appears above the control line
bottom: the slideshow proper appears below the control line
none: the control line is not displayed

Next, the slideshow itself is considered to consist of three parts, a title (usually bolded), a caption, and the image. ORDER controls the position of the image relative to the other two parts. The title is assumed to normally appear above the caption.

ORDER options are:

top: The image is on top of the title and caption
middle: The image is between the title and caption
bottom: The image is below the title and caption
reversetop: As 'top', but the caption is above the title
reversemiddle: As 'middle', but the caption is above the title
reversebottom: As 'bottom', but the caption is above the title

Additional Notes

The module recognises a large range of jQuery Cycle options. See README.txt for details.

Lastly, since this is an input filter it can be affected by other filters. In particular, line break filter, automatic URL to link filter, etc., can mess with the slideshow details before Slideshow Creator gets a chance to render it. If you have a problem, re-ordering the filters might fix it. Slideshow Creator seems to work best when placed as close to the beginning of the input filter list as possible.

Security Note: The filter provided by Slideshow Creator is very powerful and should only be used in text filters that are restricted to trusted users. In particular, do not add it to "filtered HTML", which can be used by, for example, anonymous commenters, including spammers.

Important: Do not report issues by adding comments to this page

Issues (bug reports or requests for help) should be reported in the module's Issues queue (http://drupal.org/project/issues/slideshow_creator?categories=All). Comments here should be restricted to pointing out errors or omissions in this page or suggestions for improvement for inclusion in future edits of this help page.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

D6: On admin/settings/filters, you should see a list of input formats. Either add a new one or configure one of the existing ones and you should be able to add the slideshow input filter to it, by clicking on configure next to the input format.

Hello,

Can someone help please?

I added the slideshow filter to Full HTML and to Filtered HTML.

Then I've created a page, and I don't see any plugin for the slideshow.

So I inserted this code:

[slideshow: 2, dir=|files/|yes||Generic Photos|Arent they great?||]

Nothing is shown on the page.

My site sits at: C:\wamp\www\site\sites\site1

I have 2 images in this folder: C:\wamp\www\site\sites\site1\files

Why don't I see the images in the slide?

Thank you,

Sigal

You would probably get more attention in the module's issue queue.

"DIR_IMAGE: REQUIRED the slideshow filter version: currently 2"
Is that right?

Shouldn't it say "directory for images"?

Indeed. In the module's README it says:

DIR_IMAGE [required]: the directory that you want to scan for images. The folder base is the default site files folder, generally "sites/default/files".

In case you are using the "directory" part of the setup, and (for example) you have kept your images under sites/default/files/frontpage_slideshow, then you need to configure the settings as (for example):
[slideshow: 2, rotate=6, blend=3, dir=|/frontpage_slideshow/|yes|||||]

In other words, the trailing and preceeding slashes are necessary.

even I use the eg ,it also can NOT show the first image. WHY?

it works well !

I am facing a strange problem with this module. Its working absolutely fine on my local machine; however after hosting the site on x10hosting.com; this module stops working. The images of slideshow end up getting displayed on the web page one below the other though there is no error displayed on the page. I am not sure what to do. Is the module behavior in anyway dependent on the server or is it possible? Also I am using a free hosting service from www.x10hosting.com since I am still experimenting with Drupal. Please suggest.

Thanks

Bhambry

Hi, I believe that the problem your describing means that JavaScript isn't enabled.

I kept my image directry in
/var/www/html/drupal6/sites/images

Then I need to know how to reference my image folder to slideshow:
1) /var/www/html/drupal6/sites/image
2) /drupal6/sites/images "OR"
3) images/

Which one is correct.

Web Developer
Telecommand Software & Services, CA
www.telecommand.com

When i use the example code above:
[slideshow: 2, rotate=6, blend=3, dir=|/frontpage_slideshow/|yes|||||]

A pager also appears, and I can't seem to find using Dev Load where I can change this at the template level please let me know!

In a nutshell, i can't seem to be able to theme the slideshow content by doing a

<?php
print $node->slideshow-foo
?>
for example...

Thanks

I tried the method of grabbing from a directory. Works OK.
However, how do I tweak the text font into a different font?

TQ

Not sure if this will help but I did locate the pagination (next/prev) code in the "slideshow_creator.inc" file in the module folder. The function is:

function theme_slideshow_creator { }

and the actual code in there looks like this:

  // This will put the pieces into a given order,
  // base on which "layout" the user chose.
  if (empty($ss['#layout']) or $ss['#layout'] == 'default') {
    $layout = array(array('#title', '#main', '#description'), '#previous', '#status', '#next');
  }

By manipulating that you may be able to style and move around those arrays/items.

-backdrifting

neither online images nor localhost ones
modules are correctly installed and i can see:
Previous Slide 2/2 Next

just doesn't load images

why ?

Have you asked for help in the issue queue?

Hello,

I can't add an equation mark to the link, everything after the "=" have dissappeared.
Why is that? Is there a quick solution for this?
Thanks!

something confusing

in the code, you have the following in the theme section, pertaining to the placement of the "prev - status - next" bit:

  if (empty($ss['#layout']) or $ss['#layout'] == 'default') {
    $layout = array('#previous', '#status', '#next', array('#title', '#main', '#description'));
  }
  elseif ($ss['#layout'] == 'reverse') {
    $layout = array(array('#title', '#main', '#description'), '#previous', '#status', '#next');
  }
  elseif ($ss['#layout'] == 'bottom') {
    $layout = array('#previous', '#status', '#next', array('#title', '#description', '#main'));
  }
  elseif ($ss['#layout'] == 'top') {
    $layout = array(array('#main', '#title', '#description'), '#previous', '#status', '#next');
  }
  elseif ($ss['#layout'] == 'none') {
    $layout = array(array('#main', '#title', '#description'));
  }

The problem is that I don't want it to display, and yet, it is there, no recourse for setting the layout value of "none" so I had to copy the entire theme function into my theme template, and change the 'default' value to function as if it were the 'none' option.

Can you put 'none' in the option list for the layout setting?

This can already be done by specifying "layout=none" in the slideshow itself. The missing option in the module defaults admin page will be added in the next version.

Of course, with layout none, you better not forget to specify a speed, or the show will be stuck on slide 1.

My code works absolutely fine on Ubuntu/Firefox but not on Ubuntu/Chromium. How can i fix this ??

jaseem abid
FOSSMeet @ NITC

This is fixed.

Hi, I got a problem. In a Node i created a slideshow just like this:

[slideshow:2, layout=none, dir=|/teaser_slideshow/|yes|||||]

Then I saved this node. The slideshow works well.

But wenn I reload this page again, The slideshow is gone. All of pictures will be show on the page one after another. I check the source code and founded, that the JQuery plugin cycle will not be loaded wenn I reload the page.

Can anyone an answer for me? thanks a lot!

I had the same bug on google chrome. its hard to run scripts on chrome. they fail very often. firefox seems far more stable

jaseem abid
FOSSMeet @ NITC

i had the same problem that arises for serpent007. i simply checked the 'PHP Evaluator' checkbox on filter 'slideshow' properties and now it goes well :)

Please tell me where i can find that option?

Under "Site Configuration/Input Formats", select "configure" for the specific format type you selected to enable the slideshow and the php evaluation is there.

The problem with doing that though is that it means any php will be evaluated. If you want anyone to create a slideshow with the filtered html type, then you have to enable php which means anyone can write any php in a node. That's not a good idea.

I think this is a bug - you should be able to allow a slideshow without enabling php as well.

Slideshow Creator never needed PHP enabled on an input filter. I think this misunderstanding may have arisen because of another bug that has since been fixed.

BTW, No one looks on this page for bug reports. Submit them in the module's issue queue.

Hello,

I've got the same problem on D6 and all modules up to date. It displays the slideshow one time if I run a cron/update.php or when I save a new configuration on input filters or when I modify the node, BUT refreshing it always make the sliding effect gone...
Does anybody think about a JS or JQuery conflict or any idea ?

Thanks

I'm having the same problem in FireFox four months later. Did you ever get an answer?

Thanks.

Texas March Hare

a blackhole is where drupal divided by zero

I have some problems with this module. I can put more that 3 pictures / node. I tried 6 pictures in a slideshow but it displays only 3, i tried then 3 slideshows containing each 3 pictures, but only 1 picture from each slideshow is displayed. Maybe i didn't read the description of this module properly, but this is how it works ?

PS : I am using drupal 6
Thank you.

Hi, I am puzzled by these problems. I have hundreds of slideshows that (AFAIK) don't go wrong. See almost any page on http://wingedhearts.org for examples. For example, on http://wingedhearts.org/bellminer , there is a slideshow described as follows:

[slideshow: 2, rotate=0, blend=0,
    img=| /files/images/bellminers2-img-ssh_8564.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8565.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8566.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8567.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8568.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8569.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8570.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8571.jpg |  |  |  |,
    img=| /files/images/bellminers2-img-ssh_8572.jpg |  |  |  |  ]

Which Drupal version do you use? v6.22?

a blackhole is where drupal divided by zero

I have been able to implement this on a node on my site. Can I let it show up in a block on my front page?

yes. it's pretty much the same.

  • just create a custom block
  • use an input type where you added "slideshow creator"
  • put your code there and add it to <front>-page only
  • enjoy :)

a blackhole is where drupal divided by zero

It worked. Thanks!

Hi,

I would like to add a pager instead of the default prev/next controls. Here is my working code:

[slideshow: 2, height=155, width=393, name=my_slideshow, layout=top, delay=7, order=bottom, blend=2,  img=|image1.png|target1|EcoEnergy Retrofit|More detail can go here|_blank|, img=|image2.png|target2||_blank|, img=|image3.png|target3||_blank|, img=|image4.png|target4|International Year of Forests||_blank|]

From the documentation it looks like I should add something like:

[slideshow: 2, height=155, width=393, name=my_slideshow, layout=top, delay=7, order=bottom, blend=2, pager=???, ...]

with
pager='<div id="nav">'

or perhaps
pager='#nav'

Has anyone out there reading implemented this?

You should raise this as an issue. The people who can help you very seldom read the comments on information pages.

Hi,

I have added a new field in my custom content types.
I have tried with slideshow data, but it doesn't works. Then I add a normal text field.
When I create a new content I put in my field the code of an slideshow how i can view in an other page.
In my tmp page I add the following code:

<? echo $node->field_upper_left[0]['value']; ?>

But in the page I can't see the slideshow, I see only the code i put into the field.
Why not be interpreted?

Thank

You should raise this as an issue. The people who can help you very seldom read the comments on information pages.

I just installed Slideshow Creator. No Errors and the slideshow appears but the images don't show up, even with the example above.
Any suggestions for how to roubleshoot?

Thanks

its working perfect in Firefox but not in IE and Crome, i am using this is D6, any solutions?

i have updated this module and its working fine

Issues raised here will not be addressed. Raise the issue in the module's issues reports:

http://drupal.org/project/issues/slideshow_creator?categories=All

But btw, it works fine for me in both of those, so you'll have to provide more details than that if/when you do raise an issue.

It loads the first imape in the list, but I cannot use the vext/previous buttons. It's reloading, but then shows 1/3 again. It also doen't change the pics automativally:

[slideshow: 2, rotate=3, blend=1, layout=top, height=300, width=940, img=|_slideshow_1/pics/Teaser_01.jpg|||||, img=|_slideshow_1/pics/Teaser_02.jpg|||||, img=|_slideshow_1/pics/Teaser_03.jpg|||||]

After update the slideshow_creator from version 6.x-1.32 to 6.x-1.44 the following warning is showing up. Is there a solution to fix this?

•warning: array_key_exists() expects parameter 2 to be array, null given in /var/www/drupal/6.26/sites/all/modules/slideshow_creator/slideshow_creator.inc on line 403.

Kind regards

Issues raised here will not be addressed. I have said this more than once in the replies above, which you clearly haven't read. Maintainers don't have the time to go re-reading basic information pages again and again in case anyone puts an issue there. That is why the issues system exists, so maintainers can see new issues easily, and so there is a searchable record of problems and their solutions. Raise the issue in the module's issues reports:

http://drupal.org/project/issues/slideshow_creator?categories=All

And when you do, make sure you provide all the information requested on the new issues page.

I pasted the above example and got Prev/Next actions, but no images. It looks like:

Previous Slide 1/2 NextDrupalThe ultimate CMS. Download it now!MySQLFree and reliable SQL server and client.
if(typeof(window['ssc_settings'])=='undefined') { ssc_settings = new Object(); }
ssc_settings['20f96f6c3'] = new Object();
ssc_settings['20f96f6c3'].pause = true;
ssc_settings['20f96f6c3'].next = '#ssc-next-20f96f6c3';
ssc_settings['20f96f6c3'].prev = '#ssc-previous-20f96f6c3';
ssc_settings['20f96f6c3'].height = '240px';

I'm running 7.14.

I was wondering if there is any way to add a slideshow with this module within a paragraph. When I try it creates an area alone for the slideshow.

For the umpteenth time, issues raised here will not be answered. Maintainers don't have the time to go re-reading basic information pages again and again just on the off-chance that someone puts an issue there. That is why the issues system exists, so maintainers can see new issues easily, and so there is a searchable record of problems and their solutions that can help other users. Raise the issue in the module's issues reports:

http://drupal.org/project/issues/slideshow_creator?categories=All

Hey, people, i placed code [slideshow:2, img=|/images/image2.jpg| | | | |, img=|/images/image3.jpg| | | | |]
and it doesn't show anuthing. In FullHtml i see only this line and nothing else.