You are Here : / / Jquery Scrolling Image Gallery Widget For Blogger

Sunday, 13 May 2012

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.

 So we’re continuing the trend of introducing astonishing widgets and hence today we will insert an Attractive JQuery Image Scroller in Blogger which is not only knows for its styling but also for its speed.Credits to tutsplus and MyBloggerLab for creating such a great widget for blogger

I know you would love to preview the Image Scroller, so instead of waiting go ahead and view the instant preview.



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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPkrT39qe3RZL1Mh3uEnuKaEAQQpzDWskNDNS9qob-e3uG4bo5CGELJN-ikrycMKYesgc8JFPpctgRFLnPBB3i3XKIXQBKyVRkPP5dsNopaF7Y_wch_8koxYJyprBJ-0NFqgWvUGPoRo/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/AVvXsEiS0CKHVdUm2sCdSTTrOCqhbd9Y7Zod77SrUIEvsQzUKyGUNaLvpmfSogWBCfzZhbQpx4vC1-2UP_mkxTQTrCqy5Uhhf8PpICguS0_41WLLBv-f221huVtW6sJlqigaC52Nm0jOkO7m_LY/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/AVvXsEhPqiuUjEjVkB3Ul7fW4xoYViXN2BEedZRBLGU3rh1ggu2gRMVg67BeoZPvBqXiNHRz1yJYddtueRy9BrNnFU2rfaQNC-_5fG8KnbqhrgKMiQsQf47oloGHVNR5NS59BrRNY5K5N84IRzQ/s1600/rtl.png) no-repeat; left:100px; }

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

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

#ltr:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BNZU1Vi5ZnYePf8LeJs9U2W4-Jr5Erj_-avqROK5vi86YaURyVnKxlalNLO5L06f0n2Hg1LXUhhZ8vVuyOf2XrP-8oCpM6BuL8ocqKrXKLK8NZd4qKVDiAmskk0zWl_OipkAZlRojCs/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.
Jquery Scrolling Image Gallery Widget For Blogger
4/ 5
By
On Comment

GET OUR BLOGGING SECRETS DIRECTLY TO YOUR INBOX!

Want access to our blogging secrets,We never shared on our blog.Just enter your email address below to get access to our 3 ultimate guides on how to run a successful blog!

Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!

Subscribe to: Post Comments (Atom)