Create Image Gallery For Blogger With Control Options

blogger image galleryI never thought we could have a light, fast loading, cute and yet extremely controllable Image Gallery or slideshow with play and pause options. Using Jquery, JavaScript and my beloved CSS and HTML and thanks to dynamic drive we were able to create a blogger compatible widget that will display your featured posts, photos, pictures etc. in a beautiful way. Again I tried my level best to make it a one step installation. So you just need to copy and paste the code inside a blogger widget to let things work. Kindly view the demo on this blog towards the bottom right sidebar.



Installing Image Gallery in Blogger

  1. Log in to your Blogger account
  2. Go To Design > Page Elements
  3. Select HTML/JavaScript widget
  4. Paste the following code inside it,

<script type="text/javascript" src=""></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 1px solid #666;

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font: 10px normal verdana, arial;


<script type="text/javascript" >

var simpleGallery_navpanel={
    loadinggif: '', //full path or URL to loading gif image
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
    images: [ '', '', '', ''], //nav panel images (in that order)
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
    slideduration: 500 //duration of slide up animation to reveal panel

function simpleGallery(settingarg){
    var setting=this.setting
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play
    setting.currentstep=0 //keep track of # of slides slideshow has gone through
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
    setting.oninit=setting.oninit || function(){}
    setting.onslide=setting.onslide || function(){}
    var preloadimages=[], longestdesc=null, loadedimages=0
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif
        var loadgif=new Image()
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images
        preloadimages[i]=new Image()
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
        jQuery(preloadimages[i]).bind('load error', function(){
            if (loadedimages==setting.imagearray.length){
                dfd.resolve() //indicate all images have been loaded
    var slideshow=this
        var setting=slideshow.setting
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
            .css({position:'absolute', left:0, top:0})
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
            .bind('mouseover mouseout', function(e){
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
            .bind('click', function(e){
                slideshow.navigate(keyword) //assign behavior to nav images
        dfd.done(function(){ //execute when all images have loaded
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
            slideshow.showslide(setting.curimage) //show initial slide
   //trigger oninit() event
            $(window).bind('unload', function(){ //clean up and persist
                if (slideshow.setting.persist) //remember last shown image's index
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
                jQuery.each(slideshow.setting, function(k){
                    if (slideshow.setting[k] instanceof Array){
                        for (var i=0; i<slideshow.setting[k].length; i++){
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
        }) //end deferred code
    }) //end jQuery domload


        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number
        if (!isNaN(parseInt(keyword))){
        else if (/(prev)|(next)/i.test(keyword)){
        else{ //if play|pause button
            var slideshow=this
            var $playbutton=$(this.setting.navbuttons).eq(1)
            if (!this.setting.ispaused){ //if pause Gallery
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})
            else if (this.setting.ispaused){ //if play Gallery
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})

        var slideshow=this
        var setting=slideshow.setting
        var totalimages=setting.imagearray.length
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
            : Math.min(keyword, totalimages-1)
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)
          , setting.gallerylayers[setting.fglayer], setting.curimage)
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
                if (setting.autoplay[0]){
                    if (setting.currentstep<=setting.totalsteps)
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])
            }) //end callback function
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background
        setting.bglayer=(setting.bglayer==0)? 1 : 0
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)


        var setting=this.setting
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)

        var setting=this.setting
        var endpoint=(state=="show")? 0 : -setting.descpanelheight
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)


        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'
        layerHTML+=(imgelement[1])? '</a>' : ''
        return layerHTML //return HTML for this layer

        var interfaceHTML=''
        for (var i=0; i<3; i++){
            var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0)
            var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i]
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'
        setting.$navpanel=$('<div class="navpanellayer"></div>')
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'})
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects

        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object

        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return null

    setCookie:function(name, value){
        document.cookie = name+"=" + value + ";path=/"


<script type="text/javascript">

var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
        ["IMAGE LINK 1", "#", "_new", "DESCRIPTION"],

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

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

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

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

    autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //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)


<div id="simplegallery1"></div>


Now carefully make these changes:

  1. Resize all your images to a fixed size. To change the image size edit 300, 200 where 300 is the width and 200 is the height. If your images are of bigger size then they will be clipped rather resized. So its better that you manually first resize your images in Photoshop and then proceed.
  2. Upload your images in blogger and then replace  IMAGE LINK 1, IMAGE LINK 2 ,...., so on with your Image links in that order.
  3. Replace # with the Page Link. The visitors will click the image to land on a page so mention the URL of that page. If you don't want to link the image then simply delete  #
  4. Replace DESCRIPTION with some information about the image. This image decription will appear at the top when a user hovers cursor on it. If you don't want to write any description then simply delete  DESCRIPTION
  5. If you don't want the images to play automatically then turn off auto play. Turn true to false.
  6. To change the time interval between next and previous slide then edit 2000
  7. That's it! You are all done! :)

You can do a lot more but I am not sharing every thing here for simplicity. Yes you can change its entire look, colors, fonts and all. If you need any further customization then just post your query and I will reply the earliest possible.

Need help?

If you needed any further help let me know. I have tried to keep the installation as easy as possible and I have made sure that the slideshow loads fast and works on all major browsers. Do let me know how you liked this new widget. :)

You may also like these,

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Amazing! It just like a "home-made simple slideshare" to me, hehe
    It works 99% on my test blog, both on widget or on post. The 1% problem on me is can't set off the autoplay even if i put the code as "false". Might be caused by invalid doctype on my template?

    Well, i dont know bcos my test blog is f0101 free premium blogger template from bloggermint dot com and i didnt make any changes on their doctype.

    Most of all, this is great to me!

  2. Ah, a secont thought here.. the autoplay can be turned off and it works properly, but what i meant is when we click on the "next" arrow, the slide going autoplay itself eventhough we dont want to go to the next slide yet. Is it normal or an anomaly, Bro?


    Oh thanks for the kind thoughts. :)
    Well it is working fine with the false attribute and when you click the next or previous buttons only one slide is shown and the autoplay still remains off. If on clicking the next button your autoplay starts then may be you did not inerted the code correctly. This is how it should look like,

    autoplay: [false, 2000, 20]

    You can test drive your code in MBT HTML editor also.

  4. Hello Mohammad,
    i need your help,i want to add 468x60 image header to my blog but not able to add it, finding so difficult please can you help me

  5. derkha 1 zal bia
    wonder ful!!

  6. I am here because I have faced the problem in heading, mean when I login to my feed-burner and I shocked to know that almost all of my feed subscribers are gone though but I haven't deleted them.
    My subscribers before today was 450+ but now my fee-burner account shows only 21subscribers.....

    Please help Me... :-(

    this is my feed-burner address.

  7. @Jeet
    Are you facing difficulty in splitting the header? If yes then I will surely write a post.

    Which language was that? :p

    Feed counts usually fluctuate between 50-100 numbers. since your feed count dropped significantly then I guess you must wait for a day and see if the count get backs to the orginal number.
    If it did not then I am sure your Feed account has been used by someone else. Choose your passwords strong and long so that no one could guess it. I just hope your number returns.

  8. The Code is too long but its worth it. Thanks :D

  9. @ Muhammad Mustafa bro , its pushto means very Nice once again, in urdu , bhoot ala aik bar pir !

  10. Yes not able to do that.please post a article on that.

  11. Oh Cool ! This Widget Rocks ! Please post more Gallery Widgets with Different Background Colors . Thanks for this Widget

  12. Good Widget . But cant insert in Posts . Please give me the Code which also can be inserted in Posts

  13. @Mohammad Mustafa Ahmedzai

    Ah, Thanks for Your suggestion,Bro.. I'll do it.. ^^

  14. @Mohammad Its works fine but one quest Is it Mandatory to have all the images in the same size....??? i have images of diff sizes But i wanted it to be displayed in same size...:) Help me Bro???

  15. @Faiz
    I got it. manana urora :)

    As you command master. Request noted :)

    @Anirudh ~
    To add it inside a post then simply add the last part of the code inside your post editor which is,

    <div id="simplegallery1"></div>

    and paste the remaing code inside your template just above </head>

    You are always welcomed :>

    Anytime buddy. :)

    Yes it is important that all your image sizes should be same else they will get clipped. I tried to auto adjust it but the script is a bit too soft and breaks when I edit it. Better resize your pictures in any image editing software like photoshop.

  16. Dear Mohammad,

    Thank you for the great contribution and I got a bit problem with the size of the image at the slideshow.
    I have changed it from s400 to s1600 but the result still remain the same (small size)

    Maybe you can just drop by to our htp:// and advise the slideshow as I want to put it below the navbar..

    All the best and thanks

  17. @Ki Ageng

    Always welcomed brother. Kindly adjust the image sizes from dimensions: [300, 200]
    I have mentioned about how to change image default size in the first step#1 of customization process. Unless you change this size you wont get large display

  18. Brother pls help..

    How to add post inside

  19. Brother pls help

    How can add the slideshow Blogger post? i had to try got error

  20. Hey Nice page but I want to create a page a slideshow type for my site.
    Please help on that..

  21. by adding this script, my slideshow script (other than yours) is not working :(

    Have a look please:

    is size of the image causing problem? It is going out of my blogs main body..

    i really need this awesome widget bro


  22. Could the arrows and text be showed permanently? what i should change for that? thanks a lot Mohammad!

  23. Hey is it possible to make the slides appear randomly instead of the order i put them in?

  24. wow.. i havent get a long script as your gadget image gallery. cant imagine. i will try it.

  25. Hy,
    Superb, Thank you very much for this......I have installed it on my blog and it worked fine....
    You can

  26. Is there any possible way to make it so it automatically resizes the photos to fit? I'd really prefer not to have to resize and reupload all my images for this.

  27. Hello , I try to copy and past your Javascript in my blogger siteundefined edit HTML ) as you said just above </head> to add gallery just to one post of blog. But there are same error massage like the same words are not finished by > or /> or same words are note between "" .After each modification the message is chang. pleas help me !

  28. Im hust gonna say thanks....can you check if you can do a Featured Conten Slider like the one in my blog.

  29. hi !

    thanks a lot for the tuto and very useful tool, just a question, how can i make it look bigger and place it in the center of my page??

    (im using it just in one page)

    thanks a lot !!

  30. sorry again, but another question, I´ve made all the pics without link in them (i erased all the "#"), but now if you click on one of the pics it opens a new window which is the main page ending in "_new", how can unable the clicking in option??? or maybe make a full screen presentation ??


  31. Hi, nice tutorial. but i want to how to change the size of slider?? i want to increase the slider size more bigger. plz help.

    Thanks a lot,

  32. thanx but how to give url of uploaded image

  33. my slideshow interferes with Lightbox images view.. any suggestions?

  34. Love the slider. Looks nice on my site. I would like to alter the slider to always show the text, instead of needing to hover over it to make it appear. How would I do this?

  35. We were unable to save your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The markup in the document following the root element must be well-formed.


  36. Can I use this slideshow only in homepage? If yes, how can i do that?
    I use

    Slide Show code Goes Here

    but it is not working. Please explain it elaborately.

  37. Absolutely love this widget! I do have a question though. How do I make it so that it doesn't display on static pages and on the post pages. I really only want it on the home page.

  38. andhramirchi thanks its working & very nice

  39. hello bro, dis is gaurav
    i want 2 connect u on facebook because i want 2 learn something about blogging like post different categories, install attractive template, how 2 increase traffic, and many things more. plz connect me facebook, my id is or plz reply wid ur id

  40. thank youu... but this widget make my other not working... please help me..ya :D thankyouu

  41. I've created a static webpage on the blogger platform, and I added the slider. I love the way it works but I'd like it to be bigger and take up more of the whole post space. Where can I alter the size so that the pictures are larger and are more of a focal point.

  42. Oh, and please contact me at Thanks

  43. Is there a some new compatibility issue? It was working fine for months until today when it just died? Nothing appears in the widget slot when you go to the blog.

  44. This is help me a lot & i also add this slider to my blog.

  45. its good but can you tell me how do i make the whole theme posts like gallery ... plzzzzz

  46. Hii!!

    I am using a Blogger site for Funny Images, I am going to use Image slider where static images are hardcoded, but I want dynamic images of my posts directly, so that my image slider gets images from Blogger post images. Can u suggest a Help Here?
    My Blog:

  47. Cant get it to center on the page though. Tried EVERYTHING, doesn't work. USeless without being able to center on page!

  48. Great widget!!! Very easy to use.

    How can I do in order to hide the "next/previous/play/pause" bar that appears if you go with the cursor.


  49. its a very useful widget and worked 100% . but i got some problem after i added this java script to my blog. i had already a slide show in my blog.. please check this >> when i added your widget in my blog the previous slide show just stop working . but then your widget will work very smoothly. after that i just removed your widget then the previous slide show works smoothly.

    i want both slide show to work, please help me to do that .

    Again many thanks for your great widget .

  50. how can i upload my photos form my computeer?? im new on blogging so can you explain it?? and what kind of link is this??

  51. it work!
    thanks very much

    #from Indonesia

  52. hi my brother Mohammad Mustafa thak you for the slide it works well
    but i need a little help I want the description to display with photos without puting the mouse over

  53. HI my friend Mustapha i have just established a blog but it is always ranked no traffic in alexa what should i do to make it appear in alexa
    here is my blog

  54. Hi sir, i want to add 2 additional images, so it will become 7 instead of 5 what should i do? I copied the 2 additional codes but its not working

  55. Hi, I've try this in my post. But it doesn't work. Is that its only function as widget?

  56. Perfect! Thank you!

    I sell ad space on my blog site and wanted to have a slideshow rotating advertiser's banner ads. I followed the instructions and the widget works perfectly!

    If you want to see it in action, click over to my site. The slideshow is the second banner image. Presently the speed is set to 7 seconds.

    Thanks again!

  57. How can I center the slideshow on my page? I'm using it in my sidebar

  58. How can i add more than 5 pictures please !?

  59. Assalamualaikum. Can I use this to show multiple image galleries with each gallery showing different set of pictures within a single blog post? Thank you.

  60. thanks...I tried many and this was the only one that worked for me