Slider bài viết cực đẹp dành cho view ảnh được thiết kế bởi TháiAiTi

Tweet

[tintuc]
Slider bài viết cực đẹp dành cho view ảnh được thiết kế bởi TháiAiTi
- Load mượt mà, gồm cả thông tin bài viết với hiệu ứng opacity tăng thêm phần đẹp
- Slide chạy: gồm 4 slide bạn có thể cho thêm






Cách làm:


Chèn đoạn code dưới đây vào phần tử Trang HTML/widget:


<div class='lof-main-wapper' id='slider'><div class='slider-main-outer'><ul class='slider-main-wapper'><script>                    document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script></ul></div><div class='slider-navigator-outer'><ul class='slider-navigator'><script>                    document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");</script></ul></div></div><script type='text/javascript'>jQuery(document).ready(function($){        $('#slider').lofJSidernews({        interval:6000,        duration:800,        mainWidth: 455,        navigatorWidth: 200,        maxItemDisplay:3,        easing:'easeInOutQuad',        auto:true,        isPreloaded: false    });});    </script>

- Tiếp theo, bạn chèn đoạn code sau trước  ]]></b:skin>


.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;  word-wrap: break-word; overflow: hidden;}   .slide {color: #666666;line-height: 1.3em;}  .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  .slide li {margin:0;padding-top:0;  padding-right:0;padding-bottom:.25em;  padding-left:0px;text-indent:0px;line-height:1.3em;}  .slide .widget {margin:0px 0px 6px 0px;}  #slider{position:relative;overflow:hidden;width:655px;height:298px;}.slider-main-outer{position:relative;height:100%;width:455px;z-index:3;overflow:hidden}ul.slider-main-wapper li h3{z-index:10;height: 50px;position:absolute;bottom:-14px;width:455px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnDWN728zoSFoUwRDJDz38SdE01sNrvDOYk02iJfHUUmv91gMz4Gp3TYoXIDto7-bYC6GoQRP7qyQAyvORUQ0XxL41X-KXjaz41abxw-3wDQ-HgmXr_fAz-nWpekeDGUS8qOEAEj4zzuG/s1600/transparant.png);padding:10px}ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:none;margin:0}ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}ul.slider-main-wapper li .imgauto{width:455px;height:298px;overflow:hidden;margin:0;padding:0}ul.slider-main-wapper{height:298px;width:455px;position:absolute;overflow:hidden;margin:0;padding:0}ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:455px;float:left;margin:0;padding:0}.slider-opacity li{position:absolute;top:0;left:0;float:inherit}ul.slider-main-wapper li img{list-style:none;width:455px;height:298px;padding:0}ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0;height: 298px !important;}ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0;height:100px !important;}.slider-navigator-outer{position:absolute;right:10px;top:0;z-index:10;color:#333}.slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0;display: none;}.slider-navigator li div{height:90px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}.slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}.slider-navigator li img{height:100px;width: 188px;float: left;margin-left: -5px;}.slider-navigator li.active img{border:#eee solid 1px}.slider-navigator li.active h5{color:#0178d3} 


- Chèn tiếp đoạn code sau trước </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {    setup: function() {        if ( this.addEventListener )            for ( var i=types.length; i; )                this.addEventListener( types[--i], handler, false );        else            this.onmousewheel = handler;    },        teardown: function() {        if ( this.removeEventListener )            for ( var i=types.length; i; )                this.removeEventListener( types[--i], handler, false );        else            this.onmousewheel = null;    }};
$.fn.extend({    mousewheel: function(fn) {        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");    },        unmousewheel: function(fn) {        return this.unbind("mousewheel", fn);    }});

function handler(event) {    var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;        event = $.event.fix(event || window.event);    event.type = "mousewheel";        if ( event.wheelDelta ) delta = event.wheelDelta/120;    if ( event.detail     ) delta = -event.detail/3;        // Add events and delta to the front of the arguments    args.unshift(event, delta);
    return $.event.handle.apply(this, args);}
})(jQuery);
/** * @version        $Id:  $Revision * @package        jquery * @subpackage    lofslidernews * @copyright    Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved. * @website     http://landofcoder.com * @license        This plugin is dual-licensed under the GNU General Public License and the MIT License  */// JavaScript Document(function($) {     $.fn.lofJSidernews = function( settings ) {         return this.each(function() {            // get instance of the lofSiderNew.            new  $.lofSidernews( this, settings );         });      }     $.lofSidernews = function( obj, settings ){        this.settings = {            direction            : '',            mainItemSelector    : 'li',            navInnerSelector    : 'ul',            navSelector          : 'li' ,            navigatorEvent        : 'click',            wapperSelector:     '.slider-main-wapper',            interval               : 4000,            auto                : true, // whether to automatic play the slideshow            maxItemDisplay         : 5,            startItem            : 0,            navPosition            : 'vertical',             navigatorHeight        : 60,            navigatorWidth        : 210,            duration            : 600,            navItemsSelector    : '.slider-navigator li',            navOuterSelector    : '.slider-navigator-outer' ,            isPreloaded            : true,            easing                : 'easeInOutQuad'        }            $.extend( this.settings, settings ||{} );            this.nextNo         = null;        this.previousNo     = null;        this.maxWidth  = this.settings.mainWidth || 600;        this.wrapper = $( obj ).find( this.settings.wapperSelector );            this.slides = this.wrapper.find( this.settings.mainItemSelector );        if( !this.wrapper.length || !this.slides.length ) return ;        // set width of wapper        if( this.settings.maxItemDisplay > this.slides.length ){            this.settings.maxItemDisplay = this.slides.length;            }        this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;        this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );            this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;        this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );                if( this.settings.navPosition == 'horizontal' ){             this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );            this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );            this.navigatorOuter.height(    this.settings.navigatorHeight );                    } else {            this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );                            this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );            this.navigatorOuter.width(    this.settings.navigatorWidth );        }                this.navigratorStep = this.__getPositionMode( this.settings.navPosition );                this.directionMode = this.__getDirectionMode();                          if( this.settings.direction == 'opacity') {            this.wrapper.addClass( 'slider-opacity' );            $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);        } else {             this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );        }
                if( this.settings.isPreloaded ) {            this.preLoadImage( this.onComplete );        } else {            this.onComplete();        }             }     $.lofSidernews.fn =  $.lofSidernews.prototype;     $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;         $.lofSidernews.fn.extend({                                      startUp:function( obj, wrapper ) {            seft = this;
            this.navigatorItems.each( function(index, item ){                $(item).click( function(){                    seft.jumping( index, true );                    seft.setNavActive( index, item );                                    } );                $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );            })            this.registerWheelHandler( this.navigatorOuter, this );            this.setNavActive(this.currentNo );                        if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){                this.registerButtonsControl( 'click', this.settings.buttons, this );
            }            if( this.settings.auto )             this.play( this.settings.interval,'next', true );                        return this;        },        onComplete:function(){            setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );        },        preLoadImage:function(  callback ){            var self = this;            var images = this.wrapper.find( 'img' );                var count = 0;            images.each( function(index,image){                 if( !image.complete ){                                      image.onload =function(){                        count++;                        if( count >= images.length ){                            self.onComplete();                        }                    }                    image.onerror =function(){                         count++;                        if( count >= images.length ){                            self.onComplete();                        }                        }                }else {                    count++;                    if( count >= images.length ){                        self.onComplete();                    }                    }            } );        },        navivationAnimate:function( currentIndex ) {             if (currentIndex <= this.settings.startItem                 || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {                    this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;                    if (this.settings.startItem < 0) this.settings.startItem = 0;                    if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {                        this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;                    }            }                    this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),                                                 {duration:500, easing:'easeInOutQuad'} );            },        setNavActive:function( index, item ){            if( (this.navigatorItems) ){                 this.navigatorItems.removeClass( 'active' );                $(this.navigatorItems.get(index)).addClass( 'active' );                    this.navivationAnimate( this.currentNo );                }        },        __getPositionMode:function( position ){            if(    position  == 'horizontal' ){                return ['left', this.settings.navigatorWidth];            }            return ['top', this.settings.navigatorHeight];        },        __getDirectionMode:function(){            switch( this.settings.direction ){                case 'opacity': this.maxSize=0; return ['opacity','opacity'];                default: this.maxSize=this.maxWidth; return ['left','width'];            }        },        registerWheelHandler:function( element, obj ){              element.bind('mousewheel', function(event, delta ) {                var dir = delta > 0 ? 'Up' : 'Down',                    vel = Math.abs(delta);                if( delta > 0 ){                    obj.previous( true );                } else {                    obj.next( true );                }                return false;            });        },        registerButtonsControl:function( eventHandler, objects, self ){             for( var action in objects ){                 switch (action.toString() ){                    case 'next':                        objects[action].click( function() { self.next( true) } );                        break;                    case 'previous':                        objects[action].click( function() { self.previous( true) } );                        break;                }            }            return this;            },        onProcessing:function( manual, start, end ){                         this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);            this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);                            return this;        },        finishFx:function( manual ){            if( manual ) this.stop();            if( manual && this.settings.auto ){                 this.play( this.settings.interval,'next', true );            }                    this.setNavActive( this.currentNo );            },        getObjectDirection:function( start, end ){            return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");            },        fxStart:function( index, obj, currentObj ){                if( this.settings.direction == 'opacity' ) {                     $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );                    $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );                }else {                    this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );                }            return this;        },        jumping:function( no, manual ){            this.stop();             if( this.currentNo == no ) return;                     var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");            this.onProcessing( null, manual, 0, this.maxSize )                .fxStart( no, obj, this )                .finishFx( manual );                    this.currentNo  = no;        },        next:function( manual , item){
            this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);                this.onProcessing( item, manual, 0, this.maxSize )                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )                .finishFx( manual );        },        previous:function( manual, item ){            this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;            this.onProcessing( item, manual )                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )                .finishFx( manual    );                    },        play:function( delay, direction, wait ){                this.stop();             if(!wait){ this[direction](false); }            var self  = this;            this.isRun = setTimeout(function() { self[direction](true); }, delay);        },        stop:function(){             if (this.isRun == null) return;            clearTimeout(this.isRun);            this.isRun = null;         }    })})(jQuery)
 //]]></script><script type='text/javascript'>//<![CDATA[imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFGPewZ03HEhHDXl56RbSgXR8HkQZSZC9q8g_s9SDEHfbpPfmxjAHXSKTzoZmxwCswO-m2ZnqfDpx4GpbvfH3SvR4yVhrJtZg9rYQg_z_UeeOWCEnFRSrYkte5KINrgEVotdEe8DADnHY/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost = 70;summaryTitle = 20;
