August 25, 2011

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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></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;
}

</style>

<script type="text/javascript" >

var simpleGallery_navpanel={
    loadinggif: 'http://2.bp.blogspot.com/-ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/s400/ajaxload.gif', //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: [ 'http://2.bp.blogspot.com/-LzMDVlVfxmQ/TlVybqSABOI/AAAAAAAAEx8/riOJdIu1eRc/s400/left.gif', 'http://1.bp.blogspot.com/-ZkATWoPt8Q8/TlVybVMA4xI/AAAAAAAAExs/zoAjOL7erWY/s400/play.gif', 'http://4.bp.blogspot.com/-IlIucHdUM-I/TlVybkMej0I/AAAAAAAAEx0/yQvxG-paQVc/s400/right.gif', 'http://1.bp.blogspot.com/-qdHg1fyty6A/TlVybOlRciI/AAAAAAAAExk/oio-_kn2KO8/s400/pause.gif'], //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){
    this.setting=settingarg
    settingarg=null
    var setting=this.setting
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
    setting.fadeduration=parseInt(setting.fadeduration)
    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()
        loadgif.src=simpleGallery_navpanel.loadinggif
        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()
        preloadimages[i].src=setting.imagearray[i][0]
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
            setting.longestdesc=setting.imagearray[i][3]
        jQuery(preloadimages[i]).bind('load error', function(){
            loadedimages++
            if (loadedimages==setting.imagearray.length){
                dfd.resolve() //indicate all images have been loaded
            }
        })
    }
    var slideshow=this
    jQuery(document).ready(function($){
        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.")
            return
        }
        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})
            .appendTo(setting.$wrapperdiv)
        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)
            setting.descdiv=simpleGallery.routines.adddescpanel(setting)
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8})
            .bind('mouseover mouseout', function(e){
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
            })
            .bind('click', function(e){
                var keyword=e.target.title.toLowerCase()
                slideshow.navigate(keyword) //assign behavior to nav images
            })
        dfd.done(function(){ //execute when all images have loaded
            setting.$loadinggif.remove()
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
            slideshow.showslide(setting.curimage) //show initial slide
            setting.oninit.call(slideshow) //trigger oninit() event
            $(window).bind('unload', function(){ //clean up and persist
                $(slideshow.setting.navbuttons).unbind()
                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
                                slideshow.setting[k][i].innerHTML=null
                            slideshow.setting[k][i]=null
                        }
                    }
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
                        slideshow.setting[k].innerHTML=null
                    slideshow.setting[k]=null
                })
                slideshow=slideshow.setting=null
            })
        }) //end deferred code
    }) //end jQuery domload
}

simpleGallery.prototype={

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

    showslide:function(keyword){
        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[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])
        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:
                clearTimeout(setting.playtimer)
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)
                try{
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)
                }catch(e){
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
                }
                setting.currentstep+=1
                if (setting.autoplay[0]){
                    if (setting.currentstep<=setting.totalsteps)
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])
                    else
                        slideshow.navigate("play/pause")
                }
            }) //end callback function
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background
        setting.fglayer=setting.bglayer
        setting.bglayer=(setting.bglayer==0)? 1 : 0
        setting.curimage=imgindex
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description
            setting.$descpanel.css({visibility:'visible'})
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3]
        }
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
            setting.descdiv.innerHTML=null
            setting.$descpanel.css({visibility:'hidden'})

        }
    },

    showhidenavpanel:function(state){
        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)
            this.showhidedescpanel(state)
    },

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

simpleGallery.routines={

    getSlideHTML:function(imgelement){
        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
    },

    addnavpanel:function(setting){
        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'})
            .appendTo(setting.$wrapperdiv)
        $('<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
            .appendTo(setting.$navpanel)
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects
    },

    adddescpanel:function(setting){
        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
            .eq(2).html(setting.longestdesc).end().end()
            .appendTo(setting.$wrapperdiv)
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')
        setting.descpanelheight=$gallerydesctext.outerHeight()
        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
    },

    getCookie:function(Name){
        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>

<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)
    }
})

</script>

<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 »

