Blog Tutorial: Make A Slideshow Header



Hero!

I know I said I've no idea how to make a slideshow header, and I still don't, but I've decided to post the code for my own slideshow header (not created by me) up here. It's from TheBlogDecorator (go check them out if you want a professional to design your blog for a small fee!) They designed my slideshow header for me. I've also tried this on a separate blog to see if it works with any blog and it appears to be fine.

Let's talk about the code first. So here's the code (it's very long! Be sure to copy all the highlighted code):



<br/><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: 0px solid #ffffff; 
border-radius: 0px;
}
#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:'0px', 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: 200 //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:'white', 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: [1170, 470], //width/height of gallery in pixels. Should reflect dimensions of the images exactly 
    imagearray: [ 
                 ["INSERT PICTURE LINK HERE", "INSERT LINK HERE", ""],

["INSERT PICTURE LINK HERE", "INSERT LINK HERE", ""],

["INSERT PICTURE LINK HERE", "INSERT LINK HERE", ""],

       
    ], 
    autoplay: [true, 3000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] 
    persist: false, //remember last viewed slide and recall within same session? 
    fadeduration: 1500, //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>

Here's what you need to change:

PURPLE : If you want more pictures, simply copy and paste a purple line. If you want five pictures, there should be five purple lines with the exact structure.

Insert the link to your picture (uploaded on Photobucket or somewhere else) and the link that will be directed to when people click on the picture. For me, my "link" will be my blog homepage. So when people click on my slideshow pictures, they will be directed there.

RED: The dimension of your pictures. All of your pictures should have the same width and height. The first number stands for the width, the second for the height. Change it accordingly. For best results, it should be the dimensions of your previous header.

GREEN: Change this number (to 1000, 1500, 2000, or whatever you want) to speed up or slow down the fading effect between each picture.



Okay now here's how to put the code in:

1. You'll want to first remove the header gadget (click HERE to learn how).


2. Then paste this code in a HTML gadget and put it at the very top of your layout (where your header should go!)





Save and view your blog! It should be there now! You can use this nifty tool to align it if it's out of place... click HERE.

If it's there and perfectly moving now, yay! You can stop here now :D

P.S:
IF THE PHOTOS DID NOT SHOW UP....IF IT IS A BLANK...
TRY UPLOAD THE PICTURES TO A PAGE. HERE'S HOW:

1. Click on Pages and make a new page:

 2. Upload your pictures onto the page.



 3. Make sure that your pictures are in their ORIGINAL SIZE. (which is the dimensions that you've already cropped for header use)


4. Save your page and view it!


5. Scroll to your picture, right-click on it, and open the image in a new tab.


6. In the new tab, copy the link given at the top (the link address of the tab). This will be your PICTURE LINK. Paste it into the slideshow code.


7. Do the same for every picture, save your slideshow code again and view! Pictures should be visible now!

Btw, the pictures above are for demonstration purposes only, they are not cropped to header size lol.

Did this work for you? Email me if there are any questions, or comment below if you would like to offer thanks! Hope it helps! :D

No comments

Back to Top