How to add a slideshow on an slscart page

3rd party simple jquery slideshow

This slideshow uses jquery and slideshow-jr.js both which are included in slscart.

10.8.0 and above

1. slideshow requires jquery.js which is already included in %STYLE_SHEET%. Make sure %STYLE_SHEET% is in you template.

2. slideshow requires %STYLE_LOWER% in your template. This should go just above </body>.

3. On the page put %%SSINS%% where you want the slideshow. Put it on a line by itself.

4. Under Administration > Slideshow Settings

* Upload the pictures for the slideshow. For best results, they should be the same width and height.

* Enter in the alt text for each image

* Enter in any css style code. For example, entering in:

* Set 'enable' checkbox to enable the slideshow

* Set 'center' checkbox to horizontally center the slideshow.

* Save settings by clicking 'Save' at the bottom of the page.

10.7.1 and below

Add it to the template

If you want to put the slideshow on a specific page, create a special template just for that page.

1. slideshow requires jquery.js which is already included in %STYLE_SHEET%

2. Make sure slideshow-jr.js is in the /go directory

3. In the template, just before </body> add this:

<script src="%SITE_URL%/go/slideshow-jr.js" async></script>

4. Include this css in the <head>. Each image should be the size set in height: and width.

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:550px;   /* image height */
    width: 367px;   /* image width */
    margin: 0 auto; /* this centers the slideshow */
}
#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
#slideshow img.active {
    z-index:10;
    opacity:1.0;
}
#slideshow img.last-active {
    z-index:9;
}

5. Add this in the body of the template, where you want the slideshow to be. Set the src= to the path to each slideshow image.

This can also be embedded on a page itself.

<div id="slideshow">
<img src="your_image" width="550" height="367" alt="slide 1" class="active">
<img src="your_image" width="550" height="367" alt="slide 2">
<img src="your_image" width="550" height="367" alt="slide 3">
</div>

***