Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Create an ecommerce carousel with jQuery & XML

Build a content loop that can be used to enhance any online store or gallery

Websites today have become more than just static pages that do nothing. We are used to seeing almost all modern websites with at least some kind of animated interaction for the user to play with. eCommerce websites, for example, will almost always – by their nature – need to hold a lot of products, possibly within a small section of the page. So what better solution than to have an image slider or carousel that not only allows the user to look at the product, but also to read all about it without having to leave the page? The idea in this tutorial is to have some content boxes that we can slide infinitely (in a circular motion), and when the ‘Read more’ link is clicked, the respective item moves to the left and a new content area will slide out showing more information about this product that gets loaded in by XML.

Then we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position. We are going to use a jQuery plug-in that has already been written, but we will play around with the settings to customise it further, and towards the end look at a simple way of loading external data using XML.

DOWNLOAD THE COMPLETE CODE

Getting ahead

The first thing you need to do is open a new file in your chosen text editor using the new HTML doctype and add in the paths to the stylesheets. Here we are using Google Web Fonts to load in the Lobster type, but what you use here is completely up to you.

001  <head>
002  <title>Content Carousel with jQuery &amp; XML</title>
003  <meta charset="UTF-8" />
004 
005  <!-- CSS -->
006  <link rel="stylesheet" type="text/css"     href="css/style.css" />
007  <!-- Google fonts --> 
008 
009  <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
010  </head>

Main container

What we are going to do here is add in our main container so we can centre the whole thing. Next, using the HTML5 header tag, we’ll insert our main header title. We then make a container id so we can use that as a hook for our jQuery, followed by a class container and a class wrapper for us to hook to using CSS.

001 <div>
002 
003 <header>
004 <h1>Content Carousel with <span>jQuery &amp; XML</span></h1>
005 </header>
006 
007 <section id="container"     class="container">
008 <div>
009 
010  
011 </div><!-- END wrapper -->
012 
013 </section><!-- END container ->

The item content

Now we need to add in the markup for the item within the wrapper div. We are going to create several items so we need to give it a class of item as well as another class – item-1. Then within this, everything else is pretty much self-explanatory, but one thing to note is the empty div with a class name of img. This will be used in a later step with the CSS to include images of the products that you wish to display.

001  <div>
002 
003       <div>
004         <div></div>
005          <h3>Imagination is powerful</h3>
006          <p>£19</p>
007       <h4>
008            <span>&ldquo;</    span>
009           <span>Imagination is more     important than knowledge.</span>
010      </h4> 
011             <a href="#"         class="more">more...</a>
012 
013   </div><!-- END item -->

The inner content

Now we are going to add in the markup for our inner content. When the Read more button is clicked, it will slide open to reveal this content that, in a later step, will be populated by XML. This HTML should sit so it is positioned just underneath the item content, and again it includes many empty classes that we will be using in future steps to hold the CSS code.

001 <div>
002      <div>
003            <h6>Imagination is key to being</h6>
004         <a href="#">close</a>
005     <div>
006      </div><!-- END content text -->
007      <ul>
008      <li><a href="#">Read more</    a></li>
009      </ul>
010    </div><!-- END content     -->
011   </div><!-- END content-wrapper -->

Another item

What you need to do now is duplicate the item markup (both steps 3 and 4) as many times as you want. In this tutorial we have created eight items, all with their own class names – item-2, item-3, item-4 and so on; everything else can be left as is.

001 <div>
002   <div>
003          <div></div>
004           <h3>Make mistakes to learn</h3>
005       <p>£29</p>
006      <h4>
007           <span>&ldquo;</span>
008       <span>Anyone who has never made a     mistake has never tried anything new.</span>
009        </h4>
010        <a href="#">more...</    a> 
011             </div><!-- END item -->
012        <div>
013          <div>
014          <h6>Have you made mistakes?</h6>
015        <a href="#">close</a>
016         <div>
017         </div><!-- END content text -->
018         <ul>
019                 <li><a href="#">Read more</a></li>
020             </div>    
021          </div>
022          </div>

