Staff en línea

[javascript] Lightbox Pluying
Tema iniciado por y Añadir a favoritos

[javascript] Lightbox Pluying 
el Miér Oct 25, 2017 7:59 pm
Captura:

Titulo:Lightbox Pluying
Posición: En los temas.
Autor:©️ leandrovieira vr. 2.0
Creditos:@Julinho
Descripcion: Hola amigos de la comunidad vengo presentarles un lindo pluying para las imágenes en los post con todas sus funciones espero que sea de su agrado ....contenido exclusivo para la comunidad!


[hidecode]CSS:
Código:
/* Lightbox @leandrovieira ver 0.5 */
.MaxPreview img{display:block;max-width:350px;min-width:150px;cursor:pointer;margin:0 auto}
#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}

JavaScript:posicion en los temas
Código:
(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/17/97/98/69/loadin11.gif",imageBtnPrev:"http://i56.servimg.com/u/f56/17/97/98/69/prevla10.gif",imageBtnNext:"http://i56.servimg.com/u/f56/17/97/98/69/nextla10.gif",imageBtnClose:"http://i56.servimg.com/u/f56/17/97/98/69/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:""};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 + '"></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": "MaxPreview",
      title: function () {
         var b = a(this).text();
         return "" == b || this.href == b ? "" : b
      }
   }).html(function () {
      return '<img alt="" data-original="' +
         this.href + '" />'
   });
   a(".MaxPreview img").lazyload({
      threshold: 200,
      effect: "fadeIn"
   });
   a(".MaxPreview").lightBox()
});
[/hidecode]
Julinho
avatar

¿Que estoy pensando? :

buen sabado :) [table class=fecha_up][td]Se modifico:2/06/18 - 22:12 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/hkeup0N.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

131


Puntos :

182


Me gusta :

33


ingreso :

05/02/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://4reyes.foroactivo.com/

Volver arriba Ir abajo

[javascript] Lightbox Pluying 
el Jue Dic 07, 2017 1:22 pm
staff
gracias por tu aporte
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6863


Puntos :

8959


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [javascript] Lightbox Pluying 
el Vie Mar 09, 2018 10:45 pm
vamos a probar a ver como queda
yeisergs
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

31


Puntos :

40


Me gusta :

7


ingreso :

18/01/2018


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [javascript] Lightbox Pluying 
el Miér Abr 11, 2018 1:13 pm
Gracias En MI FOro Solo Tenia El JS
House M. D.
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

35


Puntos :

54


Me gusta :

17


ingreso :

27/07/2017


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://mozko-team.foroactivo.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.