Can I have an image slide show with the Fade Out effect?

FAQ: Can I have an image slide show with the Fade Out effect?

Slide Show in the Center Column  



If you move 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 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 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"> before existing content and </div> after it. 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>");
$(".slideShow .images").after("<div class='slidetabs'></div>");
for(i=0;i<$(".slideShow .images img").length;i++){
    $(".slidetabs").append("<a href='#'></a>");
}
var root = $(".slidetabs").tabs(".images > div", {effect: 'fade', fadeOutSpeed: "slow", rotate: true}).slideshow();
window.api = root.data("slideshow");
$(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;
}

}
.images div {
    display:none;
    position:absolute;
}
</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.