Can I have a product slide show with the Fade Out effect?

FAQ: Can I have a product slide show with the Fade Out effect?

Slide Show in the Center Column - Option 1 



If you move the cursor over a product image, the slide show is paused and you will be able to click through to the Product Details page of the required product by clicking on the image.

To reproduce this slideshow on your site, please implement the following: 

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 Featured Products page section to the center page container. You should add products you would like to be included to the slide show to this section.

4. Drag a HTML page section to the center page container and place it under the Featured Products section. Click on the first icon (triangle) for this HTML section and select 'Make Page Section Shared' from the context menu.  As an example, you can name this section "slide show"




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

<div class="slideShow">   
   <div class="images"></div>
</div>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(".featuredProductListThbSection").addClass("skip");
for(i=0;i<$(".featuredProductListThbBlock").length;i++){
    $(".slideShow .images").append($($(".featuredProductListThbSection img.thnSize")[i]).parents("a").clone());
}
$(".slideShow .images a").wrap("<div></div>");
$(".slideShow .images").after("<div class='slidetabs'></div>");
for(i=0;i<$(".slideShow .images img.thnSize").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>

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

<style type="text/css">
.slideShow {
    position:relative;
    overflow:hidden;
    width: 130px;
    height: 200px;
    margin: 0 auto;
}

.images div {
    display:none;
    position:absolute;
}
</style>

If required, the WIDTH and HEIGHT parameters can be changed.
For the slide show to be left aligned, remove this line: margin: 0 auto;




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

Slide Show in the Right/Left Column - Option 2 




If you move the cursor over a product image, the slide show will be paused and you will be able to clickthrough to the Product Details page for this product.

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 Featured Products page section to the center page container. You should add products you would like to be included in the slide show.

4. Drag a HTML page section to the right/left page container. Click on the first icon (triangle) for this HTML section and select 'Make Page Section Shared' from the context menu.  As an example, you can name this section "slide show"




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

<div class="slideShow">   
   <div class="images"></div>
</div>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(".featuredProductListThbSection").addClass("skip");
for(i=0;i<$(".featuredProductListThbBlock").length;i++){
    $(".slideShow .images").append($($(".featuredProductListThbSection img.thnSize")[i]).parents("a").clone());
}
$(".slideShow .images a").wrap("<div></div>");
$(".slideShow .images").after("<div class='slidetabs'></div>");
for(i=0;i<$(".slideShow .images img.thnSize").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>

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

<style type="text/css">
.slideShow {
    position:relative;
    overflow:hidden;
    width: 130px;
    height: 200px;
    margin: 0 auto;
}

.images div {
    display:none;
    position:absolute;
}
</style>

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

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

Notes:

1. The script added to a page only affects the display of products added to the Featured Products section placed in the center page container of this specific page. 
2. 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.