TỔNG HỢP TOP 10 CÁCH TẠO SLIDESHOW HÌNH ẢNH CHO BLOG WEBSITE VÀ WORDPRESS # 12

A. Ý NGHĨA: Tạo cho giao diện blog hay webstie đẹp hơn với một đoạn code ngắn và vài bước cơ bản có thể

TỔNG HỢP TOP 10 CÁCH TẠO SLIDESHOW HÌNH ẢNH CHO BLOG WEBSITE VÀ WORDPRESS

B. HƯỚNG DẪN CÁCH CHÈN CODE TẠO SLIDESHOW HÌNH ẢNH CHO BLOG WEBSITE
1. Cách 1: Hướng dẫn thủ thuật tạo slide show ảnh:
Demo: 

Cách 1: Hướng dẫn thủ thuật tạo slide show ảnh

Bước 1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
Bước 2. Dán Code dưới đây vào tiện ích vừa thêm:

<style type="text/css">

.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8lhpTEbIwEQdE_I5p1q2mg9p73dm4z88d_HnOj3YnLyBIW8W4cISOBcjFuvw1-ZiWjXxsFGienf0IWlP62QFqpvWR8ddZURb3cRPms6q1bIdVX9_g6CCfNZRuEP5EUPyov2RWmP0OMiM/s1600/paging_btrix_bg2.png) no-repeat;
display: none; 
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- Huong dan thu thuat http://itviet360.com -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://cblogspot.com"><img src="http://3.bp.blogspot.com/anh-bia-fb-tinh-yeu-10.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://ctiseologspot.com"><img src="http://3.bp.blogspot.com//anh-bia-fb-tinh-yeu-11.jpg" width='660' alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://ctiselogspot.com"><img src="http://1.bp.blogspot.com/1600/anh-bia-tinh-yeu-dep-3.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://ctiselogspot.com"><img src="http://4.bp.blogspot.com//anh-bia-fb-tinh-yeu-1.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//paging_btrix + Slider Function
rotate = function(){ 
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({ 
left: -image_reelPosition
}, 500 );

}; 

//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 

//On Click
$(".paging_btrix a").click(function() { 
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 

});
</script>

Thay link màu xanh bằng hình ảnh của bạn
Thay link xanh lá bằng đường dẫn ảnh

C. VIDEO HƯỚNG DẪN CHÈN SLIDESHOW HÌNH ẢNH CHO BLOG WEBSITE




2. Cách 2: Thêm vào blogspot slideshow ảnh: 
bước 1- Đăng nhập vào blog
bước 2- Chọn Bố cục
bướ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/AVvXsEjfKhdM-XzoKR1pX9VdqdWzikWBCQSOPoyUIuPRAMVG6ZQjFeVBbvNEGtywC5mw5XhQ5SyCoGewIsVuIl34OE1oQgn_v-Ur2thKaUAAUhSvob1H4cvxULGc2j_moaSFrXtMsnYS50rVeok/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/AVvXsEi9ILB3NOsrKaER_Q_Az7iyfYSBAmyIp7x-oNnzrxfazmTR2l0vz4wgN7JaxHVLIvjp-jca-a6bU5Zw8-LO8W-aPZCXHZmqRq5bdUM-BZZBFC2qWI6H5BTel0niPunzJ3Jb9y3UlSPV-v4/s1600/left-namkna-blogspot-com.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK8Ij0QH_kVhdb3_dAEp9KdNgbgYkPOLgPM-1tqsMTUx3z5MS5FHeWaA3w47nsx5vA637AvLkiqt8jVTbm0Zj6hL3N0-XyrNPmU__bYzx6xij9P1rAUwoo6om-1b1cn4cS7pHkLFNWIO8/s1600/play-namkna-blogspot-com.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZF6A3ifrtAE-k7H47sWb8XRwK1AbqyFZKJopnRxRamyljZtUO_cDU0i5xcMqk6x45UfQ9Uo85pqqGihxcOFo5bWn8iobPgZLauWMv3b7wk25zY-Gu2HYjHsCKbr6555AyR0RkU_1KQhM/s1600/right-namkna-blogspot-com.png', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8uEHvyD0unajxKid4HM4H3byHSSkDNOR1uouUfSgtheWf40fQN98kEMou3HoL0ITwAuby9zfgYJ4JW_3t2Zj2q9seZcFlHdamklkQ2dguP4mhHe3WBo0h7M7grFYvGqB2xTj2oFeLZg/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>

