Code

Web Design Tips: Combining jQuery Effects and Plugins For A Great Marketing Effect

The lightweight (small file size) and concise jQuery library makes it relatively easy to add interactive effects and merchandising to just about any ecommerce website.

Screen Capture From The Example Page

Screen Capture From The Example Page

In this edition of “Web Design Tips,” I will quickly show you how to combine a few jQuery effects and the jCarousel jQuery plugin to create a merchandising section near the top of a sample page. This merchandising section will show four products at a time and slide to the left, revealing additional products every three seconds. When a visitor aims his mouse pointer at one of the product images, the slider will stop and display a brief product description for that item.

Downloading jCarousel

For the example in the video, I used Jan Sorgalla’s excellent jCarousel plugin.

To start, I downloaded the most recent version of the plugin (version 0.2.3 at the time) and got a zip file full of great stuff—CSS, a couple of images, and three JavaScript files, including the jQuery library version 1.2.3.

The most recent version of jQuery at the time of writing was version 1.3.2, but unfortunately jCarousel did not function as expected when I tried to use it with the newest jQuery library. This incompatibility is not a huge problem, but can come into play if we were making use of other plugins or effects that specifically relied on the newer version of the jQuery JavaScript library.

Call The External Files

The first step toward implementing jCarousel is to reference the required external CSS and JavaScript files.

<code> &lt;link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="skins/tango/skin.css" /&gt;
    &lt;script type="text/javascript" src="lib/jquery-1.2.3.pack.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="lib/jquery.jcarousel.js"&gt;&lt;/script&gt;
</code>

Note that you will need to adjust the path for each of these files depending on your file hierarchy. For example, src="the/path/to/your/folder/jquery-1.2.3.pack.js.

Create the MyCarousel <UL>

The next step is to add an unordered list to your HTML. This unordered list will contain all of the items in our slider and must have an ID of “my carousel.”

Here is an example of the basic structure for the <ul>:

<code>&lt;ul  id="mycarousel" class="jcarousel-skin-tango"&gt;
&lt;li &gt;Something&lt;/li&gt;         
&lt;/ul&gt;
</code>

Here is the example used in the video:

<code>        &lt;ul id="mycarousel" class="jcarousel-skin-tango"&gt;
           &lt;!-- The content goes in here --&gt;
           &lt;li&gt;&lt;img src="images/deal-1.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Coil Framing Nailer&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-2.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Stick Timber Nailer&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-3.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Wide Crown Stapler&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-4.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;3 HP 10" Unisaw&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-5.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Deluxe Plate Joiner Kit&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-6.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Air Hammer&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-7.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Cordless Drill&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-8.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;9" Band Saw&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-9.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Laminate Tripper&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-10.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Cordless Drywall Screwdriver&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-11.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Cordless Impact Driver Kit&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
</code>

Call and Configure the Functions

