Can I have a horizontal product slide show?

FAQ: Can I have a horizontal product slide show?

Slide Show in the Center Column - Option 1 



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

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 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 edit mode and add the following javascript code:

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<div class="slideShow">   
   <div class="images"></div>
</div>

<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>");
var root = $(".slideShow").scrollable({circular: true, speed:800}).autoscroll({interval: 1000});
window.api = root.data("scrollable");
$(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:

<style type="text/css">
.slideShow {
    position:relative;
    overflow:hidden;
    width: 510px;
    height: 200px;
    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.

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 to clickthrough to the Product Details page for the product by clicking on the image.

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 to this section.

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:

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<div class="slideShow">   
   <div class="images"></div>
</div>

<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>");
var root = $(".slideShow").scrollable({circular: true, speed:800}).autoscroll({interval: 1000});
window.api = root.data("scrollable");
$(function() {
    api.play();
});
$("#scroller").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:

<style type="text/css">
.slideShow {
    position:relative;
    overflow:hidden;
    width: 130px;
    height: 200px;
    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.

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

Notes:

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