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 lots of customizing options such as dimensions, play, pause, interval between next and previous slide and some other options. This Image gallery was created by dynamicdrive.com

Simple Image/Photo Gallery Demo

LIVE DEMO

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 265 represents 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 true to false
• To change the time interval of the slides then edit 2500

Like it? Share it.