Thursday, September 27, 2012

Attractive Jquery Sliding Image Gallery For Blogger

This is a nice Jquery widget.It sliding image gallery.Im using jquery,Css and HTML for this. you can add your own images with your links. you can change scrolling left right from hover buttons.so you can try this for your home page. Attractive Photo Gallery With Jquery Zoom  Effect is another Jquery image gallery.Follow these steps to add it to your blog.Im included demo for this post. you can check it.

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

6.  Paste below code Before ]]></b:skin> code

.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/AVvXsEijBz6TIAH9zwOJPLwkMFqUMPSTO9-ZxIzgRqvHPK9TkRkOdAcivYyGVnk-NF7Gomd9_CqsWWu2XjHsYBDFWcdwc_kHpzR_8hgYBiNQXfue1Fusu1v9uQl_FrqOxfKnrQFY1qdRSLR28j0/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/AVvXsEgl-YRSDAByk8uNN2s8Rx9_-zS0JgNiqkS6BDISD9O2HknrXgY9dlP00lYSaxueJS8waMWzqL8E2uW3on8J-Z04e0IQ68ykS6q5wyN5LpsoCdk83_DyzMKdHPYHW4zMgnxRyEm3wqDThRM/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/AVvXsEgnO6LU3iJg4WRo-Z2pd4ZWp9oib3FquEZa60JVNqrNOSYgMobTNx973BTwWUdzDS5b8fzUrVuga7mAU-osLrwvLj5owIZnHeITZiiQjJVlASDA9JDW38OflhKc_FwH3vRgnVotwejnjWA/s1600/rtl.png) no-repeat; left:100px; }
#rtl:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnO6LU3iJg4WRo-Z2pd4ZWp9oib3FquEZa60JVNqrNOSYgMobTNx973BTwWUdzDS5b8fzUrVuga7mAU-osLrwvLj5owIZnHeITZiiQjJVlASDA9JDW38OflhKc_FwH3vRgnVotwejnjWA/s1600/rtl.png) no-repeat; left:99px; }
#ltr {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgReUeTiASr3aAr6SI5-Pii1LvFeLRH4-1jEmrunQ1gR8MtdTy-XsPPxrxXeLw6MFQHg6LyrLyiZhlGmpsyHfurG_qYBd-DXPu0CnpdwP0HuoCMfbgwQsJxo4rTF2bG0ZGnCq8I0Sb-SRU/s1600/ltr.png) no-repeat; right:100px; }
#ltr:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQuadQfqxL1E88L7_fI-O5u2Xk5XoCOsNjHendw9sqaOCQx8doLQQeJk7MgO1JwSIJ_e01UZZcMTnYnXluwUXg67UtJa7Tp7SDP0nZljJsWXkM-LsWtF27Pl1-lBacswFxKK5F30iv7-k/s1600/ltr_over.png) no-repeat; }

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<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="First-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="Second-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="Third-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="Forth-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>

10. Now save your template. You are done.




Dont Miss Another Post Connect With Us

Get informed when we publish the new post.So, you have to subscribe below

0 comments:

Post a Comment