jQuery Scrolling Image Gallery Widget for Blogger

A Blogger always dream to present his blog in a gorgeous manner. This is the reason why he used different widgets to make it look ideal as widgets play vital role in attracting eyes of their audience. An Image Scroller is becoming essential need of approximately every successful blogger as they use it to present their featured posts. There are many image Scrolling widgets which are available on internet but they either lacks in speed or are unable don’t draw your attention towards them.

Features of Stunning Image Scroller:

• Capable of Scrolling Images in both left and right directions
• Build with eye catching styling CSS.
• Easy to optimize with HTML
• No Compromise on Speed
• Scrolling Images with JQuery Effect
• Scrolling Stops on Image Hover
• Title Appear on Image Hover
  

Inserting Image Scroller Style Sheet CSS in Blogger:

• To insert CSS style sheet simply follow the instructions.
• Step# 1: Go To Blogger.com >> Your Blog
• Step# 2: Then Click on Template >> Edit HTML >> Proceed
• Step# 3: Now Search for the following code in your template.

]]></b:skin>

 Step# 4:  When You Found ]]></b:skin> just above it paste the following code.

/* MBL Stunning Jqury Image Scroller For Blogger*/.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(http://1.bp.blogspot.com/-fAiXPAx4bFY/T6-RfXMw8mI/AAAAAAAAB44/mgfkw-YnknI/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(http://1.bp.blogspot.com/--jemYBfwW5I/T6-QDcwWjGI/AAAAAAAAB4w/YM2Wi91Bhjs/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(http://1.bp.blogspot.com/-UDdR8ia8VRg/T6-EMJkOa_I/AAAAAAAAB38/yAlBZsPFIOg/s1600/rtl.png) no-repeat; left:100px; }
#rtl:hover {background:url(http://1.bp.blogspot.com/-UDdR8ia8VRg/T6-EMJkOa_I/AAAAAAAAB38/yAlBZsPFIOg/s1600/rtl.png) no-repeat; left:99px; }
#ltr {background:url(http://3.bp.blogspot.com/-vzam19EhobY/T6-EKCsNh2I/AAAAAAAAB3w/JlF_gyDGsD0/s1600/ltr.png) no-repeat; right:100px; }
#ltr:hover {background:url(http://2.bp.blogspot.com/-292fELblPsA/T6-ELUa8IjI/AAAAAAAAB30/5P2DAt34ZYU/s1600/ltr_over.png) no-repeat; }

Customization:

• To Change The width oF the Image Scroller Replace all 900px  present in the coding. If you change the width of Scroller then it's must that we change the viewer width 880px and it should be 20px less then the width of Scroller.
• To change font size Replace 23px
• To change font style Replace arial

Step# 5: Now after customizing according to your choice save template by pressing Save Template button

Inserting Stunning Image Scroller Coding in Blogger:

• Simply follow these instructions
• Step# 1: Go To Blogger.com >> Your Blog >>
• Step# 2: Now Select Layout >> Add a Gadget
• Step# 3: Then Click on Add HTML/JavaScript >> and Paste the Following Code

<div id="outerContainer">
   <div id="imageScroller">
    <div id="viewer" class="js-disabled">
                                                                      <a class="wrapper" href="First-Image-Destination-URL" title="First-Image-Title"><img class="logo" id="apple" src="First-Image-URL" alt="First-On-Hover-Title" /></a>


 <a class="wrapper" href="Second-Image-Destination-URL" title="First-Image-Title"><img class="logo" id="firefox" src="First-Image-URL" alt="Second-On-Hover-Title" /></a>

<a class="wrapper" href="Third-Image-Destination-URL" title="Second-Image-Title"><img class="logo" id="jquery" src="Second-Image-URL" alt="Third-On-Hover-Title" /></a>
<a class="wrapper" href="Forth-Image-Destination-URL" title="Third-Image-Title"><img class="logo" id="twitter" src="Third-Image-URL" alt="Forth-On-Hover-Title" /></a>
<a class="wrapper" href="Fifth-Image-Destination-URL" title="Forth-Image-Title"><img class="logo" id="jqueryui" src="Fourth-Image-URL" alt="Fifth-On-Hover-Title" /></a>                                                                                                                                                                                      <a class="wrapper" href="Sixth-Image-Destination-URL" title="Sixth-Image-Title"><img class="logo" id="jqueryui" src="Sixth-Image-URL" 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 First-Image-Title with the Title of your image
• Change First-Image-URL With the URL of your image
• Replace First-On-Hover-Title with the Text you want to see on Image hover
• Replace First-Image-Destination-URL with the URL of your Post
• And simply follow the same steps to change Second, Third, Fourth, Fifth and Sixth image Scroller

To insert more Image Scollers simply just after <div id="viewer" class="js-disabled"> paste this code in the coding.

<a class="wrapper" href="Sixth-Image-Destination-URL " title="Sixth-Image-Title"><img class="logo" id="jqueryui" src="Sixth-Image-URL" alt="Sixth-On-Hover-Title" /></a>

Step# 4: After customizing the we will save the widget by pressing Save  button


And That's it guys not go view your blog it will give you picture perfect results.


So guys easy enough, but if you still feel any difficulties or errors then feel free to drop down your problem via commenting. I would love yo assist you till then peace Blessing and Happy Scrolling.

Follow @shipsocker

Stay Connected With Free Updates

Subscribe via Email