[TUTs] Xem ảnh bằng lightBox kết hợp Lazyload

  Bài viết hay nhất1
First topic message reminder :

Xem ả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



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://illiweb.com/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]
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)
  Bài viết hay nhất26

@Zzbaivong wrote:Bạn gỡ mod này ra xem sao, để lại CSS nhé.
Ok, mình gỡ rồi đấy baivong
  Bài viết hay nhất27
Nó vẫn bị reload kìa :v
Gỡ cái nút Twitter ra xem sao.
  Bài viết hay nhất28
lol, gỡ luôn twitter, facebook ra vẫn bị :v
  Bài viết hay nhất29
Tìm code này, trong một file js nào đấy, mà được đặt In all the pages:
Code:
var curlink = location.href;
if ((curlink.indexOf('wall') > -1) && (curlink.indexOf('u') > -1)) {
    var rdt = curlink.replace("wall", "");
    location.href = rdt
}
if ((curlink.indexOf('stats') > -1) && (curlink.indexOf('u') > -1)) {
    var rdt = curlink.replace("stats", "");
    location.href = rdt
}
if ((curlink.indexOf('friends') > -1) && (curlink.indexOf('u') > -1)) {
    var rdt = curlink.replace("friends", "");
    location.href = rdt
}
if ((curlink.indexOf('contact') > -1) && (curlink.indexOf('u') > -1)) {
    var rdt = curlink.replace("contact", "");
    location.href = rdt
}
if (curlink.indexOf('?tt=1') > -1) {
    var gulink = curlink.replace("?tt=1", "")
} else {
    var gulink = curlink
}

Sửa thành:
Code:
var curlink = location.pathname;
if ((curlink.indexOf('wall') !== -1) && (curlink.indexOf('/u') == 0)) {
    var rdt = curlink.replace("wall", "");
    location.href = rdt
}
if ((curlink.indexOf('stats') !== -1) && (curlink.indexOf('/u') == 0)) {
    var rdt = curlink.replace("stats", "");
    location.href = rdt
}
if ((curlink.indexOf('friends') !== -1) && (curlink.indexOf('/u') == 0)) {
    var rdt = curlink.replace("friends", "");
    location.href = rdt
}
if ((curlink.indexOf('contact') !== -1) && (curlink.indexOf('/u') == 0)) {
    var rdt = curlink.replace("contact", "");
    location.href = rdt
}
if (curlink.indexOf('?tt=1') !== -1) {
    var gulink = curlink.replace("?tt=1", "")
} else {
    var gulink = curlink
}
  Bài viết hay nhất30
ok, hết bị reload rồi, cảm ơn baivong nhiều :)
  Bài viết hay nhất31

@Zzbaivong wrote:Tìm và xóa 2 css sau:
Code:
.postbody img{max-width:750px}
.postbody blockquote img{max-width:705px}

Tìm:
Code:
.lb_lazy img

Sửa giá trị max-width:
Code:
max-width:100%
Cách này cũng sửa image trong trường hợp hình bị fóng đại ở khung file đính kèm đúng không, bạn?

Làm thế nào để nó ưu tiên nếu mình canh lề và định kích thước cho hình sẵn rồi?
  Bài viết hay nhất32
sao forum e chỉ có tấm hình ví dụ:
Code:
[url=http://i56.servimg.com/u/f56/18/59/49/93/ia_ful10.jpg]IA (イア) Japanese VOCALOID[/url]
là xài lightbox được, còn mấy tấm khác thì vô dụng :"(
  Bài viết hay nhất33
Mình đang dùng Phpbb3 có sử dụng được ko?
  Bài viết hay nhất34

@namjaytee wrote:Mình đang dùng Phpbb3 có sử dụng được ko?
chắc được đấy, bạn cài thử vào là biết mà, không xài được thì gỡ
  Bài viết hay nhất35
Thớt có thể sửa lại để khi click vào hình ảnh thì chiều cao của nó vừa với chiều cao của trình duyệt được không (nghĩa là dù ảnh có lớn thì nó cũng thu nhỏ lại để vừa đủ xem hết cả hình)

DEMO:

  Bài viết hay nhất36
Jao ziện rất đẹp nhưng có nhược điểm là nó không fân biệt được đâu là hình, đâu là biểu tượng, icon
  Bài viết hay nhất37
You cannot reply to topics in this forum