See all postsXem ảnh bằng lightBox kết hợp Lazyload
Giới thiệu
lightBox là một plugin xem ảnh trong popup rất nhẹ và mượt, rất thích hợp cho việc xem ảnh lớn hoặc ảnh cần người dùng tập trung quan sát.Lazyload sẽ giúp ảnh hiện lần lượt mỗi khi bạn kéo thanh cuộn đến vị trí ảnh, tránh tình trạng dồn thanh cuộn khi ảnh nhiều và tải không đồng đều.
Trong code này mình đã tùy chỉnh để bạn có thể sử dụng cùng lúc 2 plugin này, ngoài ra bạn cũng thế thêm chú thích cho ảnh, hay chuyển đổi ảnh từ liên kết.
Demo
![[TUTs] Xem ảnh bằng lightBox kết hợp Lazyload 33_bmp10](https://i.servimg.com/u/f39/18/83/32/63/33_bmp10.jpg)
Hướng dẫn
Bước 1
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet- Code:
.lb_lazy img{display:block;max-width:600px;min-width:150px;cursor:url(//dl.dropboxusercontent.com/u/126946313/zoomin.cur), -webkit-zoom-in;margin:0 auto}
/* Lightbox @leandrovieira ver 0.5 */
#jquery-overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:500px}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana, Helvetica, sans-serif;background-color:#fff;line-height:1.4em;overflow:auto;width:100%;margin:0 auto;padding:0 10px}
#lightbox-container-image-data{color:#666;padding:0 10px}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:700}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:.7em}
Bước 2
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript: In the topics- Code:
(function(b){b.fn.lightBox=function(a){function p(){b("body").append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+a.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+a.imageBtnClose+'"></a></div></div></div></div>');var c=l();b("#jquery-overlay").css({backgroundColor:a.overlayBgColor,opacity:a.overlayOpacity,width:c[0],height:c[1]}).fadeIn();var g=m();b("#jquery-lightbox").css({top:g[1]+c[3]/10,left:g[0]}).show();b("#jquery-overlay,#jquery-lightbox").click(function(){h()});b("#lightbox-loading-link,#lightbox-secNav-btnClose").click(function(){h();return!1});b(window).resize(function(){var a=l();b("#jquery-overlay").css({width:a[0],height:a[1]});var c=m();b("#jquery-lightbox").css({top:c[1]+a[3]/10,left:c[0]})})}function d(){b("#lightbox-loading").show();a.fixedNavigation?b("#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide():b("#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide();var c=new Image;c.onload=function(){b("#lightbox-image").attr("src",a.imageArray[a.activeImage][0]);q(c.width,c.height);c.onload=function(){}};c.src=a.imageArray[a.activeImage][0]}function q(c,g){var e=b("#lightbox-container-image-box").width(),k=b("#lightbox-container-image-box").height(),d=c+2*a.containerBorderSize,f=g+2*a.containerBorderSize,e=e-d,k=k-f;b("#lightbox-container-image-box").animate({width:d,height:f},a.containerResizeSpeed,function(){r()});0==e&&0==k&&(b.browser.msie?n(250):n(100));b("#lightbox-container-image-data-box").css({width:c});b("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({height:g+2*a.containerBorderSize})}function r(){b("#lightbox-loading").hide();b("#lightbox-image").fadeIn(function(){b("#lightbox-container-image-data-box").slideDown("fast");b("#lightbox-image-details-caption").hide();a.imageArray[a.activeImage][1]&&b("#lightbox-image-details-caption").html(a.imageArray[a.activeImage][1]).show();1<a.imageArray.length&&b("#lightbox-image-details-currentNumber").html(a.txtImage+" "+(a.activeImage+1)+" "+a.txtOf+" "+a.imageArray.length).show();s()});a.imageArray.length-1>a.activeImage&&(objNext=new Image,objNext.src=a.imageArray[a.activeImage+1][0]);0<a.activeImage&&(objPrev=new Image,objPrev.src=a.imageArray[a.activeImage-1][0])}function s(){b("#lightbox-nav").show();b("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({background:"transparent url("+a.imageBlank+") no-repeat"});0!=a.activeImage&&(a.fixedNavigation?b("#lightbox-nav-btnPrev").css({background:"url("+a.imageBtnPrev+") left 15% no-repeat"}).unbind().bind("click",function(){a.activeImage-=1;d();return!1}):b("#lightbox-nav-btnPrev").unbind().hover(function(){b(this).css({background:"url("+a.imageBtnPrev+") left 15% no-repeat"})},function(){b(this).css({background:"transparent url("+a.imageBlank+") no-repeat"})}).show().bind("click",function(){a.activeImage-=1;d();return!1}));a.activeImage!=a.imageArray.length-1&&(a.fixedNavigation?b("#lightbox-nav-btnNext").css({background:"url("+a.imageBtnNext+") right 15% no-repeat"}).unbind().bind("click",function(){a.activeImage+=1;d();return!1}):b("#lightbox-nav-btnNext").unbind().hover(function(){b(this).css({background:"url("+a.imageBtnNext+") right 15% no-repeat"})},function(){b(this).css({background:"transparent url("+a.imageBlank+") no-repeat"})}).show().bind("click",function(){a.activeImage+=1;d();return!1}));t()}function t(){b(document).keydown(function(c){null==c?(keycode=event.keyCode,escapeKey=27):(keycode=c.keyCode,escapeKey=c.DOM_VK_ESCAPE);key=String.fromCharCode(keycode).toLowerCase();key!=a.keyToClose&&"x"!=key&&keycode!=escapeKey||h();key!=a.keyToPrev&&37!=keycode||0==a.activeImage||(a.activeImage-=1,d(),b(document).unbind());key!=a.keyToNext&&39!=keycode||a.activeImage==a.imageArray.length-1||(a.activeImage+=1,d(),b(document).unbind())})}function h(){b("#jquery-lightbox").remove();b("#jquery-overlay").fadeOut(function(){b("#jquery-overlay").remove()});b("embed, object, select").css({visibility:"visible"})}function l(){var a,b;window.innerHeight&&window.scrollMaxY?(a=window.innerWidth+window.scrollMaxX,b=window.innerHeight+window.scrollMaxY):document.body.scrollHeight>document.body.offsetHeight?(a=document.body.scrollWidth,b=document.body.scrollHeight):(a=document.body.offsetWidth,b=document.body.offsetHeight);var e,d;self.innerHeight?(e=document.documentElement.clientWidth?document.documentElement.clientWidth:self.innerWidth,d=self.innerHeight):document.documentElement&&document.documentElement.clientHeight?(e=document.documentElement.clientWidth,d=document.documentElement.clientHeight):document.body&&(e=document.body.clientWidth,d=document.body.clientHeight);pageHeight=b<d?d:b;pageWidth=a<e?a:e;return arrayPageSize=[pageWidth,pageHeight,e,d]}function m(){var a,b;self.pageYOffset?(b=self.pageYOffset,a=self.pageXOffset):document.documentElement&&document.documentElement.scrollTop?(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft):document.body&&(b=document.body.scrollTop,a=document.body.scrollLeft);return arrayPageScroll=[a,b]}function n(a){var b=new Date;do var d=new Date;while(d-b<a)}a=jQuery.extend({overlayBgColor:"#000",overlayOpacity:0.8,fixedNavigation:!1,imageLoading:"http://i56.servimg.com/u/f56/18/59/49/93/loadin10.gif",imageBtnPrev:"http://i56.servimg.com/u/f56/18/59/49/93/prevla10.gif",imageBtnNext:"http://i56.servimg.com/u/f56/18/59/49/93/nextla10.gif",imageBtnClose:"http://i56.servimg.com/u/f56/18/59/49/93/closel10.gif",imageBlank:"http://2img.net/i/fa/empty.gif",containerBorderSize:10,containerResizeSpeed:400,txtImage:"Image",txtOf:"of",keyToClose:"c",keyToPrev:"p",keyToNext:"n",imageArray:[],activeImage:0},a);var f=this;return this.unbind("click").click(function(){b("embed, object, select").css({visibility:"hidden"});p();a.imageArray.length=0;a.activeImage=0;if(1==f.length)a.imageArray.push([this.getAttribute("href"),this.getAttribute("title")]);else for(var c=0;c<f.length;c++)a.imageArray.push([f[c].getAttribute("href"),f[c].getAttribute("title")]);for(;a.imageArray[a.activeImage][0]!=this.getAttribute("href");)a.activeImage++;d();return!1})}})(jQuery);
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.data(j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.data(j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/iphone|ipod|ipad.*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent) || jQuery(function (a) {
a(".post-entry img").not("img[src^='data:image'], img[src^='http://latex.codecogs.com/gif.latex?'], img[src*='illiweb.com'], img[src*='imgfast.net']").replaceWith(function () {
return '<a href="' + this.src + '">DEVs</a>'
});
a(".post-entry a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif'],a[href$='.bmp']").not("a[href*='illiweb.com']").not("a[href*='imgfast.net']").attr({
"class": "lb_lazy",
title: function () {
var b = a(this).text();
return "" == b || this.href == b ? "DEVs" : b
}
}).html(function () {
return '<img alt="zzBv" data-original="' +
this.href + '" />'
});
a(".lb_lazy img").lazyload({
threshold: 200,
effect: "fadeIn"
});
a(".lb_lazy").lightBox()
});
Ghi chú
Để đăng ảnh, bạn chỉ cần nhập liên kết, code sẽ chuyển thành ảnh khi người dùng xem, hoặc bạn cũng có thể dùng BBcode IMG như bình thường.Để đăng ảnh với chú thích, bạn sử dụng BBcode URL với URL là liên kết ảnh, và Description sẽ là chú thích. Ví dụ:
- Code:
[url=http://i56.servimg.com/u/f56/18/59/49/93/ia_ful10.jpg]IA (イア) Japanese VOCALOID[/url]
Nguồn
Plugin Lightbox (leandrovieira.com)Plugin Lazyload (www.appelsiini.net)
Zzbaivong (devs.forumvi.com)
Tags: #tutorial