Skip to main content

Image Carousel with jQuery

jQuery is a wonderful cross browser javascript library. The effects that can be created using it are simply superb and uber cool. And that without using flash. The two major advantages of not using flash is that you can save on bandwidth as embedded flash objects are not bandwidth friendly. Besides flash is not supported on iPads, meaning which on an iPad the webpage will be a complete piece of junk and nothing else with missing components.
The polaroid effect is not covered in this article. Some other time!

Now there are many jQuery based carousels on the internet. So why need a new one? well, actually you don't. But for example you wish to integrate a carousel in Blogger. The choices become severely restricted and then the customization is often difficult to configure. Most of the carousels available for blogger are simple ones with image transitions and basically nothing more. So I present to you a new form of jQuery carousel which is optimized for blogger.

Before you embark on the journey you can the check out the Demo.
Demo
What will you need?

  • A CSS file for declaring the style of the carousel
  • A javascript file to code its behavior
  • Pictures to be shown
First let's invite the javascript. Since blogger does not allow hosting javascripts, you need to host it yourself.
For this to work you need two javascripts. One is the jQuery library. get the latest one from here.

http://code.jquery.com/jquery-1.6.4.min.js

Embed it before </head> in your template.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

The other one is the one we need to create to make the carousel work.
So here it goes,

 <script type='text/javascript'>  
 $(document).ready(function() {  
   //Set Default State of each portfolio piece  
   $( & quot;.paging & quot;).show();  
   $( & quot;.paging a: first & quot;).addClass( & quot; active & quot;);  
   //Get size of images, how many there are, then determin the size of the image reel.  
   var imageWidth = $( & quot;.window & quot;).width();  
   var imageSum = $( & quot;.image_reel img & quot;).size();  
   var imageReelWidth = imageWidth * imageSum;  
   //Adjust the image reel to its new size  
   $( & quot;.image_reel & quot;).css({ & #39;width&# 39;: imageReelWidth  
   });  
   //Paging + Slider Function  
   rotate = function() {  
     var triggerID = $active.attr( & quot; rel & quot;) - 1; //Get number of times to slide  
     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide  
     $( & quot;.paging a & quot;).removeClass( & #39;active&# 39;); //Remove all active class  
     $active.addClass( & #39;active&# 39;); //Add active class (the $active is declared in the rotateSwitch function)  
     //Slider Animation  
     $( & quot;.image_reel & quot;).animate({  
       left: -image_reelPosition  
     }, 500);  
   };  
   //Rotation + Timing Event  
   rotateSwitch = function() {  
     play = setInterval(function() { //Set timer - this will repeat itself every 3 seconds  
       $active = $( & #39;.paging a.active&# 39;).next();  
       if ($active.length === 0) { //If paging reaches the end...  
         $active = $( & #39;.paging a:first&# 39;); //go back to first  
       }  
       rotate(); //Trigger the paging and slider function  
     }, 7000); //Timer speed in milliseconds (3 seconds)  
   };  
   rotateSwitch(); //Run function on launch  
   //On Hover  
   $( & quot;.image_reel a & quot;).hover(function() {  
     clearInterval(play); //Stop the rotation  
   }, function() {  
     rotateSwitch(); //Resume rotation  
   });  
   //On Click  
   $( & quot;.paging a & quot;).click(function() {  
     $active = $(this); //Activate the clicked paging  
     //Reset Timer  
     clearInterval(play); //Stop the rotation  
     rotate(); //Trigger rotation immediately  
     rotateSwitch(); // Resume rotation  
     return false; //Prevent browser jump to link anchor  
   });  
 });  
 </script>  


You can embed it in the template in the following ways :


  • Copy Paste Method : Copy paste the entire code before </head>  (easy method)
  • Src Method : Create a javascript file and call it using the src attribute. (Recommended) Downside is that quick editing will be difficult but pages will load much faster as the browser caches those elements. My suggestion is embed the script first (Copy paste method) and once it works perfectly, delete it from there, create a js file and upload it somewhere. then put this code before </head> in your template.
    <script src='link of file.js' type='text/javascript'/>
  • Following the first method(the copy paste method) the screenshot should look somewhat like this,


    and the rest of the code should follow(I have shown only a snippet to show exactly where the lines should be.)
Now let's see the CSS file
Here also you can either do the copy paste method or the src one. Blogger allows inserting CSS from Template > Advanced > Add CSS, so I will do that for now. Once all errors are removed, I can create the src line and remove embedded code.
 /*--Main Container--*/  
 .main_view {  
 float: left;  
 position: relative;  
 }  
 /*--Window/Masking Styles--*/  
 .window {  
 height:300px; width: 900px;  
 overflow: hidden; /*--Hides anything outside of the set width/height--*/  
 position: relative;  
 }  
 .image_reel {  
 position: absolute;  
 top: 0; left: 0;  
 }  
 .image_reel img {float: left;}  
 /*--Paging Styles--*/  
 .paging {  
 position: absolute;  
 bottom: -5px; right: 0px;  
 width: 900px; height: 0px;  
 z-index: 100; /*--Assures the paging stays on the top layer--*/  
 text-align: center;  
 line-height: 0px;  
 display: none; /*--Hidden by default, will be later shown with jQuery--*/  
 }  
 .paging a {  
 padding: 5px;  
 text-decoration: none;  
 color: #transparent;  
 }  
 .paging a.active {  
 font-weight: bold;  
 -moz-border-radius: 10px;  
 -khtml-border-radius: 10px;  
 -webkit-border-radius: 10px;  
 }  
 .paging a:hover {font-weight: bold;}  

So that's the CSS file.

I will now explain the workings. If you want you can skip this paragraph.
main container - outer container containing the images as well as the slider buttons below
window - container for the img reel(which actually contains the images), the height and the width should be the one you want. Change them to suit your style.
img_reel - this has got the images, changing values here is funny, try them out :D
image_reel sets the image attributes, you may wish it to float in the direction of your choice.
paging - choose the paging styles here, height and width are all self explanatory, a high z-index ensures that the element remains on top of other elements as no element should have a higher index than 100.
paging a, active, hover - gives the hyperlink styles, if you have text in the HTML in the sliders(I don't) they will be rendered accordingly.

Now comes the HTML file itself.
You can 
  • either create a Post and embed it in the HTML mode OR
  • create a custom HTML/Javascript gadget and insert the code there. I chose this.
 <div class="container">  
 <div class="folio_block">  
 <div class="main_view">  
 <div class="window">  
 <div class="image_reel">  
 <a class="img" href="http://i.imgur.com/MsDjc.jpg" ><img alt="" src="http://i.imgur.com/MsDjc.jpg" /></a>  
 <a class="img" href="http://i.imgur.com/Cn548.jpg" ><img alt="" src="http://i.imgur.com/Cn548.jpg" /></a>  
 <a class="img" href="http://i.imgur.com/GChA9.jpg" ><img alt="" src="http://i.imgur.com/GChA9.jpg" /></a>  
 <a class="img" href="http://i.imgur.com/mmojx.jpg" ><img alt="" src="http://i.imgur.com/mmojx.jpg" /></a>  
 <a class="img" href="http://i.imgur.com/u8nwS.jpg" ><img alt="" src="http://i.imgur.com/u8nwS.jpg" /></a>  
 <a class="img" href="http://i.imgur.com/67L84.jpg" ><img alt="" src="http://i.imgur.com/67L84.jpg" /></a>  
 </div>  
 </div>  
 </div>  
 <div class="paging">  
 <a href="#" rel="1"><img src="http://i.imgur.com/8Y9jH.png"/></a>  
 <a href="#" rel="2"><img src="http://i.imgur.com/8Y9jH.png"/></a>  
 <a href="#" rel="3"><img src="http://i.imgur.com/8Y9jH.png"/></a>  
 <a href="#" rel="4"><img src="http://i.imgur.com/8Y9jH.png"/></a>  
 <a href="#" rel="5"><img src="http://i.imgur.com/8Y9jH.png"/></a>  
 </div>  
 </div>  
 </div>  

As you can see, the code here is very simple.
The first series of images are the actual image files with the small image as the link and the large full size image as the src.
The second one is the image for a bullet, you can change the image and even put text just before the closing anchor tag that just before </a>

For example
<a href="#" rel="5"><img src="http://i.imgur.com/8Y9jH.png"/>Blah Blah</a>


Save it and you are done. Most probably your carousel will work in a somewhat ugly way. You need to adjust the height and width of the elements to make it align correctly. As for the Polaroid style effect that you see in the demo, that's another story and I will cover it some other day. As for now that's how you make a simple image carousel using jQuery in Blogger.

Popular posts from this blog

Burhan Wani – The man and his mission

Burhan Wani – The man and his mission The death of a young ‘hero’? On the 8th of July, Burhan Muzaffar Wani died in the Valley of Kashmir. Thousands poured out on the streets to commemorate his services to the movement that he had come to symbolize of late. The relative calm of the region was shattered with curfews, killings and allegations of human rights abuses. His father was proud for the services his son had offered in the name of their faith, convinced that he would go to Heaven. Amidst all this, the romantic ideals of a young boy, just off his teens began to shake up the youth of the entire country, both in and beyond India. There is a lot of unrest in the Kashmir Valley recently, especially in the aftermath of the death, nay execution of Burhan. All of this is not unexpected in any way. In fact, this was foreseen. Even his glorification, his elevation to the status of a martyr in the service of Islam does not come as a surprise to me.
There is a section of the media and a sig…

Indian Partition - The Forgotten Question

The Partition of India was a terrible catastrophe. There is no doubt about that. Millions were killed, displaced, thousands were raped, orphaned etc. All this was done in a space of a few months. Mobs frantically killed each other for life, religion, property, identity, revenge and any other reason they could then think of. Even since the call for Direct Action, there was no doubt about a serious religious conflict. What followed was an eventual ethnic cleansing of parts of India of non Muslims and Muslims. How it happened, what happened, how trains full of dead bodies piled up on each side of new borders is well known. Hundreds of books have been written, research over decades have been published. We know all that.

The basic idea of it all was simple - Jinnah believed Hindus and Muslims are two separate nations and the latter should have a distinct political entity for themselves, based on Islam, their faith. To identify this they had to prove one thing. That the All India Muslim Le…

The postman, Megha and I

This is a story that goes way back to 2001 or 2002. I was in the sixth standard. Yes, I do remember it quite vividly. It was funny, painful and a bit out of the ordinary – basically it had all the ingredients that allows a memory to stick a great while longer than others. In the process of my recollection, I may miss out a few pieces here and there, but it will be pretty accurate. Of course, the intention of this exercise is in no way to humiliate anyone else or point out the flaws about others’ actions. I now find it hilarious and I think so would you.
I studied in the Vivekananda Mission School, a private English medium school in Joka, on the outskirts of Kolkata. If you know the location of the Indian Institute of Management, Kolkata, you know the location of my school. I studied there till the twelfth standard. We had many students in our class (sixth). We were divided into several sections, ranging from A to F (not sure if it was F or G). But anyway, I was in section B, the sect…