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

Sri Sri & Homosexuality – Another media hit job in the making

Sri Sri Ravi Shankar (henceforth named as Mr. Shankar) is not new to controversy. Not even with topics like homosexuality. What the event wasAt an event in the Jawaharlal Nehru University, Ravi Shankar gave a talk on the occasion of the Nehru Memorial lecture on 13th November, 2017. One among the audience lamented that he was ill-treated since he was known to be a homosexual. Then Mr. Shankar stated that he needed to accept himself as he was and love knew no boundaries. Let’s see and hear what he said…Let’s quote Mr. Shankar verbatim as reported by some of the newspapers.
You treat yourself better, doesn’t matter how others treat you. You don’t think you are sick or something’s wrong with you. If you stand up, nobody can insult you… But if you feel weak and meek, and if you feel bad about yourself, nobody can make you feel better.’ Indian Express reported this in addition as well. Let me quote it directly here as well.
This is your tendency now. Just acknowledge it and accept it, and kno…

Salesmen of God

Christian evangelicals are similar to parasites[1]. The similarities are simply astounding. Among all predatory religions, Evangelical Christianity has done, by far, the greatest harm to humankind[2]. Like leeches, the Evangelical sucks the lifeblood of an unchristian society till it descends either into chaos and incessant civil conflict or the relegation of the culture to the pages of history(Bowden, 1985). Even in the 21st century this unashamed activity continues(Bhosle, 2003).[3]
Evangelicals usually have a similar methodology when it comes to proselytization. Like parasites, the target is usually one belonging to the most vulnerable section of society. This does not necessarily mean that they try harvesting only the most down trodden of the society(Kelly, 2001). And most certainly, the objective is never the upliftment of the persons involved. The target groups may, for example, belong to ethnic minorities, refugees (both economic and political), caste groups, the poor and the si…

Once again in Mirik

This is a guest post by my mother, Lily Ray Gangopadhyay.

Once again in Mirik after 17 years, I felt very nostalgic because when we used to visit this place, my sons were little kids. Mirik is one of my favorite places. In 17 years it has obviously changed a lot, but still it remains sparsely populated,little crowded and a clean place.



Dad striking a pose (caption by Sarthak) Since this hill station is not at very high altitude one can enjoy a very comfortable stay here and the roads are very inviting.The lake is the main attraction of this place, the Buddha monastery,view point are very nice. I was lucky that the weather was so clear that Mt. Kanchenjunga was clearly seen all the time. Just for a restful walking around the lake, sitting on the grass and gazing at the bushes of pine and fur trees and the peaks of the Himalayas, this is my most preferred destination.











How to go>> one can take a taxi , share taxi or bus from NJP station,Siliguri bus stand or Bugdogra airport.It is l…