background image

PopIT Slide Shows

You can display a slide show like this on any page, and at any size, and you can specify the transition speed and position of thumbnails, and even include multiple slide shows on a single page (this requires the Dec 2012 upgrade).

You can also align the slide show left, right or centre, or insert the slide show into a table cell, which allows you to create any page layout you like.

Slide shows can be simple (like the one on the right) where there are no thumbnails, or they can include thumbnails and navigation buttons (like the banner slide show below).

The photos in the slide show are taken from one of your Galleries, so you can easily create special galleries just for your slide shows. The only difference is that you don't need to add the gallery to a portfolio because all you need is the Gallery ID which you can find next to the Gallery Title in the Gallery Manager.

Click to see the Gallery ID

When you have the Gallery ID you just add the PopIT Slide Show code into your page like this...

[[S33:type=simple:width=300:height=400]]

... and this displays the simple slide show you can see on the right.

  • portrait_12.jpg
  • portrait_13.jpg
  • portrait_14.jpg
  • portrait_3.jpg
  • portrait_4.jpg
  • portrait_5.jpg
  • portrait_6.jpg
  • portrait_7.jpg
  • portrait_9.jpg

Slide Show Parameters

The following parameters can be used to modify the slide show as required.
Remember to separate parameters with a colon.
Note: these parameters are only available from the December 2012 upgrade

type=simple This displays the slide show without any thumbnails.
If you don't include this then the slide show will display thumbnails at the bottom by default.
width=260:height=400 You can specify the exact width and height of your slide show.
The default dimensions is 600x400 pixels.
name=myshow Use this only if you have more than one slide show on a page.
Give each slide show a unique name (just one word with no spaces - letters only)
scale=fit
Display method of images in slide show (crop or fit). (default=fit)
speed=2 The speed of transition in seconds. Between 1 and 3 seconds. (default = 1.5)
delay=4 The delay between each transition. Between 2 and 10 seconds. (default = 4)
showinfo=yes Display or hide the image title. (default = no)
autoplay=yes Auto start the slide show (yes or no). (default = yes)
transtype=crossfade Transition type (crossfade, slide). (default=slide)
thumbpos=bottom Position of thumbnails (top, bottom). (default=bottom)
thumbwidth=100 Width of square thumbnails (between 10 - 60 pixels). (default=50)

 

Full Slide Show Example

This slide show uses the default thumbnail display at the bottom, and at a size of 760x250 pixels.
The scale=crop parameter is added to ensure that all the photos fit exactly in the slide show frame.
The name=ss1 parameter is needed because we have more than one slide show on this page (ie: if you have more than one slide show on a page just give each slide show a different name).

The PopIT Slide Show code looks like this...

[[S39:width=760:height=250:scale=crop:name=ss1]]

... and the slide show appears like this...

  • slideshow-01.jpg
  • slideshow-02.jpg
  • slideshow-03.jpg
  • slideshow-04.jpg
  • slideshow-05.jpg

 

Below is the same gallery of images presented in another slide show, but with the width reduced, the thumbnails on the top (and larger), the info panel switched on (showing the image title & description), and the transition changed to slide.
Note that the photos are all cropped to fit the new slide window using the scale=crop parameter.

The code now looks like this...

[[S39:width=600:height=250:scale=crop:name=ss2:thumbpos=top:transtype=slide:showinfo=yes]]

... and the slide show appears like this...

  • slideshow-01.jpg
  • slideshow-02.jpg
  • slideshow-03.jpg
  • slideshow-04.jpg
  • slideshow-05.jpg