71 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
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!

    ReplyDelete
  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?

    ReplyDelete
  3. @MUXLIMO

    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.

    ReplyDelete
  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

    ReplyDelete
  5. 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.
    http://feeds.feedburner.com/AccountancyStudents

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


    @Faiz
    Which language was that? :p

    @Admin
    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.

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

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

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

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

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

    ReplyDelete
  12. @Mohammad Mustafa Ahmedzai

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

    ReplyDelete
  13. @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???

    ReplyDelete
  14. @Faiz
    I got it. manana urora :)

    @Jeet
    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 :>

    @MUXLIMO
    Anytime buddy. :)

    @Daniel
    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.

    ReplyDelete
  15. 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://www.gegarane.blogspot.com and advise the slideshow as I want to put it below the navbar..

    All the best and thanks

    ReplyDelete
  16. @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

    ReplyDelete
  17. Brother pls help..

    How to add post inside

    ReplyDelete
  18. Brother pls help

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

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

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

    Have a look please:
    http://img638.imageshack.us/img638/1254/stacking.jpg

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

    i really need this awesome widget bro

    Thanks

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

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

    ReplyDelete
  23. thanks that was great..
    Have a look wwww.cool-tricks.co.cc

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

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

    ReplyDelete
  26. thanks admin for this tutoriel...
    is there any way to make this slider like one on evo blogger template,

    it means attatch to like this script
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+fLabel+&quot;?max-results=&quot;+slideQty+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showSliderImage\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    </ul>
    </div>
    <script type='text/javascript'>
    $(&quot;div#featuredslideshow&quot;).slideViewerPro({
    thumbs: 4,
    thumbsPercentReduction: 12,
    galBorderWidth: 0,
    galBorderColor: &quot;#666&quot;,
    thumbsTopMargin: 12,
    thumbsBottomMargin: 20,
    thumbsRightMargin: 10,
    thumbsBorderWidth: 3,
    thumbsActiveBorderColor: &quot;#111&quot;,
    thumbsActiveBorderOpacity: 0.8,
    thumbsBorderOpacity: 0,
    buttonsTextColor: &quot;#707070&quot;,
    autoslide: true,
    typo: true,
    leftButtonInner: &quot;&quot;,
    rightButtonInner: &quot;&quot;
    });
    </script>

    ReplyDelete
  27. 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.

    ReplyDelete
  28. 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 !

    ReplyDelete
  29. Im hust gonna say thanks....can you check if you can do a Featured Conten Slider like the one in my blog. www.quepasagaypr.com

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

    ReplyDelete
  31. 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 !!

    ReplyDelete
  32. 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 ??

    thanksss

    ReplyDelete
  33. 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,
    http://anikethz.blogspot.in/

    ReplyDelete
  34. thanx but how to give url of uploaded image

    ReplyDelete
  35. my slideshow interferes with Lightbox images view.. any suggestions?

    ReplyDelete
  36. How can I add more images to the code above? Please HELP!!!

    BTW Thanks for the code!!!

    This is my blog - http://howtomakearmour.blogspot.com/p/knight-armour-gallery.html

    ReplyDelete
  37. 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?

    ReplyDelete
  38. I want to place this on my stand alone page. but it is not working there. please help.

    @Programming Tips

    ReplyDelete
  39. 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.

    HELP!!!

    ReplyDelete
  40. 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.

    ReplyDelete
  41. using flash also can create image gallary, first need to select the photos, to create the gallary. good information which you provided, i love this, fl detox

    ReplyDelete
  42. 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.

    ReplyDelete
  43. andhramirchi thanks its working & very nice

    ReplyDelete
  44. So thanks for this post about photo gallery for blogger.
    Nizami bansri

    ReplyDelete
  45. A.A
    Dear this is not working on my blog
    www.urdumovies.net
    I put code in gadget by name Trial Version
    please help me , why this is not displaying here
    Allah Hafez

    ReplyDelete
  46. It is not working for me Mohammad. I want my slider posts in my blog to look like at this site "http://oneclickmoviez.com/". Anyways my blog is, http://flutelyrics.blogspot.com/. Your other tutorials are great though. Can you please help me?

    ReplyDelete
  47. I have always seized this gallery widget on MBT I thought you'd be greedy with it. But I was surprised and happy I stumbled upon it. I'll be add to add this to WorldWebSurfers.com

    ReplyDelete
  48. 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 chauhangaurav226@gmail.com or plz reply wid ur id

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

    rizality.blogspot.com thankyouu

    ReplyDelete
  50. 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.
    Thanks

    ReplyDelete
  51. Oh, and please contact me at sally@sallyjdesigns.com Thanks

    ReplyDelete
  52. I want to create a plugin like Nextgen Gallery for my celebrity blog . is this possible? or you know any widget like Nextgen Gallery for blogger?

    ReplyDelete
  53. 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.

    ReplyDelete
  54. shayri ki duniya

    assalamu alaykum

    mohammad bhai & staff & mybloggerticks my online school (college).
    and i daily and lots of learn here my great school

    thank you

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

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

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

    ReplyDelete
  58. 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: http://funnyjokesandqoutes.blogspot.in

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

    ReplyDelete
  60. thanks bro!

    http://36-24-36-indian.blogspot.com/

    ReplyDelete
  61. 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.

    thanks

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

    ReplyDelete
  63. 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 >> http://www.meavoo.com/ 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 .

    ReplyDelete
  64. 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??

    ReplyDelete
  65. it work!
    thanks very much

    #from Indonesia

    ReplyDelete
  66. can you create image gallery like this for blogger : http://img.tollywoodblog.in/gallery.html

    ReplyDelete
  67. 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
    thnx.

    ReplyDelete
  68. 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 http://www.bestscenter.blogspot.com

    ReplyDelete
  69. 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

    ReplyDelete
  70. Following your event management site I get more information for my buisness ,If you want to know further more for enhance your buisness follow us on:-The article event planning software is all about management software which is categorized and planed in such a manner that it can ensure the most effective and possible event planning apps results which are divide in every event management team and software’s. We will ensure the most effective result for can of such purposes. We are quite deliberate and wedding planning software confident about the tool which can help the wedding planning apps event managed and calculate all the expenses.

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!