Can I have a horizontal image slide show

FAQ: Can I have a horizontal image slide show

Slide Show in the Center Column  




If you move the cursor over an image, the slide show will be paused.

In this case the next steps should be followed: 

1. Go to Manage Website > Edit Website

2. Select the required site page in the Website Map tree and switch to the Edit Page tab

3. Add a Text and Image page section to the center page container

4. Open the section in edit mode and add the required images. In our example all images have the same dimensions: 500px x 500 px. 






5. Once the images have been added, click on the View HTML button, add <div class="slideShow"> at the start of the existing content and </div> at the end. Save the changes.



Note: If required, you can add links to the images in the View Editor via the Add Link dialog window ("How do I create a link?"). 

6. Drag a HTML page section to the center page container and place it under the Text and Image page section. Click on the first icon (triangle) for this HTML section and select 'Make Page Section Shared' from the context menu.  




7. Open the HTML section in the edit mode and add the following javascript code:

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(".slideShow").wrapInner("<div class='images'></div>");
$(".slideShow .images img").wrap("<div></div>");
$(".slideShow .images a").wrap("<div></div>");
var root = $(".slideShow").scrollable({circular: true, speed: 2000}).autoscroll({interval: 1000});
window.api = root.data("scrollable");
$(function() {
    api.play();
});
$(".slideShow").hover(
    function(){
        api.stop();
    }, 
    function(){
        api.play();
    }
);
</script>

8. Go to Manage Website > Edit Webmaster Verification (Working with the HEAD section) and paste the code snippet into that window:

<style type="text/css">
.slideShow {
    position:relative;
    overflow:hidden;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}
.slideShow .images {
    width:20000em;
    position:absolute;
    clear:both;
}
.images div {
    float:left;
}
</style>

If required, the WIDTH and HEIGHT parameters can be changed.

9. Save the changes and publish the site for the changes to be applied online.

Note:

Do not add the script to the Product Details page as it will cause problems with the Zoom functionality
 
Important note for developers and shop owners who use bespoke templates:

This functionality is only available for templates that have the generic template version id=5 or greater. Please see Template Version Control for more information on the generic template version.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.