Guide to Slideshows

The improved slideshow now requires a line of php which will insert all the html elements for you.

showSlideshow(a, b, c, d, e, f);

The above function takes in 6 parameters

1. ID value of Desktop Album. Settings on this album will be used.
2. ID value of Mobile Album. If not needed use 0 as the id is checked to see if album exists. Desktop Medium size will be used unless a mobile album exists.
3. Classes used for the slideshow.
   Default: caption-span-edge (If empty this will be automatically filled in). Values: 'caption-span-edge', 'caption-span-edge caption-span-top', 'caption-span-edge caption-span-left', 'caption-span-edge caption-span-right', 'caption-float-box'. Extra classes can be added, the values listed will control where the content appears
4. Boolean for Album description.
5. Setting for height of slideshow.
   Accepted Values: '', 'fill-height', 'flex-height'.
6. Override for album default.
   Example Format:

   array(
   "animation" => "move",
   "duration" => 9000
   )

   
   Full Value list can be found within Slideshow.js or below.

Note: The slideshow will not appear if:

• The array is empty or not set
• Both Albums do not exist

As of 2.4.3, Arrows will not appear if there is one or fewer slides.

Slider Examples

Move slider

showSlideshow(17, 0, "", false, "fill-height", array(
"animation" => "move",
"arrows" => true
));

Infinite moving

showSlideshow(17, 3, "caption-span-edge caption-span-left", true, "", array(
"animation" => "move",
"animationDirection" => "right",
"arrows" => true,
"infinite" => true
));

Outside Arrows

showSlideshow(17, 3, "", true, "", array(
"animation" => "move",
"arrows" => true,
"arrowsInside" => false,
"infinite" => true
));

Fade

showSlideshow(17, 3, "", true);

Loop Limit

showSlideshow(17, 3, "", true, "", array(
"loopLimit" => 1
));

JS Notes

Values

animation: String_Value	Default Value = 'fade' Accepted Values: 'fade' 'move'
animationDirection: String_Value	Default Value = 'left' Accepted Values: 'left' 'right' Does not currently support vertical movement
animationLength: Integer_Value	Default Value = 1500 Note: Number represents time in Milliseconds. Value represents how long the animation between slides will take.
duration: Integer_Value	Default Value = 6000 Note: Number represents time in Milliseconds. Determines how long a slide is shown.
infinite: Boolean_Value	Default Value = false Note: Only affects animation: 'move'. When true, slides will keep going in one direction.
autoplay: Boolean_Value	Default Value = true Note: Slideshow automatically shifts between slides.
autoplay: Boolean_Value	Default Value = true Note: Slideshow automatically shifts between slides.
loopLimit: Integer_Value	Default Value = -1 Note: If -1 the slideshow will loop indefinitely. Otherwise any value greater than or equal to 0 will be the amount of loops left. At 0 when the loop will start again, it will stop and cancel autoplay.
continueOnClick: Boolean_Value	Default Value = true Note: If false the slideshow will stop running when the slide is changed by the user.
pauseOnHover: Boolean_Value	Default Value = false
arrows: Boolean_Value	Default Value = false
arrowsInside: Boolean_Value	Default Value = true
showPips: Boolean_Value	Default Value = true Note: If false pips will still exist but are hidden from view
dragAndSlide: Boolean_Value	Default Value = false Note: Enables slideshow to be dragged. This will work for mobiles as well.
globalContent: Boolean_Value	Default Value = false Note: Moves photo content outside.
hideContent: Boolean_Value	Default Value = true Note: Content will be hidden as default, once animation has finished the content will show for the current slide.
contentFromEdge: Boolean_Value	Default Value = true Note: Hides the content based on the dimensions it currently has. If false, it will use css.

Functions

New to this version, you are now able to call these functions from other parts of the page.

These can also be called in the console using $(".slider_##")[0].Function(); (e.g. $(".slider_1")[0].stopAnimating();). This can be very useful for styling and debugging.

targetSlide(Integer_Value)	Slideshow will animate slides to show the index required Integer_Value = Index of slide
prevSlide()
nextSlide()
stopAnimating()	Useful for styling content or removing distractions
startAnimating()	Starts animation if needed through content
addSlide(String_Value, HTML_Value, Integer_Value)	Adds a new slide to an existing slideshow String_Value = Image Source for the new slide HTML_Value = Content shown on the slide Integer_Value = Index where the new slide will be placed
removeSlide(Integer_Value)	Removes slide at the index required Integer_Value = Index of slide
disableLoopLimit()	Slideshow will start looping indefinitely If autoplay was active by default, this will now be switched back on if the limit was reached
enableLoopLimit(Integer_Value)	Slideshow will start a loop limit with the value input into the function If autoplay was active by default, this will now be switched back on if the limit was reached
adjustLoopLimit(Integer_Value)	Adjusts the amount of loops available. If the new value is less than 0, the value will become 0