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.

Comments

Popular posts from this blog

How To: Change Fonts On The 5800, 5233 etc

The font that comes with Nokia is nice. But after six months you are bound to crave for a new look to your phone. Now changing fonts on a phone is usually not an easy task, I mean that was how you must have thought. But you know what you can use custom fonts, yes any font of your choice on your Nokia phone without any software. All you need to do is copy and paste a bunch of files. No replacing of system resources necessary! First to increase your greed, I will post some screenshots, Screenshot Gallery o   Font Style Download o Another Font Style Now let me tell you how I did it. Procedure to apply new Fonts Connect the phone in the ‘Mass Storage’ profile to the computer. Alternatively, you can use the memory card reader. Goto the Memory Card, it shows up as a Removable Disk. Navigate to the ‘resource’ folder and open it. Copy the ‘Fonts’ folder into in. Eject the device and restart. You should see the new fonts applied. Procedure to apply your Fonts Ma

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 was At an event in the Jawaharlal Nehru University, Ravi Shankar gave a talk on the occasion of the Nehru Memorial lecture on 13 th 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 ack

Operation Situation Report Summary - Ukraine 4 March

 Defense Without Strategy Ukraine seems to be hell bent on fighting a static war without almost any flexibility. Their forces may be valiant and defiant, but without a coherent strategy, the best they can hope for is to prolong their own suffering WITHOUT significantly hurting the enemy. Here is how the situation stands as of now. Kherson has fallen. The front in the South was decisively broken day before yesterday with the capture of the railway station and port. Naturally, the Russian forces did not wait and moved straight North to Mykolaiv. All UA forces on the Dnepr facing South are likely to be outflanked. Unless the Russian spearheads are cut off and destroyed in a day or two, it will be too late. The fall of the entire South seems to be inevitable.  To extricate the forces, UA should have withdrawn forces from other sectors (including far away Donetsk front). Now, the best they can try is to win time to reinforce Kyiv. Kharkov is almost surrounded. This battle seems to be fought