Wednesday, 9 May 2012

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.


58 Comments : Read Them Below Or Add One

  1. Replies
    1. Whats the problem bro ? I have just checked it and it is working fine.Also try to add after removing jQuery script from above code because presence two jQuery libraries may affect on this gadget.

      Delete
  2. I have 1 problem.... this slide is also display in my post but i want this slide only at my home screen....is their any solution....??

    ReplyDelete
  3. To show above gallery in post pages use the trick below


    <b:if cond='data:blog.pageType == "item"'>

    ABOVE GALLERY CODE HERE

    </b:if>

    ReplyDelete
  4. no sir i don't want to show slider in post....when i open aa full post....this slider i also show above by post page

    http://safetricks.blogspot.in/2012/05/simple-steps-merging-duplicate-facebook.html

    Like This Slider is On Above My post But I want this slider only on my home page.... plzz help

    ReplyDelete
    Replies
    1. oh sorry I have added the conditional tag mistakenly,follow below steps,

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      ABOVE GALLERY CODE HERE

      </b:if>

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. thanku so must bro......:)) its working.

    and 1 another help plzz........by this slider my drop down menu is no working properly...

    ReplyDelete
    Replies
    1. that's the permanent prob. bro. because menu is made from CSS3 and Gallery from jQuery so that CSS3 can override jQuery :) .Add it in your sidebar :)

      Delete
  7. how can i fix it any solution....?

    ReplyDelete
  8. http://safetrick.blogspot.com/

    Bro Silder Post mai show ho raha code add kiya....par theek nai ho raha......

    ReplyDelete
  9. kar laya theek bro.....coding problem thee......anyways thanks....:)

    ReplyDelete
  10. It's not working. I did everything as the tutorial =( Where is this picture http://www.dynamicdrive.com/dynamicindex4/ajaxload.gif, and my images are not loaded. What can be?

    ReplyDelete
    Replies
    1. This is the image URL which I have used for the image which you have mentioned above (this is present in script)

      http://3.bp.blogspot.com/-DIrxPvz90js/T6ptbQtX1bI/AAAAAAAABqA/HRt9n6bAjGg/s1600/helperblogger-ajaxload.gif

      Also I have updated the script URL (old one was also working)

      old script - http://helperblogger.x10.mx/scripts/imagegallery.js

      new script - http://code.helperblogger.com/image-gallery.js

      then what is the problem? Can you provide me your image URL'S via contact form so that I can send you the code.

      Delete
    2. Thank you! I tested on another template and it worked. So I guess it is no longer needed.

      Delete
  11. hi, awesome works, so simple for beginner like me :)

    one question, how can I add more image? can I custom the total number of image? because I want to submit lot of image :D

    Thanx a lot bro

    ReplyDelete
    Replies
    1. It's so simple bro,just follow below simple steps,

      In above steps(in tutorial) I have highlighted some codes like,

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

      now if you want to add one more image then simply add above code just below of them(codes like above code in tutorial) and replace IMAGE LINK with image URL and IMAGE DESCRIPTION HERE with your image description.

      Now repeat the thing :)

      I hope you have understood well :)

      Delete
    2. wow awesome, it's works, thanx a lot bro, your slide show is the best I've found :)

      Delete
  12. Hey bro i have the same questions for this tutorial as well, hope you could help us with both types of code. a) How can we include all the images from our blog, picasa album or blog posts in this gallery along with their title, captions, tags, etc. rather than having to add images, links, title one by one? b) Is there a way whereby, this gallery can automatically update new images as soon as a new post with images are posted and at the same time displaying title of the post, image caption, tags, labels, etc? c) Can we add this code in our template instead of adding it in a html/java script gadget, if so where should one place this code to add straight away in our template?

    ReplyDelete
  13. Answers -

    a)In above code replace IMAGE LINK 1 HERE with your image URL,replace # with with your link and replace IMAGE DESCRIPTION HERE with your image description/caption.

    b)Sorry nut we can not automatically update it.Also it is not a very hard thing to update it manually.You can do it in some minutes :)

    c)All above code can be implement in template,

    add the code between <style> to </style> tag before ]]></b:skin> tag in your template

    add below lines just before </head> tag in your template

    <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://code.helperblogger.com/image-gallery.js">
    </script>

    remaining code can be add in your sidebar or anywhere as you wish,such as you can add after this line,

    <div id='sidebar-wrapper'>

    but I recommend you to add remaining code as a html/javascript widget.

    Also take a backup of your template before making any changes.

    Good Luck :)

    ReplyDelete
  14. hello bro.. i want to ask u..
    how can i put Simple image gallery in post page?
    i have tried copy paste that code, but it cannot appear in my post. problem: "Error: DIV with ID "simplegallery2" not found on page"
    i hope u can help me :)

    ReplyDelete
    Replies
    1. I think you are not posting the full code,look at above code there is a code present,

      <div id="simplegallery2"></div>

      above code must be present with the gallery script.Try to add above code just below of the code which you have already added.

      Hope it works :)

      Delete
  15. i've tried to add code (gallery) in my post. but i cant :(
    "Error: DIV with ID "simplegallery2" not found on page"
    help me please :)
    thanks

    ReplyDelete
  16. Hi,
    Where can I get my image links from? Do I have to upload them to photobucket, etc. to get a URL code?

    ReplyDelete
    Replies
    1. Follow this post :) You will get all of your ans. with full details :)


      http://www.helperblogger.com/2012/07/how-to-host-images-on-blogger-itself.html

      Delete
    2. Thank you! It works!!!! I am so happy my blog looks beautiful!
      Thank you Rahul Ippar, for your help and taking the time to answer my questions.

      Very happy! This is awesome!

      Delete
  17. Hey Rahul, I have used this code for a post using


    ABOVE GALLERY CODE HERE


    But it's not working: http://kapilarambam.blogspot.in/2012/07/campaign-banners-for-inner-line-permit.html

    Please help.

    ReplyDelete
  18. do you know how to make image gallery in blogger blog post??
    Like if i add 10 photos in post, it display as a gallery, and when each image changes the page also refresh and ads also changes.
    Kar ke dikha do.
    You can get idea from this : http://www.officialhollywilloughby.com/photos/glamour-galore/53
    Muje lagta hai tum kar paoge isliye idea diya. or kar pao to muje jarur bolna.

    ReplyDelete
  19. my another idea for your upcoming post. Tell everyone how to change layout of google custom search engine. give good design like design of bing search engine.

    ReplyDelete
  20. Another idea for your post. how to display 10 linkwithin related post thumbnail. Linkwithin by default show only 5 thumbnail.

    ReplyDelete
  21. Hi, how do I fix the arrows at the bottom? They are not appearing properly.

    ReplyDelete
    Replies
    1. Here is the link so you can see what I mean: http://eyeseye.blogspot.com/p/gallery.html

      Delete
  22. I've been looking such a long time for this, thank you! :) works perfectly~
    Here's the page I used it on: http://www.daniellewu.com/p/art.html
    x


    D a n i e l l e | daniellewu.com
    ps. I am hosting a giveaway on my blog and I would love it if you won! :) Enter to win artwork by Mui-ko!

    ReplyDelete
  23. Image How much can you use?

    ReplyDelete
  24. Hi! This slider is fantastic - it's the first one I've found that ACTUALLY works!

    I'm wondering if there's any way to hide the controls (the play/pause buttons) that pop up when you hover over the images? I would prefer not to see them.

    Any help is appreciated. Thank you!

    ReplyDelete
  25. Also, I've found that the slider stops on one image after a few rotations and won't cycle through the images any more. Any suggestions for how to fix this? Thanks!

    ReplyDelete
  26. Really digging this gallery, it's very useful... thanks! I've run into one small problem though, when I add in a 6th image the whole gallery just stops displaying. I've double and triple checked the code, but for some reason no matter what the 6th image is it just stops working. I'm pretty stumped.

    I hope to hear from you soon, it'd be a pity if I couldn't get this working.

    ReplyDelete
    Replies
    1. Nevermind! Should have quadruple-checked... I was missing a comma at the end of each image code. Thanks anyway!

      Delete
  27. Is there a way to centre to images within the slideshow player??

    ReplyDelete
  28. How can I add more pictures in the gallery? I tried copy paste the code and added image link but when I added more pics it does not work.

    ReplyDelete
  29. can i not add picture from my computer??

    ReplyDelete
  30. Hi.
    Is there any way when you click one the picture,open in a nice way lightbox?

    ReplyDelete
  31. Thank you! It works!!!! I am so happy my blog looks beautiful!
    William S. Hart High School Senior Portraits

    ReplyDelete
  32. Hi, the widget does not display any images - just a broken image icon. I'm using the url for the images from my google+ album - is this ok?

    ReplyDelete
    Replies
    1. I have resolved this slightly by using one of your other image sliders...but...
      Do you have a similar widget that does not have the 'whats hot' tab on the corner?
      thanks

      http://urban-lofts.blogspot.co.uk/

      Delete
  33. Any idea how to center the slide show on the blog? My slideshow is slightly off-center.

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. http://ehowitsdone.blogspot.com/

    ReplyDelete

  37. Thanks for every other informative web site. The place else may I get that kind of info written in such a perfect approach? I’ve a mission that I’m simply now working on, and I have been at the glance out for such info.
    קבלן איטום

    ReplyDelete

  38. Thanks for every other informative web site. The place else may I get that kind of info written in such a perfect approach? I’ve a mission that I’m simply now working on, and I have been at the glance out for such info.
    קבלן איטום

    ReplyDelete
  39. this code not working bro.
    please send me a correct code.
    simage571@gmail.com
    thanks

    ReplyDelete
  40. This is an awesome widget, tried searching but couldn't find anything which is so simple and effective. I have a query:
    How can I enable auto display of "Image Description" and the Navigation set of "Prev", "Next" and "Play" without the user moving the cursor to the gallery area as it is presently configured. What I mean is that the "Description" and Navigation set should appear once the page is loaded. Thanking you.

    ReplyDelete

If you want to be informed about any replies then click on "Subscribe by email" (present below of comment box).PLEASE DO NOT SPAM