Attractive Jquery Sliding Image Gallery For Blogger

Antisite2.blogspot.com » blogger-tips-tricks , Jquery , Slide show » Attractive Jquery Sliding Image Gallery For Blogger

Attractive Jquery Sliding Image Gallery For Blogger

Posted by Anti on 10:09 PM

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.

2. Now select "Template" Like Below.

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/AVvXsEipYpahghAUoEu9H2x8BlyFZjFWTfvvx3HOzs1g3UKEQJoqs-iexYjQHCV_FgykghUA6sMb0cgHaQoXo9Lg-T4fVG1aSmpWSxtdvrpGlp0CqmZjt3QlgDFLL3HXrUpLPRYqwZLDiHN6Eto/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/AVvXsEhnvqQiKPCY7iG7BpIoersEiK8jieX5tgqSjLx8FGg75byY0l4bJYAl29vf0qI36idoG__JgCIbSQQmA_uqWpVJolp4KGpx4SnMbC3gJU-XRJBuVWf3ccxbz4t4X8hpxFQvjV4sbO7wloI/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/AVvXsEgtQFf_8GbMVeZkaI9_VhkP1x5Sv8XpKich56aw_myNQrtRJaiClEuMG2_k1yYRrzuC2YhNXSbFkVAzBZH8pF5dEIsKAePWyjdigcAF220OZILTncHr4-QpBU5UiMUZXtKhqrFg_3UjMK8/s1600/rtl.png) no-repeat; left:100px; }
#rtl:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQFf_8GbMVeZkaI9_VhkP1x5Sv8XpKich56aw_myNQrtRJaiClEuMG2_k1yYRrzuC2YhNXSbFkVAzBZH8pF5dEIsKAePWyjdigcAF220OZILTncHr4-QpBU5UiMUZXtKhqrFg_3UjMK8/s1600/rtl.png) no-repeat; left:99px; }
#ltr {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmvchjIxzijORjwcqalHdNKNANL4HFEyJ18W5gjyGtRxVWe7urJoX8Ni_0Q9vQZ-a1YvA4-Zy5JikMaiHj0j2fciCOAd9zgzUV4waLsfQ8A79XoULJdOXNQ4gdT0KiJNm7Hg8rpwSzpjg/s1600/ltr.png) no-repeat; right:100px; }
#ltr:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAI5VrCVdhEqvOS7qU2hnFRvGIXFC80XTyEr56aK6ziUmB8m9mXI7WYkgvUGfQ82yNlXokM2LRPjAfmTdrGecS6JbbFtn_fqUwH2ZnpoMSO2UrTGHp9Dqg3G97AaD23NeUky9KJxnbyM/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>