XEM ẢNH BẰNG LIGHTBOX KẾT HỢP LAZYLOAD
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
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}[size=14][/size]
/* Lightbox @leandrovieira ver 0.5 */[size=14][/size]
#jquery-overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:500px}[size=14][/size]
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}[size=14][/size]
#jquery-lightbox a img{border:none}[size=14][/size]
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}[size=14][/size]
#lightbox-container-image{padding:10px}[size=14][/size]
#lightbox-loading{position:absolute;top:40%;left:0;height:25%;width:100%;text-align:center;line-height:0}[size=14][/size]
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}[size=14][/size]
#lightbox-container-image-box > #lightbox-nav{left:0}[size=14][/size]
#lightbox-nav a{outline:none}[size=14][/size]
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}[size=14][/size]
#lightbox-nav-btnPrev{left:0;float:left}[size=14][/size]
#lightbox-nav-btnNext{right:0;float:right}[size=14][/size]
#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}[size=14][/size]
#lightbox-container-image-data{color:#666;padding:0 10px}[size=14][/size]
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}[size=14][/size]
#lightbox-image-details-caption{font-weight:700}[size=14][/size]
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1em}[size=14][/size]
#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(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);[size=14][/size]
/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent) || jQuery(function (a) {[size=14][/size]
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 () {[size=14][/size]
return '<a href="' + this.src + '">DEVs</a>'[size=14][/size]
});[size=14][/size]
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({[size=14][/size]
"class": "lb_lazy",[size=14][/size]
title: function () {[size=14][/size]
var b = a(this).text();[size=14][/size]
return "" == b || this.href == b ? "DEVs" : b[size=14][/size]
}[size=14][/size]
}).html(function () {[size=14][/size]
return '<img alt="zzBv" data-original="' +[size=14][/size]
this.href + '" />'[size=14][/size]
});[size=14][/size]
a(".lb_lazy img").lazyload({[size=14][/size]
threshold: 200,[size=14][/size]
effect: "fadeIn"[size=14][/size]
});[size=14][/size]
a(".lb_lazy").lightBox()[size=14][/size]
});
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]
Chú thích sẽ xuất hiện trong lightBox, khi người xem nhấn vào ảnh.
NGUỒN
Plugin Lightbox (leandrovieira.com)
Plugin Lazyload (www.appelsiini.net)
Zzbaivong (devs.forumvi.com)
Tags: #tutorial #lightbox #lazyload
