Jquery Scrolling Ikon Gallery Widget For Blogger

A Blogger e'er dream to acquaint his weblog inwards a gorgeous manner. This is the argue why he used dissimilar widgets to larn inwards hold off ideal equally widgets play vital role inwards attracting eyes of their audience. An Image Scroller is becoming essential postulate of to a greater extent than or less every successful blogger equally they utilization it to acquaint their featured posts. There are many epitome Scrolling widgets which are available on network but they either lacks inwards speed or are unable don’t depict your attending towards them.

 So we’re continuing the tendency of introducing astonishing widgets in addition to thence today nosotros volition insert an Attractive JQuery Image Scroller inwards Blogger which is non alone knows for its styling but besides for its speed.Credits to tutsplus and MyBloggerLab for creating such a swell widget for blogger

I know yous would dearest to preview the Image Scroller, so instead of waiting become ahead in addition to sentiment the instant preview.

MBL Gorgeous Image Gallery Scoller Widget

Features of Stunning Image Scroller:

• Capable of Scrolling Images inwards both left in addition to correct directions
• Build alongside oculus catching styling CSS.
• Easy to optimize alongside HTML
• No Compromise on Speed
• Scrolling Images alongside JQuery Effect
• Scrolling Stops on Image Hover
• Title Appear on Image Hover

Inserting Image Scroller Style Sheet CSS inwards Blogger:

To insert CSS vogue canvass merely 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 next code inwards your template.

]]></b:skin>

Step# 4:  When You Found ]]></b:skin> just above it glue the next 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg58TkSQaKaLRjf8RjZy6Z71bYtABCsw482ZsUrVEf0QmcTs0TciaM4T8StcGrqIAo8KUW38j7DhuGjRhp8MHtChShO2K63ixFWKNrCVdWE4cQkl9wNkZMytypfX6r4Zsb9EtK9Xv6hRhs/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/AVvXsEhhRKIidBNQxS2mPC0ycNIz2JiSZ5Hm2wisf2sNaiW0x_XXLyN3o067aNgPmQIxF3t7P-hz-WoXm5CTjLWqS3eHHjaftK6J__kJcUALdDyS2idnlv8r_w1BMlmLa_yepNqZ8fUSKaSYsNA/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/AVvXsEgJnIZd1Hm7QBYrPKiNQHj3EktR9cEl3ZoKL_2i1OaAjXc5WhTgLSIvg3EDSkoD408uHL4M6ocOA9w0a322N8-qmgg-ncqm3nu017lryREam6JfJrDnI91P3-emeJNRUj9SCxNxRyAr454/s1600/rtl.png) no-repeat; left:100px; }

#rtl:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJnIZd1Hm7QBYrPKiNQHj3EktR9cEl3ZoKL_2i1OaAjXc5WhTgLSIvg3EDSkoD408uHL4M6ocOA9w0a322N8-qmgg-ncqm3nu017lryREam6JfJrDnI91P3-emeJNRUj9SCxNxRyAr454/s1600/rtl.png) no-repeat; left:99px; }

#ltr {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6oWg2-OB9Swj7Bg15_bpAWb2wEBoyRdksA7GwQMaJr8Cp-b_jHbcBHr-FYvrSAqUpizVUawd-3yRI77gfhqww1lT6Rtx6A7eWEmyZOWf0VtYMQf2P9c-IVvxNTtXqBEzFI5SSF4f_KY/s1600/ltr.png) no-repeat; right:100px; }

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

Customization:

• To Change The width oF the Image Scroller Replace all 900px  present inwards the coding. If yous alter the width of Scroller in addition to so it's must that nosotros alter the viewer width 880px and it should endure 20px less in addition to so the width of Scroller.

• To alter font size Replace 23px

• To alter font vogue Replace arial

Step# 5: Now after customizing according to your alternative salve template past times pressing Save Template button

Inserting Stunning Image Scroller Coding inwards 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 >> in addition to 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="Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9d2e9;">First-Image-Title"><img class="logo" id="apple" src="First-Image-URL" alt="A Blogger e'er dream to acquaint his weblog inwards a gorgeous mode Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9ead3;">First-On-Hover-Title" /></a>

 <a class="wrapper" href="Second-Image-Destination-URL" title="Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9d2e9;">First-Image-Title"><img class="logo" id="firefox" src="First-Image-URL" alt="A Blogger e'er dream to acquaint his weblog inwards a gorgeous mode Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9ead3;">Second-On-Hover-Title" /></a>

<a class="wrapper" href="Third-Image-Destination-URL" title="Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9d2e9;">Second-Image-Title"><img class="logo" id="jquery" src="Second-Image-URL" alt="A Blogger e'er dream to acquaint his weblog inwards a gorgeous mode Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9ead3;">Third-On-Hover-Title" /></a>

<a class="wrapper" href="Forth-Image-Destination-URL" title="Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9d2e9;">Third-Image-Title"><img class="logo" id="twitter" src="Third-Image-URL" alt="A Blogger e'er dream to acquaint his weblog inwards a gorgeous mode Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9ead3;">Forth-On-Hover-Title" /></a>

<a class="wrapper" href="Fifth-Image-Destination-URL" title="Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9d2e9;">Forth-Image-Title"><img class="logo" id="jqueryui" src="Fourth-Image-URL" alt="A Blogger e'er dream to acquaint his weblog inwards a gorgeous mode Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9ead3;">Fifth-On-Hover-Title" /></a>                                                                                           

                                                                                           

<a class="wrapper" href="Sixth-Image-Destination-URL" title="Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9d2e9;">Sixth-Image-Title"><img class="logo" id="jqueryui" src="Sixth-Image-URL" alt="A Blogger e'er dream to acquaint his weblog inwards a gorgeous mode Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9ead3;">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 novel 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 seat out of images (100 instant for each image)

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

//store speed for after (distance / time)

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

//set direction

var management = "rtl";

//set initial seat in addition to shape 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 management to scroll

if(dir == "rtl") {

  //add management 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() : zip ;

});

} else {

  //add management 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() : zip ;

});

}

}

//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") : zip ;

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

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

//variable to concord trigger element

var championship = $(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 non hovering on them

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

//work out full move 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 shape names

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

//work out full move 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 shape names

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

//work out full move 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 yous desire to run across on Image hover

• Replace First-Image-Destination-URL with the URL of your Post

• And merely follow the same steps to alter Second, Third, Fourth, Fifth in addition to Sixth epitome Scroller

---

To insert to a greater extent than Image Scollers merely exactly after <div id="viewer" class="js-disabled"> glue this code inwards the coding.

<a class="wrapper" href="Sixth-Image-Destination-URL " title="Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9d2e9; line-height: normal;">Sixth-Image-Title"><img class="logo" id="jqueryui" src="Sixth-Image-URL" alt="A Blogger e'er dream to acquaint his weblog inwards a gorgeous mode Jquery Scrolling Image Gallery Widget For Blogger"background-color: #d9ead3; line-height: normal;">Sixth-On-Hover-Title" /></a>

---

Step# 4: After customizing the nosotros volition salve the widget past times pressing Save  button

And That's it guys non become sentiment your weblog it volition give yous moving-picture present perfect results.

So guys like shooting fish in a barrel enough, but if yous nevertheless experience whatever difficulties or errors in addition to so experience complimentary to driblet downwards your work via commenting. I would dearest yo tending yous till in addition to so peace Blessing in addition to Happy Scrolling.