Tạo Gallery (slider) trình chiếu ảnh cho blogger

Blog của bạn sẽ chuyên nghiệp hơn nếu có một wiget trình chiếu ảnh để giới thiệu với bạn bè. Slider hôm nay namkna giới thiệu sử dụng javarscip với hiệu ứng mượt tù thư viện Jquery, được phát triển bởi dynamic drive. Namkna đã convert để có thể áp dụng vào blog với một số tùy chỉnh mới cho các bạn.

Các bạn có thể xem Demo hoặc hình ảnh minh họa bên cạnh để thấy rõ hơn:

View Demo

=>Thêm vào blogspot

1- Đăng nhập vào blog

2- Chọn Bố cục

3- Tại một tiện ích HTML/Javascipt và dán code dưới vào.

<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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilytH5fgFHGlhzj5qMKe70WKd-ZBFM2FaSEe6PfzgcTSXgGU56QmuXwLVoBYr9vCwHvXS8bMXvmSq3qxuPe-qYF0tPtDA8tz4bxmCCQ_d7hXwZ0v6yC802-VLZ6rS12jy3JysagNky1Ys/s1600/ajaxload-namkna-blogspot-com.png', //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: [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioG_-gbgY3gWPvpbNigpzCMxOJQRKPxISYxVTqX5z5akk0b-dj4Gsu17NkgHXCFiaCjsWtgzlrCeC3n9LZvtUwozxcHln7aDzqPV0Or2KSZ2O38MYQKe4cXOMcf6gC1HSrwxTmc9mXFc/s1600/left-namkna-blogspot-com.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcuzSYrKYOvLvsyNAZDkUwkHH-20yuZCHHNpHUo-R79WS6_5BHsRtFBjF7TnCsfRjHrahh2ruoQpB6nxFz-x8hMXfpyANKWDd9lUarwWLfHHYL4UWAip6Lj5wf-XHHxQ_BCHqvnzFSxqw/s1600/play-namkna-blogspot-com.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjzHNpQxE2UeVvKlMBOuGo1OvVXM4-34PtpsNvjSM1LyrntZOoEyQBw5DsqiKroi-PBhCnOg-_a6fMj7GvxTCJZarqUMsrt4dw5Opexvin-apXott5UWU83iWmBxQkFr555Omph_yc_lk/s1600/right-namkna-blogspot-com.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiB6cW-34OFkJAroe0Mp9qnC3lB4y6ZXa8uVINHvC9hDE4mVxyxhYyDutzFNJDmKdjwY-qLPzPAB1tjV5mUkDS1g0xQ4mlt9otNcg65SOa5KxZrsA1tzFwVSQLtUT1QswzPe-Z5LdwmA/s1600/pause-namklna-blogspot-com.png'], //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>

=> Tùy chỉnh slider!

• Thay IMAGE LINK 1,2,3,4 thành link ảnh của bạn.
• Thay dấu thăng màu đỏ (#) là liên kết tới bài viết hoặc trang web bạn muốn
• Thay DESCRIPTION là mô tả cho hình ảnh
• Để tăng hoặc giảm thời gian luân chuyển giữa 2 ảnh kế tiếp nhau bạn thay đổi giá trị 2000.
• Để tắt chức năng tự động di chuyển qua các ảnh bạn sửa true thành false.
• Để thay đổi chiều rộng và chiều cao của khung slider bạn hãy thay đổi giá trịn chiều rộng 300 và chiều cao 200.
• font: 10px là cỡ chũ của phần mô tả.
• persist: false tắt chức năng nhớ bức ảnh cuối cùng bạn xem trước khi thoát khỏi hoặc chuyển đến bài khác để tiếp tục chạy. Để baath thì thay persist: false thành persist: true . 
• fadeduration: 500 Thời gian chuyển đổi thời gian. tính bằng mi li giây.

Đó là tất cả nhũng gì bạn cần phải làm.

Nếu cần giúp đỡ!

Hãy để lại comment nếu bạn gặp bất cứ vấnđề nào khi áp dụng thủ thuật này.