jQuery product slider

3 comments Written on September 30th, 2010 by shopizer
Categories: Blog, Technology
Tags: , , , , , , , , ,



This is an example of a jQuery product slider script based on jCarousel image gallery plugin.

We added a few extra css lines to enhance the UI to fit a store front page and display text below product images. This jQuery product slider widget can display product images and html text under the images such as the price, short description or even product reviews.

jQuery product slider integration Shopizer shopping cart


See a demo
Download the code by clicking on Like Button on our Facebook page (Downloads section)

This article describes

- Extend jCarousel css to fit a certain number of products in a page
- Extend jCarousel css to modify the slider appearance
- Extend jCarousel css to fit text below product image
- Add extra HTML to the jQuery product slider

HTML header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="lib/jquery.jcarousel.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<link rel="stylesheet" type="text/css" href="css/product-slider-skin.css" />

This example uses jQuery 1.42.hosted on google but has been tested with previous jQuery 1.3.2 version.

I have downloaded the latest version of jCarousel

Fortunatly no changes are required to jCarousel javascript to implement the slider, the onlycahnges required are in the css file. The HTML header includes above shows the extension of jCarousel css file by adding our product-slider-skin.css after jCarousel skin.css to overwrite properties.

Clip spacing and customization

The default css file is configured by default for 75 x 75 pixels images with a 10 pixels margin between images. In this case, images will be 120 x 100 pixels and the component needs to fit in a 650 pixels page area width.

The horizontal calculation will be :
(IMAGE WIDTH * NUMBER OF IMAGES TO DISPLAY) + (PADDING[10 px] * NUMBER OF IMAGES TO DISPLAY)

In our case, let’s assume 4 images (120 * 4) + (10 * 4) = 520 px required for the clip.

An additional static text area of 120 px added at the end of the clip and a 10 px marging will be added

Total horizontal spacing  650 px

Now let’s add 40 pixels under the image to display text in the clip area.

Our product-slider-skin.css file will overwrite original jCarousel properties with these new dimensions

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 650px;
    height: 150px;
    padding: 10px 40px; /** REDUCED WIDGET PADDING **/
}
 
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  520px;
    height: 140px;
    float: left;
}
 
.jcarousel-skin-tango .jcarousel-item {
    width: 120px; /** IMAGE WIDTH **/
    height: 140px; /** IMAGE HEIGHT = 100px + 40px TO DISPLAY DESCRIPTION **/
}

We will also add a static text section at the end of the clip which will have to be defined this way

/** TEXT MESSAGE */
.jcarousel-skin-tango .message {
    position: absolute;
    top: 10px;
    right: 40px;
    width: 120px;
    height: 140px;
}
 
.jcarousel-skin-tango .text {
    margin-top: 20px;
    font-size: 45px;
    color: #333333;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: -4px;
    text-align:center;
}

Finally, i have decided to remove the original box around the viewer, modified background color and added lines on the top and bottom of the slider to give it a look similar to Amazon.com product slider

.jcarousel-skin-tango .jcarousel-container {
    background: #FFFFFF; /** CHANGED THE BG TO WHITE **/
    border: none; /** overwrites jcarousel border **/
    border-top: 1px solid #cccccc; /** ADDED TOP LINE **/
    border-bottom: 1px solid #cccccc; /** ADDED TOP LINE **/
}

HTML

Now here is the html that will display the products

<div id="products" class="jcarousel-skin-tango">
<div class="jcarousel-clip">
<ul class="jcarousel-list">
	<li class="jcarousel-item"><a id="image1">
<img src="http://farm4.static.flickr.com/3469/3920261056_4c23fd4847_m.jpg" border="0" alt="" width="120" height="100" /></a>
 
Puma Drift Cat II
<strong><span style="text-decoration: line-through;">$99.99</span> <span style="color: red;">$69.99</span></strong></li>
 
...
 
</ul>
</div>
<div class="message">
<div class="text">Shoes
<span style="font-size: 22px; letter-spacing: -1px;">featured selection</span>
<span style="font-size: 10px; letter-spacing: 4px;">.............</span></div>
</div>
</div>

And the javascript to enable jCarousel starting at item 1

 
jQuery(document).ready(function() {
 
    jQuery('#products').jcarousel({
        start: 1
    });
});
 
</script>

 

Integrate product slider widget to Shopizer

Since this s pure client side html and javascript coding, the integration will be done in product detail content section.

1) First upload jCarousel files sing sm-central – Store Front – Files management panel

- skin.css
- prev-horizontal.png
- next-horizontal.png
- jquery.jcarousel.min.js

unless the CMS configurartion are changed images will reside in 

http://host/media/bin/images/merchant_id/

and files will reside in 

http://host/media/bin/files/merchant_id/

2) You will need to add those lines to product-slider-skin.css in order to view navigation arrows. Those properties will overwrite jCarousel properties assuming images are in the same folder as the css file. The host and merchant id have to be replaced by your values

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://localhost:8080/media/bin/images/1/next-horizontal.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://localhost:8080/media/bin/images/1/prev-horizontal.png);
}
 
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://localhost:8080/media/bin/images/1/prev-horizontal.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(http://localhost:8080/media/bin/images/1/next-horizontal.png);
}

3) Upload product-slider-skin.css using file management panel

4) You will need this block of code only to display the widget
Paths have to be replaced by your server configuration

<script src="http://&lt;host" type="text/javascript"><!--mce:3--></script>
<div id="wrap">
<div id="products" class="jcarousel-skin-tango">
<div class="jcarousel-clip">
<ul class="jcarousel-list">
	<li class="jcarousel-item"><a id="image1" href="#"><img src="http://%3chost%3e/media/images/products/%3Cmerchant%20id%3E/image.gif" border="0" alt="" width="120" height="100" /></a>
Product name
<strong><span style="text-decoration: line-through;">$99.99</span> <span style="color: red;">$69.99</span></strong>
 
...</li>
</ul>
</div>
<div class="message">
<div class="text">Shoes
<span style="font-size: 22px; letter-spacing: -1px;">featured selection</span>
<span style="font-size: 10px; letter-spacing: 4px;">.............</span></div>
</div>
</div>
</div>
<script type="text/javascript"><!--mce:4--></script>

5) Create a new sectioncode in central -> Store Front -> Store Front content section. The content section is ‘Product pages bottom’ or where you want to display the widget.

It will render as the illustration below

Tags: , , , , , , , , ,

This entry was posted on Thursday, September 30th, 2010 at 9:30 pm and is filed under Blog, Technology. You can subscribe to any comments to this entry via RSS 2.0. You can skip to the end and leave a response. Pinging is currently not allowed.

3 comments “jQuery product slider”

Thanks that works great, now i am trying to reduce its size

Cathy Smith
11.03.10 at 3:51 pm
Permalink Reply

Hi thank you for this grate tutorial  ,

I have one question :  i have 10 products i want to show 5 products at time and when you click the slide it show other new 5 products . so basically it will be only one click to the right or lift and show all my 1o products 
how can i modify it  ?
please let me know as soon as possible thank you so much..
peace

Ashraf
01.11.11 at 7:49 pm
Permalink Reply

Other thing how you use the Featured , is it possible if you rollover the product it will show the text in the Featured box ? 

Appreciate it you work is amazing..

Thanks again :)

Ashraf
01.11.11 at 7:55 pm
Permalink Reply

Leave a Reply