Add a Simple Image Gallery To Blogger With Easy Customization Options

Image gallerys,slideshows are the best ways to show off your photos,featured posts,images and any other material as you wish.Previously we published a tutorial about adding nivo slider to blogger but many of you gets the problems while adding it to blogger blog.That's why I considered to share a fully and easily customizable image slider/gallery.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.The script of this gallery is taken from dynamicdrive and I have made some changes so that you can easily add it to your blog.The installation is one step installation,you just have copy and paste the code inside content section of HTML/JavaScript widget i.e you can add it as HTML/JavaScript widget.Press the red button below to see live demo of the slider.

Live Slider Demo

How To Add Simple Image Gallery To Blogger Blog?

1. Go to Blogger Dashboard > Layout
2. Add a Gagdet > HTML/JavaScript
3. Paste the below code,

<style type="text/css">
#simplegallery2 {
    //CSS for sample Gallery
position: relative;
    visibility: hidden;
    border: 5px solid black;
    margin: auto;
}

#simplegallery2 .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://helperblogger.ucoz.com/code/simple-img-gallery.js">
</script>

<script type="text/javascript">
var mygallery2=new simpleGallery({
 wrapperid: "simplegallery2", //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 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],

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

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

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

       ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"]
 ],
 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="simplegallery2"></div>

Now make these changes,

• First resize all your images to a fixed dimensions.
• To change dimension of slide simply this code in above code 400 and 365 where 400 is width and 265 is height.
• Replace IMAGE LINK HERE with your own images
• Replace # with the link which you want to add to that particular image.
• Replace IMAGE DESCRIPTION HERE with some description about the image. This image decription will appear at the top when any user hovers mouse cursor on it. If you don't want to add any description then simply delete IMAGE DESCRIPTION HERE
• If you want to turn of auto play of images then simply change true to false
• To change the time interval between next and previous slide then edit 2500
• To change the font of description then change calibri with your own font name.
  

Finally save your changes and you are done...

That's all aout simple image gallery,I hope you will surely like this little gadget.If you need any help about customizations then feel free to ask me.I will reply back as soon as time allows.