bước 4: 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 xanh dương (#) 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.

3. Cách 3: Query cycle là một plugin gọn nhẹ giúp chúng ta tạo ra các slideshow động trên trang web với nhiều hiệu ứng đẹp, sử dụng jquery cycle để tạo slide hình ảnh
jQuery cycle là một plugin gọn nhẹ giúp chúng ta tạo ra các slideshow động trên trang web với nhiều hiệu ứng đẹp, không chỉ tạo ra slide hình ảnh, jQuery cycle có thể slide bất cứ phần tử html nào mà bạn muốn, như một đoạn văn bản chẳng hạn…

Chúng ta sẽ sử dụng jQuery cycle để tạo Slideshow hình ảnh như sau:

Lưu ý: jQuery cycle là một plugin của jQuery, nên để chạy được plugin này bạn cần thư viện jQuery, nếu chưa có bạn có thể vào jquery.com để Download

Tiếp theo bạn Download  jQuery cycle tại đây: http://malsup.com/jquery/cycle/download.html
CODE

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="jquery.cycle.all.js"></script> 

Chèn thư viện jQuery và jQuery cycle vào thẻ <head> của website
Trong thành phần <body> của HTML chúng ta tạo mã HTML của Slideshow như sau

<div id="slide"> 
        <img src="imgs/1.jpg" alt="Picture 1" /> 
        <img src="imgs/2.jpg" alt="Picture 2" /> 
        <img src="imgs/3.jpg" alt="Picture 3" /> 
        <img src="imgs/4.jpg" alt="Picture 4" /> 
        <img src="imgs/5.jpg" alt="Picture 5" /> 
</div> 
<div id="slide-nav"></div>

jQuery cycle sẽ chọn các thành phần là con của <div id=”slide”> (không phải thành phần cháu trong cấu trúc DOM) để đưa vào vòng lặp. Ở đây chúng ta chọn được 5 thành phần <img> để tạo slide.

Thành phần <div id=”slide-nav”> là nơi chúng ta sẽ hiện thị phân trang (paging) của Slideshow, phân trang này sẽ tự động thêm vào tương ứng với số lượng hình ảnh của chúng ta

Bạn có thể xem các tùy chọn của jQuery cycle tại đây: http://jquery.malsup.com/cycle/options.html
Xem thêm các hiệu ứng tại đây: http://jquery.malsup.com/cycle/browser.html
Tiếp tục thêm đoạn mã sau trong thẻ <head> hoặc bất cứ đâu bạn muốn để tạo slider

<script type="text/javascript"> 
     $(document).ready(function(){ 
       $("#slide").cycle({ 
           //Các tùy chọn của jQuery cycle 
             fx:  'fade', //Hiệu ứng 
           speed:  1000, //Tốc độ diễn ra hiệu ứng 1/1000s 
           timeout: 3000, //Thời gian thay đổi giữa các trong 3s 
           pager:  '#slide-nav' //Tạo phân trang 
       }); 
     }); 
</script>

5. Cuối cùng, thêm một chút CSS để dịnh dạng Slideshow, mình sẽ không đề cập nhiều đến CSS 

* { margin: 0; padding: 0 } 
body { font: 14px arial } 
#wrapper { width: 800px; margin: 0 auto; margin-top: 50px } 
#slide, #slide-nav {background: #000; padding: 10px; width: 480px; height: 195px} 
#slide img { top: 10px !important; left: 10px !important } 
#slide-nav {height: 20px} 
#slide-nav a{ background: #eee; margin-right: 4px; padding: 1px 5px; text-decoration: none; border: 2px solid green; color: green} 
#slide-nav a.activeSlide{background: green; color: #fff}

link tải: Tại đây or đây



4. Cách 4 : Theo các bước dưới đây để tạo được slide show ảnh như hình trên.

tạo slide show

Bước 1. Chuẩn bị các hình ảnh cần thiết để tạo slide show. Nếu chưa có bạn có thể dùng các hình mẫu download ở bên dưới

Bước 2. Đặt đoạn code include thư viện jQuery vào trong phần head của mã html. (Nếu file html của bạn đã có sử dụng jQuery thì bạn có thể bỏ qua bước này)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Bước 3. Tạo file css và include vào trong phần head của mã html như sau.

<link type="text/css" href="css/style.css" rel="stylesheet" />

Nội dung của file css như sau..

.slideshow { 
        position:relative; /*Make the slideshow container  position:relative and make the sub elements absolute to position the sub element absolute to the container*/
        height:320px; /*The slide show height*/
        overflow:hidden;
    }
    .slideshow div {
        position:absolute; 
        top:0px;;
        left:0;
        z-index:8;
    }
    .slideshow div img
    {
        width:600px; /*The image slide show width*/
        height:320px; /*The image slide show height*/
    }
    .slideshow div.active {
        z-index:10;
    }
    .slideshow div.lastactive {
        z-index:9;
    }

Bước 4. Tiếp tục đặt đoạn code sau vào trong phần head của mã html.

<script language="javascript">
	/***************************************************************************************
	* Run when page load
	***************************************************************************************/
	$(document).ready(function()
	{
		initSlideShow();
		
	});
	/***************************************************************************************
	****************************************************************************************/
	function initSlideShow()
	{
		if($(".slideshow div").length > 1) //Only run slideshow if have the slideshow element and have more than one image.
		{
			var transationTime = 5000;//5000 mili seconds i.e 5 second
			$(".slideshow div:first").addClass('active'); //Make the first image become active i.e on the top of other images
			setInterval(slideChangeImage, transationTime); //set timer to run the slide show.
		}
	}
	/***************************************************************************************
	****************************************************************************************/
	
	function slideChangeImage()
	{
		var active = $(".slideshow div.active"); //Get the current active element.
		if(active.length == 0)
		{
			active = $(".slideshow div:last"); //If do not see the active element is the last image.
		}
		
		var next = active.next().length ? active.next() : $(".slideshow div:first"); //get the next element to do the transition
		active.addClass('lastactive');
		next.css({opacity:0.0}) //do the fade in fade out transition
				.addClass('active')
				.animate({opacity:1.0}, 1500, function()
				{
					active.removeClass("active lastactive");	
				});
		 
	}

</script>

Bước 5. Sau đó đặt đoạn code sau vào trong phần body của mã html. Đây là đoạn mã html danh sách các hình cần để chạy slide show.

<div class="slideshow">
	<div><a href="#"><img src="images/flower-1.jpg" alt="" border="0" /></a></div>
	<div><a href="#"><img src="images/flower-2.jpg" alt="" border="0" /></a></div>
	<div><a href="#"><img src="images/flower-3.jpg" alt="" border="0" /></a></div>
	<div><a href="#"><img src="images/flower-4.jpg" alt="" border="0" /></a></div>
</div>

Bước 6. Đã xong. Bạn có thể chạy thử kế quả hoặc click vào liên kết bên dưới để tải mã nguồn về.
TẠI ĐÂY



D. KẾT LUẬN CHÈN SLIDESHOW HÌNH ẢNH CHO BLOG WEBSITE
Đây là một số cách chen slide html cho blog hay website hay wordpress giúp bạn trải nghiệm và thiết kế cho blogger của bạn

• Tweet
• Share
• Share
• Share
• Share

About ĐH A DI DA PHAT

Với phương pháp đào tạo Smart, giảng viên kinh nghiệm ,trải nghiệm môi trường giáo dục đào tạo từ mầm non tới đại học với các chuyên ngành mục đích từ thiện cho người không có tiền tới trường: học âm nhạc, quản trị kinh doanh, kế toán, công nghệ thông tin, kiếm tiền online, blog chia sẻ, các thủ thuật máy tính...

Related Post