numposts = 10;
function removeHtmlTag(strx,chop){    var s = strx.split("<");    for(var i=0;i<s.length;i++){        if(s[i].indexOf(">")!=-1){            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);        }    }    s =  s.join("");    s = s.substring(0,chop-1);    return s;}
function showrecentposts(json) {    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;    img  = new Array();
      for (var i = 0; i < numposts; i++) {        var entry = json.feed.entry[i];        var posttitle = entry.title.$t;        var pcm;        var posturl;        if (i == json.feed.entry.length) break;        for (var k = 0; k < entry.link.length; k++) {              if (entry.link[k].rel == 'alternate') {                posturl = entry.link[k].href;                break;              }        }                for (var k = 0; k < entry.link.length; k++) {              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {                pcm = entry.link[k].title.split(" ")[0];                break;              }        }                if ("content" in entry) {              var postcontent = entry.content.$t;}        else        if ("summary" in entry) {              var postcontent = entry.summary.$t;}        else var postcontent = "";                postdate = entry.published.$t;        if(j>imgr.length-1) j=0;    img[i] = imgr[j];        s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

    var month = [1,2,3,4,5,6,7,8,9,10,11,12];    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);    var m = postdate.split("-")[1];    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){        if(parseInt(m)==month[u2]) {            m = month2[u2] ; break;        }    }
    var daystr = day+ ' ' + m + ' ' + y ;        var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>';                            document.write(trtd);                                     j++;    }    }

function showrecentposts1(json) {    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;    img  = new Array();          for (var i = 0; i < numposts; i++) {        var entry = json.feed.entry[i];        var posttitle = entry.title.$t;        var pcm;        var posturl;        if (i == json.feed.entry.length) break;        for (var k = 0; k < entry.link.length; k++) {              if (entry.link[k].rel == 'alternate') {                posturl = entry.link[k].href;                break;              }        }                for (var k = 0; k < entry.link.length; k++) {              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {                pcm = entry.link[k].title.split(" ")[0];                break;              }        }                if ("content" in entry) {              var postcontent = entry.content.$t;}        else        if ("summary" in entry) {              var postcontent = entry.summary.$t;}        else var postcontent = "";                postdate = entry.published.$t;        if(j>imgr.length-1) j=0;    img[i] = imgr[j];        s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

    var month = [1,2,3,4,5,6,7,8,9,10,11,12];    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);    var m = postdate.split("-")[1];    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){        if(parseInt(m)==month[u2]) {            m = month2[u2] ; break;        }    }
    var daystr = day+ ' ' + m + ' ' + y ;        var trtd = '<li><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                            document.write(trtd);                                     j++;    }    }
 //]]></script>
[/tintuc]