Create Image Gallery For Blogger With Control Options

13 Mei

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&gt;

<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: [ ‘;, ‘;, ‘;, ‘’%5D, //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></div><div></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 title=”‘ + title + ‘” src=”‘+ imagesrc +'” style=”‘+imgstyle+'” /> ‘ 
        interfaceHTML+='<div style=”margin-top:1px”>’ + (setting.curimage+1) + ‘/’ + setting.imagearray.length + ‘</div>’ 
            .css({position:’absolute’, width:’100%’, height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:’1001′}) 
        $(‘<div></div><div></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 

            .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: [true2000, 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 trueto 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.



Tinggalkan komentar

Ditulis oleh pada 13 Mei 2013 in Uncategorized



Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:


You are commenting using your account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )


Connecting to %s

%d blogger menyukai ini: