Jquery Scrolling Image Gallery Widget For Blogger

Advertisements
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(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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

5 comments

May 13, 2012 at 10:22 PM

Awesome DuDe !

Editorial Team MOD
May 14, 2012 at 1:04 AM

@yAhyA
Thanks Pal For Liking the widget. Peace

August 14, 2012 at 12:48 PM

In your example when I try to hover over an image it starts it over from the beginning, will this happen when I install it on my blog?

Also I want an image scroller where each image "flips" like a page from one image to the next. Do you know what this is called?

A lot of bloggers have this style to display the blog buttons from each blog they follow and each image is click able too.


Editorial Team MOD
August 14, 2012 at 1:07 PM

Oh Thanks! There was an Error with our DEMO and That is being Fixed Right Now. However, This will not happen when you will apply on your Blog.

We have Shared a Flipper Jquery Plugin which does everything pretty Smartly >> Its Called >> Page Flipper Plugin.

This widget is surly help you out because the demo is not working correctly you are confused but don't worry it will work smartly on your Blog.

Editorial Team MOD
August 14, 2012 at 1:08 PM

You can Check the DEMO >> mbltestingblog.blogspot.com It is Working like a Charm When you hover over it.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.