Jquery Sliding Image Gallery For Blogger Blog

With the help of sliding image gallery your blog readers can enjoy featured posts & it will increase your blog's page views.This is very simple image gallery widget with uses JQuery, CSS & HTML.You can easily customize this widget and add your own images with post or page links.

You can change scrolling left right from hover buttons.In this tutorial you will learn "How to Add Jquery Sliding Image Gallery To Your Blogger Blog".Follow the given below steps:

Recommend For You: 'The Next Web' Featured Post Widget With Hover Effect

Add Jquery Sliding Image Gallery To Blogger Blog

• Go to Blogger Dashboard > Template 
• Backup Your Template
• Edit HTML > Proceed > Tick Expand Widget Templates
• Press Ctrl+F & Search For:

]]></b:skin>

• Paste Below Code Before ]]></b:skin>

.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }

#outerContainer {

width:900px;

height:202px;

 margin:auto;

position:relative; }

#imageScroller{

width:900px;

height:202px;

position:relative;

background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmECnsLot8P80IGOhUkP5w7MxgusYzJRj9FD_aPvQAP_3_QHz5U18F9G8Bov1hxweyopZSxvRh-ARni-QL2ObQA29CRMKmR08Um8lUhNKGolfk6ePaqEwWGNZbU-zd6FxKQ8RoZw1nkLc/s1600/1.png) no-repeat; }

#viewer {

 width:880px;

height:182px;

overflow:hidden; margin:auto;

position:relative; top:10px; }

#imageScroller a:active, #imageScroller a:visited { color:#000000; }

#imageScroller a img { border:0; }

#controls {

width:900px;

height:47px;

 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK5pe7rl_zdaHpbCgKTrjQNL8crirenpHmVKvCqXvx09TZsaw2hMjLR9lHhVRJtGW6Etb5gnAcVCYR1s_Ox1RjnpjtoJPtVV1lQcLTavLFSBk1c3UDWhPniBpUmcjJV1_npY7ILfuOZHE/s1600/1.png) no-repeat; position:absolute;top:4px; left:4px; z-index:10;}

#controls a {

 width:37px;

height:35px;

position:absolute; top:3px; }

#controls a:active, #controls a:visited { color:#0d0d0d; }

#title { color:#ffffff; font-family:arial; font-size:23px; font-weight:bold; width:100%; text-align:center; margin-top:10px; }

#rtl {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRiuWVTbOWlXOAiP06-RFmbKMu5oz0YsAf7WejJVk3ad-LeuZCoA9zkvnuoTK3ILz0Q5G2b40tU-gx3vYSW-riJ123kykIsTeGAyo1k_I4ghIrKihzDIPgZmyVt5rC1SKHuOphHYGKYh8/s1600/rtl.png) no-repeat; left:100px; }

#rtl:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRiuWVTbOWlXOAiP06-RFmbKMu5oz0YsAf7WejJVk3ad-LeuZCoA9zkvnuoTK3ILz0Q5G2b40tU-gx3vYSW-riJ123kykIsTeGAyo1k_I4ghIrKihzDIPgZmyVt5rC1SKHuOphHYGKYh8/s1600/rtl.png) no-repeat; left:99px; }

#ltr {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VG51k8Ao6Bx1vugGjCdIJysVGP8ALIYUcowEGEXfDWbDMwUY3Uxgl1Ukhcdg4yJcmFme-LmCHm0BQSnN1J9jdflJrYkcIHRROxVOQZKIKojb02bIrP9cSieOUcP9eYk2BUqphrNiFRI/s1600/ltr.png) no-repeat; right:100px; }

#ltr:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUWYuXgd3BqE96KR7SBC3wHOk0FLrdBNNO-jVohbu3rUpR0N4mIa1kPX1WhZtjvp5Vz_JfrOjDZdyckrn7N8sDx608Z0984iuatDsHOpMPBwBVrHCBhskvaVGFlZED9FDAUBntZkwh9Y/s1600/ltr_over.png) no-repeat; }

• Go to Blogger Dashboard > Layout
• Click Add Gadget and Select 'HTML/Javascript'
• Paste Below Code Inside 'HTML/Javascript' Gadget

<div id="outerContainer">

<div id="imageScroller">

<div id="viewer" class="js-disabled">

