header ads

How To Add Simple Image Gallery To Blogger

Unknown 1:48 AM
Images Galleries are important for blogs where your want to show any image presentation, Explanation of any service, Products or any Professional Conference by using Images Because to display number of related images in front of visitors and also attract them to see your work or other is a good part of side to give better user experience.
Today i decide to introduce simple and stylish Image gallery easy to use and customize. As recently i posted about JavaScript Image Slider which was also awesome you can also take look and use it instead of this must take look at JavaScript Image Slider For Blogger. Otherwise this new image slider which is also best This image gallery is made by Dynamicdrive and i taken from their and customize it for using it for blogger. If you want then follow below steps.
Image gallery

Steps To Add Image Gallery

  • Go To Blogger Dashboard >> Then Layout
  • Click on Add a Gadget Button
  • Now Paste the Below code in Gadget box


<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://googledrive.com/host/0B_1mqJd2tC8qSXNrNUl2YnhUZnc">
</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: [

     ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi55YpQ3cWA4IRf-ON2j1PA0tjOYY0d5qgKwWXUUUVJmisjX1cmgE5YhA1PXwKWWx8Xa9PwRxzdyqjlAI0JupIqj5sNkS9P8NZfqXzN-pRuwr-Plwq8D432-w3wa9Glo-KaJSxz4eJL5M/s400/slider2.jpg", "http://www.safetricks.net/ rel='nofollow' ", "_new", "Image Gallery By SafeTricks"],

     ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9faymTzHKCwB6uecls0VDTz5WOyeBnZ1GQsGYANMaZlORuDTYKWPKAgmV3XspvtPxXdqGRRYDi7ZJueka2xg_7g9YsJ4YR8cMiDcvf2UiU8-miLbCywU67PMEwuSk-ye6VXqfatBL9f0/s400/slider3.jpg", "#", "_new", "IMAGE DESCRIPTION"],

     ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyZEXLXmVJy-zgbHmlvD78jbf6c2fh-v_ejTLymNukGSuKG_kyegINf-Qia-M0l4h77rrzrpA7L99FOXlZkuTQr5ENcfL_uARsg3Uq3Mted0JU5PLnNgqdSDFX6PuEhZD5cP7KivQ16pc/s400/slider1.jpg", "#", "_new", "IMAGE DESCRIPTION"],

     ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtwYwTYC4YUe4EomdokP0f3kRorhGyPAKB4Rjycnwy2ajkd9oukSuDvXwnaRUvDCBnZJO1WhhD5zms9zdJtnZ0wzCgf1P1a3PtxCZMskD9gUsCtanfjkFOUyt1DVGr6QOJbMd-mSdMoSA/s400/slider.jpg", "#", "_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="simplegallery2"></div>


After Pasting above code follow below customization steps

  •  Make Some Changes on the bases of specific colors codes
  •  Change Height and width  400, 265 as You want where 400 is width and 265 is height.
  • Replace the Link of Images  mention in this color code                   with your images links.
  • Replace # with the destination of images where you want to drive visitors when the click on Image. If you don't want to add any link simple leave it as it with #.
  • Replace Image Caption or Description In gallery for Particular image at Image Description.
  • Then You have to Resize all Images in the same dimension of gallery.
  •  You can also do other changes if are able to do as you want. 

I hope you like this Simple Image Gallery. If you want to know more about any changes or Face any problem Feel free to leave your precious comment.
Tags:

Post a Comment

0 Comments