Start the CSS

In this step we will begin adding in our CSS code. As usual we start with a reset, but you may want to use the reset of your choice as this one is quite outdated and not really recommended any more. Then we make HTML5 elements display block-level to achieve consistent styling and add in a background image. Finally we centre the main-container with a top and bottom margin set to a value of 20px.

001 *{
002     Margin: 0;
003           Padding: 0;
004 }
005 section, aside, footer, header {
006     display: block;
007 }
008 body {
009     font: 12px/18px Arial, sans-serif;
010     margin: 0;
011     padding: 0;
012     color: #43200d;
013     background: url('../imgs/bg.png');
014 }
015 .main-container {
016     width:990px;
017     margin: 20px auto;
018 }

Carousel styles

With the carousel styling, we are going to be using a lot of positioning. So when we position an element relative, anything inside that element can then be positioned ‘absolutely’ anywhere inside – as we did with the close and Read more buttons. Lastly we apply a touch of CSS3 using box-shadow to give it a more sophisticated finish.

001 .close{
002 	position:absolute;
003 	top:10px;
004 	right:10px;
005 	background:#fff url('../imgs/cross.png') no-repeat center center;
006 	width:27px;
007 	height:27px;
008 	text-indent:-9000px;
009 	outline:none;
010 	-moz-box-shadow:1px 1px 2px 		rgba(0,0,0,0.2);
011 	-webkit-box-shadow:1px 1px 2px 		rgba(0,0,0,0.2);
012 	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
013 	opacity:0.7;
014 }

The item images

Now let’s add in our item or product images by using CSS. First of all we give the close button a hover state using the opacity setting, and the item-main is our background that is positioned absolutely with anything hidden that overflows. Next we include the image we want using the img class, before using the same image for the other items. Again, the full code is on the CD.