<a class="wrapper" href="Link URL 1" title="First-Image-Title"><img class="logo" id="blogger" src="Image-URL 1" alt="First-On-Hover-Title" /></a>

<a class="wrapper" href="Link URL 2" title="Second-Image-Title"><img class="logo" id="digg" src="Image-URL 2" alt="Second-On-Hover-Title" /></a>

<a class="wrapper" href="Link URL 3" title="Third-Image-Title"><img class="logo" id="facebook" src="Image-URL 3" alt="Third-On-Hover-Title" /></a>

<a class="wrapper" href="Link URL 4" title="Forth-Image-Title"><img class="logo" id="friendfeed" src="Image-URL 4" alt="Forth-On-Hover-Title" /></a>

<a class="wrapper" href="Link URL 5" title="Fifth-Image-Title"><img class="logo" id="stumbleupon" src="Image-URL 5" alt="Fifth-On-Hover-Title" /></a>

<a class="wrapper" href="Link URL 6" title="Sixth-Image-Title"><img class="logo" id="twitter" src="Image-URL 6" alt="Sixth-On-Hover-Title" /></a></div>

   </div>

  </div>

  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

  <script type="text/javascript">

   $(function() {

     //remove js-disabled class

    $("#viewer").removeClass("js-disabled");

     //create new container for images

    $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");

    //add images to container

    $(".wrapper").each(function() {

     $(this).appendTo("div#container");

    });

    //work out duration of anim based on number of images (100 second for each image)

    var duration = $(".wrapper").length * 3000;

    //store speed for later (distance / time)

    var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;   

    //set direction

    var direction = "rtl";

    //set initial position and class based on direction

    (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;

    //animator function

    var animator = function(el, time, dir) {

     //which direction to scroll

     if(dir == "rtl") {

       //add direction class

      el.removeClass("ltr").addClass("rtl");

      //animate the el

      el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {   

       //reset container position

       $(this).css({ left:$("div#imageScroller").width(), right:"" });

       //restart animation

       animator($(this), duration, "rtl");

       //hide controls if visible

       ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;     

      });

     } else {

       //add direction class

      el.removeClass("rtl").addClass("ltr");

      //animate the el

      el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {    

       //reset container position

       $(this).css({ left:0 - $("div#container").width() });

       //restart animation

       animator($(this), duration, "ltr");

       //hide controls if visible

       ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;   

      });

     }

    }

    //start anim

    animator($("div#container"), duration, direction);

    

    //pause on mouseover

    $("a.wrapper").live("mouseover", function() {

     //stop anim

     $("div#container").stop(true);

     //show controls

     ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;

     ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;

     ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;

     //variable to hold trigger element

     var title = $(this).attr("title");

     //add p if doesn't exist, update it if it does

     ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;

    });

    //restart on mouseout

    $("a.wrapper").live("mouseout", function(e) {

     //hide controls if not hovering on them

     (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;

     //work out total travel distance

     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());      //work out distance left to travel

     var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;

     //new duration is distance left / speed)

     var newDuration = distanceLeft / speed;

     //restart anim

     animator($("div#container"), newDuration, $("div#container").attr("class"));

    });       

    //handler for ltr button

    $("#ltr").live("click", function() {    

     //stop anim

     $("div#container").stop(true);

     //swap class names

     $("div#container").removeClass("rtl").addClass("ltr");     

     //work out total travel distance

     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

     //work out remaining distance

     var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

     //new duration is distance left / speed)

     var newDuration = distanceLeft / speed;

     //restart anim

     animator($("div#container"), newDuration, "ltr");

    });

    //handler for rtl button

    $("#rtl").live("click", function() {    

     //stop anim

     $("div#container").stop(true); 

     //swap class names

     $("div#container").removeClass("ltr").addClass("rtl");

     //work out total travel distance

     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

     //work out remaining distance

     var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

     //new duration is distance left / speed)

     var newDuration = distanceLeft / speed;

     //restart anim

     animator($("div#container"), newDuration, "rtl");

    });

   });

  </script>

Customization:

• Replace Red Color Code With Your Own Links
• Replace Pink Color Code With Image Title
• Replace Yellow Color Code With Image URL
• Replace Blue Color Code With Hover Title
• Now Save Your Gadget & Its Done

If you need our help, Just ask via comments.Happy Blogging & Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.