[TUTS] XEM ẢNH BẰNG LIGHTBOX KẾT HỢP LAZYLOAD

  Bài viết hay nhất1
HeavenBlue
|

XEM ẢNH BẰNG LIGHTBOX KẾT HỢP LAZYLOAD



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


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
Bạn không có quyền trả lời bài viết