001 .close:hover{
002 	opacity:1.0;
003 }
004 .item-main{

Google Web Fonts

What we need to do now is to style our titles with a Google Web Font called Lobster. Go to www.google.com/webfonts and do a search for the Lobster typeface. Once you have it you can include the link within the header (done in step 1) and include the CSS to the h1 rule and item.h3 rule. You can then give them a nice subtle drop-shadow in order to keep things consistent. The complete step code is on the CD.

001 h1 {
002 	font-family: 'Lobster', cursive;
003 	font-size:30px;
004 	color: #333;
005 	text-shadow: 0px 1px 1px #fff;	
006 }

Quote styles

Now let’s add some styles to the quotes that sit at the bottom of each product. We’re using Georgia here (because it’s more readable), and give it a nice left border. We are going to give our quote a font-size of 80px and keep the colour as subtle as possible. Now we can style our price tag and pull it up slightly using a negative top margin. The full code is on the cover disc.

001 .item h4{
002 	font-family: "Georgia","Times New Roman",serif;
003 	font-style:italic;
004 	font-size:12px;

Content wrapper

Now we have the main carousel styling, we need to wrap things up by adding some styles to the inner content that slides into view once the Read more button is hit. We can style the background via the content-wrapper div and then make sure anything overflowing is hidden. Give the main content a width of 660px using the inner content class. Find the full code on the CD.

001 .content-wrapper{
002 	background:#dddf95;
003 	position:absolute;
004 	width:0px;
005 	height:440px;
006 	top:5px;
007 	text-align:left;

Finish the content

Let’s add the last lot of styles to our inner content. Here we size the text to 14px, and again use Georgia to keep it in line with the overall look of the carousel. Again we have used the Lobster font for the inner contents title. Finally, we style an unordered list, ul, that can be used for extra buttons located under the main text. The step code in full is on the disc.

001 .content-text{
002 	font-size: 14px;
003 	font-style: italic;
004 	font-family: "Georgia","Times New 	Roman",serif;
005 	margin:10px 20px;

Navigation arrows

All we need to do now is add our navigation arrows to scroll through the carousel. The arrows are on the CD, but you can create your own for practice. We’re going to position them as absolute and apply a hover state with opacity. The full CSS is on the disc.

001 .nav span{
002 	width:25px;
003 	height:38px;
004 	background:transparent url('../imgs/	arrows.png') no-repeat top left;
005 	position:absolute;

Get things moving

Locate the ‘js’ folder on the CD and save it into your own file directory. Then include these lines of script at the very bottom of the HTML markup, just above the closingtag. What we have done here is include the jQuery library and the jQuery plug-ins within the js folder – these plug-ins are essentially going to control the carousel dynamics.

001 script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" /script
002 script type="text/javascript" src="js/jquery.easing.1.3.js" /script

Activate the carousel

Now all it takes to make the carousel work is to hook our plug-in to the #container id. If you open up your carousel in a browser, you should be able to see it in action. Plus if you click on the Read more option the inner content should slide open to reveal its main content. As it is, this will be empty, but we are going to populate it using an XML file in the remaining steps.

001 script type="text/javascript"
002        $('#container').contentcarousel();
003  
004 /script

The plug-in

Open the ‘jquery.contentcarousel.js’ file in the text editor, and locate the settings variable. This is where you can change the speed of the carousel as well as the speed of the item animation when the Read more button is clicked. You will also notice we can control how the easing works for both the carousel and item animations. The full code can be found on the CD.

001 // speed for the 	sliding animation
002     sliderSpeed     : 	500,
003     // easing for the sliding 	animation
004     sliderEasing    : 'easeOutExpo',

At ease

As mentioned, we can make changes to either the sliding animation or item animation. So let’s have a little play with that and change the item animation easing from easeOutExpo to easeOutElastic. Then, to prevent it looking too bouncy, we can make it slightly slower by changing the item speed from 500 to 1,000 milliseconds. Again see the disc for the complete code.

001 // speed for the sliding animation
002     sliderSpeed     : 500,
003     // easing for the sliding animation
004     sliderEasing    : 'easeOutExpo',
005     // speed for the item animation (open / close)

Introduce the XML

XML is a very handy way of including content that is normally external. For instance, you can have an XML file located on a completely different server, but it can be linked to your project in a few ways. To begin with, let’s create a new file called ‘content.xml’, which is basically the skeleton XML file.

XML content

Now with the basic XML markup added, let’s incorporate the content we want to include – our items for sale. The topic of XML would take a whole tutorial on its own, but the tags in this markup are fairly straightforward. XML enables you to create your own descriptive tags, and the one we are most interested in is thetag. So within thetags, type in your product description text.

It’s a long-established fact that a viewer will be distracted by readable content on a page when looking at its layout. The point of using filler text like Lorem Ipsum is that it has a more-or-less normal distribution of letters, but unlike using something like ‘Content here, content here’ will not distract the eye.

Include the XML

In this step we are going to include the XML file using jQuery, which we will place inside our script tags and underneath the contentcarousel() function call. Here we have called the document.ready function and used the $.ajax method to fetch the content.xml file. On success we call the manipulateXml function that we are going to create in the next step.

001  
002             $(document).ready(function(){
003                 $.ajax({
004                     type: "GET",
005                     url: "content.xml",
006                     dataType: "xml",
007                    success: manipulateXml

manipulateXml function

Let’s create the manipulateXml function that we just called upon. Here we have an each loop that cycles through the XML file and finds the content tag. Then it stores the data inside a variable called body, and we then store the data of this variable inside another variable called output. Lastly we append the data to our content-text class, which is then displayed.

001  function manipulateXml(data){
002       $(data).find("item").each(function(){
003   var body = $(this).find("content").	text();
004                     var output = [
005    "
" + body + "
", 006 ] 007 $(".content-text").append(output. join("n")); 008 }); 009 }

Final thoughts

Loading in the XML like this is great for one description only, but as it is, it’s not ideal. However, let it be a challenge for you to experiment with the jQuery and XML file to figure out how you can get different content relating to that specific product or image.

×