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.

Comments

thomasLausZ’s picture

thomasLausZ commented

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.

Stewx’s picture

Stewx commented

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

Shouldn't it say "directory for images"?

Stef01’s picture

Stef01 commented

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".

srini_rg’s picture

srini_rg commented

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.

ambientdrup’s picture

ambientdrup commented

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

steiwes’s picture

steiwes commented

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|||||]