In the video we feature an autoscrolling version of the jCarousel plugin. So we need to add the following code to the <head> section of our HTML. The code must be contained inside of a <script> tag.

            function mycarousel_initCallback(carousel)
            {


                // Pause autoscrolling if the user moves with the cursor over the clip.
                carousel.clip.hover(function() {
                    carousel.stopAuto();
                }, function() {
                    carousel.startAuto();
                });
            };

            jQuery(document).ready(function() {
                jQuery('#mycarousel').jcarousel({
                    auto: 3,
                    wrap: 'last',
                    initCallback: mycarousel_initCallback
                });

The code auto: 3, sets jCarousel to automatically advance every three seconds. If we had set it to auto: 10, it would advance every 10 seconds and so forth.

The example in the video advances or slides one <li> at a time, but by default jCarsouel advances by three <li> tags at once. To get the effect we want, we must open the jquery.jcarsousel.js file included in the jCarsouel download, find the default configuration properties, and change scroll: 3, to scroll: 1,. In the version, I was working with, scroll was on line 54 of the .js file.

In theory, you should be able to reconfigure jCarousel, within your HTML file by including the following code:

                jQuery('#mycarousel').jcarousel({
                    auto: 3,
                    wrap: 'last',
                    scroll: 1'
                    initCallback: mycarousel_initCallback

But when I tried this with the autoscrolling jCarousel, I experienced a bug that caused the slider to leap from the first <li> to the last. Configure it in the jquery.jcarsousel.js file and it works just fine.

Preparing the CSS

Now that I have jCarsousel in place, I need to create some CSS to control the page style and get my list items sliding.
First, style the <li>, setting its width, height, display and padding. This is key because we want our product descriptions, which are inside of <span> tags embedded in each list item to sit on top of our product images. In the example from the video, the CSS for the list items looked like this:

<code>    li {display:inline; height: 200px; width:200px; padding:50px;}
</code>

Next, style those <span> tags. In the case of the example, I gave them the ID “marMess,” for “marketing message.” The key to this style is to set the display and position so that the <span> makes shows up in a colored box on top of the product image. You will notice that I set the opacity attribute to make the background semi-transparent.

<code>    #marMess {display: block; position: relative; top:-75px; padding: 15px; padding-bottom: 100%; background: #000000; color:#ffffff; opacity: .85; text-align: center; font-weight: bold;}
</code>

Finally, because I did not want the box, the border, or the arrows that were built into the jCarousel skin, I also went in and removed a few of the styles.

Managing How the Page Degrades

As much as I like JavaScript, I know that not every site visitor will have JavaScript turned on in his browser, so I want to make sure that our degrades well, meaning that it still looks good even if JavaScript is not running.

For our slider this is not a huge problem. If a visitor does not have JavaScript running, that visitor will simply see the first four products, which is fine. But remember our goal was to have a slider that showed product images and only displayed a product description when some visitor hovered over a project image. This would not work, if our JavaScript was the only thing that made a product description visible since that would mean that anyone not using JavaScript would never see those descriptions.

To solve this problem, we are going to make the product descriptions show by default, and use the JavaScript to hide them. This way, if a visitor comes to the site they will see products and product descriptions even if they do not have JavaScript running.
In fact, we have already done some of the work. Our CSS has the display attribute for our product descriptions set to “block,” so they will show up.

Next, we need to add a line of JavaScript in the head of our document that hides these descriptions when a visitor’s browser does have JavaScript enabled. That bit of code looks like this:

<code>        $('span').hide();
</code>

There are actually a few different ways we could have accomplished this, but using jQuery’s hide() effect is about as easy as it gets.

Showing the Product Descriptions

Now that our product descriptions are hidden, we need to get them to appear when a visitor hovers over the corresponding product image. To get the desired effect, we will take advantage of jQuery’s fadeIn effect. The code from the example in the video looks like this:

<code>        $('li').mouseover(function () {
        $('span', this).fadeIn('100');

        });
</code>

In this code, $('li').mouseover describes an event, specifically when a visitor moves his mouse over an list item. The code then describes what should happen when that event occurs, $('span', this).fadeIn('100');

In this section of code, ‘span’ is the element that will be effected, and this indicates that it is only the span tag associated with the particular list item that has a mouse pointer hovering over it.

The jQuery effect, fadeIn() causes the product description to show up, and ‘100’ set the duration of the fade in milleseconds.

Hiding the Product Descriptions Again

We are almost done. The final part of our combined effect is to have the product description vanish when a visitor moves his mouse pointer away. To achieve this, we add a few more lines of Javascript.

<code>        $('li').mouseout(function () {
        $('span').hide();
        });
</code>

Now our effect is complete. We have a nice way to merchandise several products in a narrow space on our store website.
Here is the complete HTML page as shown in the video.

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
    &lt;title&gt;Practical Tool Store/Combining Demo&lt;/title&gt;
    &lt;link href="toolstyle.css" rel="stylesheet" type="text/css" media="screen" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="skins/tango/skin.css" /&gt;
    &lt;script type="text/javascript" src="lib/jquery-1.2.3.pack.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="lib/jquery.jcarousel.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        function mycarousel_initCallback(carousel)
        {


            // Pause autoscrolling if the user moves with the cursor over the clip.
            carousel.clip.hover(function() {
                carousel.stopAuto();
            }, function() {
                carousel.startAuto();
            });
        };

        jQuery(document).ready(function() {
            jQuery('#mycarousel').jcarousel({
                auto: 3,
                wrap: 'last',
                initCallback: mycarousel_initCallback
            });


        $('span').hide();
        $('li').mouseover(function () {
        $('span', this).fadeIn('100');

        });

        $('li').mouseout(function () {
        $('span').hide();
        }); 

        });




    &lt;/script&gt;



    &lt;/head&gt;
    &lt;body&gt;

    &lt;div id="wrapper"&gt;
    &lt;div id="header"&gt;
    &lt;img src="images/header.png"/&gt;
        &lt;div id="merch"&gt;
        &lt;ul id="mycarousel" class="jcarousel-skin-tango"&gt;
           &lt;!-- The content goes in here --&gt;
           &lt;li&gt;&lt;img src="images/deal-1.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Coil Framing Nailer&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-2.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Stick Timber Nailer&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-3.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Wide Crown Stapler&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-4.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;3 HP 10" Unisaw&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-5.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Deluxe Plate Joiner Kit&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-6.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Air Hammer&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-7.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Cordless Drill&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-8.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;9" Band Saw&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-9.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Laminate Tripper&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-10.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Cordless Drywall Screwdriver&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="images/deal-11.jpg" alt="What a deal" /&gt;&lt;span id="marMess"&gt;Cordless Impact Driver Kit&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;



        &lt;/div&gt;&lt;!--end merch--&gt;  
    &lt;/div&gt;&lt;!--end header--&gt; 
    &lt;img src="images/footer.png" /&gt;
    &lt;/div&gt;&lt;!--end wrapper--&gt;

    &lt;/body&gt;
    &lt;/html&gt;
</code>
Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x