Add Simple Image Gallery To Blogger

How To Add Simple Image Gallery To Blogger 

Live Demo

Lot of Blogs are using image gallery to show there user image on post easily because it is not possible to add image slider every where in blog.Image gallery are easy to use and fast loading so it don't effect blog post that's why we consider image gallery a best way to show off image to users.This image gallery is made by dynamicdrive.I just converted this widget to blog by which we can easily use this widget.I hosted all codes externally by which you don't need to copy and paste lot of codes.

Add Simple Image Gallery To Blogger

• Go To Blogger Dashboard
• Click On Layout Tab
• Now Add Gadget>>HTML/Javascript
• Paste Below Code In It

<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="https://www.opendrive.com/files/MV8zODk1MjUzX2ZQQUNu/imagegallery-lordhtml.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: [
 
       ["YOUR IMAGE LINK 1 HERE", "#", "_new", "YOUR IMAGE DESCRIPTION HERE"],
       ["YOUR IMAGE LINK 2 HERE", "#", "_new", "YOUR IMAGE DESCRIPTION HERE"],
       ["YOUR IMAGE LINK 3 HERE","#", "_new", "YOUR IMAGE DESCRIPTION HERE"],
       ["YOUR IMAGE LINK 4 HERE", "#", "_new", "YOUR IMAGE DESCRIPTION HERE"],
       ["YOUR IMAGE LINK 5 HERE", "#", "_new", "YOUR 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>

You can also add this slider in between post you just need to paste  above code.

 Customization

Replace Your Image Link Here with Image URL which you want to add to this widget.

To Add Description to your image Replace YOUR IMAGE DESCRIPTION HERE with your words.

To adjust widget width and height replace 400, 265 ( 400 is for width and 265 is for height )

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