Add a Simple Image/Photo Gallery to Blogger

This tutorial will show you How To Add A Simple Image/Photo Gallery To Blogger With Easy Customization Options. This is a simple image slider with many customizing options such as play, pause, interval between next and previous slide and other options.So Whenever You'd Like to Add a Review on Your Sites. Then This Slide Might Be Useful.

HOW TO ADD A SIMPLE IMAGE/PHOTO GALLERY TO BLOGGER

• 
  

• Go to Blogger Dashboard --> Layout --> Add A Gadget
• Select HTML/Javascript and paste the code shown below in it

<style type="text/css">
#simplegallery1 {
    //CSS for sample Gallery
position: relative;
    visibility: hidden;
    border: 5px solid black;
    margin: auto;
}
#simplegallery1 .gallerydesctext {
    //CSS for description DIV of Example 1 (if defined)
text-align: left;
    padding: 2px 5px;
    font-family: calibri;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://latest-hacks.googlecode.com/svn/gadgets/Sliding Description Panel/imagegallery.js">
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
 wrapperid: "simplegallery1", //ID of main gallery container,
 dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [
   
       ["IMAGE LINK 1", "#", "_new", "IMAGE DESCRIPTION"],

       ["IMAGE LINK 2", "#", "_new", "IMAGE DESCRIPTION"],

       ["IMAGE LINK 3","#", "_new", "IMAGE DESCRIPTION"],

       ["IMAGE LINK 4", "#", "_new", "IMAGE DESCRIPTION"],

       ["IMAGE LINK 5", "#", "_new", "IMAGE DESCRIPTION"]
 ],
 autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
 persist: true,
 fadeduration: 1000, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})
</script>
<div id="simplegallery1"></div>

WIDGET CUSTOMIZATION

• Resize all your images to a fixed dimension
• To change the dimension of the slide edit 400 and 265 where  represents the 400 width and 265represents height
• Replace IMAGE LINK with the link of the images you want to add in slider
• Replace # with the link that you want to add to the image (When user click on that image it goes to a particular post)
• In place of IMAGE DESCRIPTION add the description of the image. Ifd you don't want to add then delete IMAGE DESCRIPTION
• By default the autoplay of the gallery is on if you want to turn off the autoplay the change trueto false
• To change the time interval of the slides then edit 2500

Via LatestHack