Адаптивный Lightbox на jquery

адаптивный lightbox на jquery
По идеи должен подходить для сайтов и блогов на любой платформе.

Прежде, чем рассказать вам, как добавить в свой блог или сайт адаптивный lightbox на jquery я напишу несколько строчек для тех, кто не знает, что это такое и для чего оно нужно и нужно ли вообще.

Что такое Lightbox

Lightbox - в переводе с английского означает светлая коробка или светлый ящик, в общем, что-то в этом роде. В веб-дизайне Lightbox отыгрывает роль подачи изображения. К примеру вы просматриваете статью в которой есть несколько изображений, если вы хотите посмотреть на это изображение в его полном размере вы, что делаете? Правильно кликаете по нему, и вот в это время когда оно открывается вместе с ним отрывается и Lightbox, который задает фон окна в котором появляется картинка и скажем так стиль появления этой картинки. К примеру сравните, как открывается изображения в разных лайтбоксах:

  1. Обычный Lightbox - кликнете по заглавной картинке поста
  2. Lightbox на jquery

Правда эффект открывания изображения в Lightbox на jquery выглядит намного красивее нежели в обычном? Мне во всяком случае больше нравится второй вариант.

Еще добавлю, что не все лайтбоксы адаптивны с мобильными устройствами. Но не переживайте в нашем варианте это предусмотрено.

Как добавить адаптивный Lightbox на jquery в свой блог или сайт


Для тех у кого платформа blogger переходим в раздел Шаблон - Изменить HTML находим код ]]></b:skin> и перед ним вставляем следующий код:

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#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 &gt; #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:10%;float:left;}
#lightbox-nav-btnNext{right:10%;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#555;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}

@media (max-width:1200px){
img#lightbox-image {height:100%;width:100%;}
#lightbox-container-image-box{position:relative;background-color:#fff;width: 100% !important;height: 100% !important;margin:0 auto;}
#lightbox-container-image-data-box{width:100% !important;}
}

Затем ищем код  </body> перед которым нужно вставить код:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script>
(function(a){a.fn.lightBox=function(p){p=jQuery.extend({overlayBgColor:&quot;#000&quot;,overlayOpacity:0.9,fixedNavigation:false,imageLoading:&quot;http://3.bp.blogspot.com/-PhHW03ckcTo/Uxz2KObEXKI/AAAAAAAAGdc/yIlxeHoSGrQ/s1600/loading.gif&quot;,imageBtnPrev:&quot;http://3.bp.blogspot.com/-argbPLkMSYI/Uxz1cSp0BYI/AAAAAAAAGc8/CEVnfIEZcdA/s1600/prev-image.gif&quot;,imageBtnNext:&quot;http://2.bp.blogspot.com/-eKmHc8KcGhg/Uxz1lTM4CoI/AAAAAAAAGdE/aqs71cp-J4M/s1600/next-image.gif&quot;,imageBtnClose:&quot;http://3.bp.blogspot.com/-AaP8lP-PLP4/Uxz1wHeh-1I/AAAAAAAAGdM/B4g4ds7FSr8/s1600/close-image.gif&quot;,imageBlank:&quot;http://4.bp.blogspot.com/-YAyF8nlnzyM/Uxz1579tqvI/AAAAAAAAGdU/qYDLC_j3T6k/s1600/blank.gif&quot;,containerBorderSize:10,containerResizeSpeed:400,txtImage:&quot;Image&quot;,txtOf:&quot;of&quot;,keyToClose:&quot;c&quot;,keyToPrev:&quot;p&quot;,keyToNext:&quot;n&quot;,imageArray:[],activeImage:0},p);var i=this;function r(){o(this,i);return false}function o(v,u){a(&quot;embed, object, select&quot;).css({visibility:&quot;hidden&quot;});c();p.imageArray.length=0;p.activeImage=0;if(u.length==1){p.imageArray.push(new Array(v.getAttribute(&quot;href&quot;),v.getAttribute(&quot;title&quot;)))}else{for(var t=0;t&lt;u.length;t++){p.imageArray.push(new Array(u[t].getAttribute(&quot;href&quot;),u[t].getAttribute(&quot;title&quot;)))}}while(p.imageArray[p.activeImage][0]!=v.getAttribute(&quot;href&quot;)){p.activeImage++}l()}function c(){a(&quot;body&quot;).append(&#39;&lt;div id=&quot;jquery-overlay&quot;&gt;&lt;/div&gt;&lt;div id=&quot;jquery-lightbox&quot;&gt;&lt;div id=&quot;lightbox-container-image-box&quot;&gt;&lt;div id=&quot;lightbox-container-image&quot;&gt;&lt;img id=&quot;lightbox-image&quot;&gt;&lt;div style=&quot;&quot; id=&quot;lightbox-nav&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-nav-btnPrev&quot;&gt;&lt;/a&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-nav-btnNext&quot;&gt;&lt;/a&gt;&lt;/div&gt;&lt;div id=&quot;lightbox-loading&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-loading-link&quot;&gt;&lt;img src=&quot;&#39;+p.imageLoading+&#39;&quot;&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;lightbox-container-image-data-box&quot;&gt;&lt;div id=&quot;lightbox-container-image-data&quot;&gt;&lt;div id=&quot;lightbox-image-details&quot;&gt;&lt;span id=&quot;lightbox-image-details-caption&quot;&gt;&lt;/span&gt;&lt;span id=&quot;lightbox-image-details-currentNumber&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div id=&quot;lightbox-secNav&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-secNav-btnClose&quot;&gt;&lt;img src=&quot;&#39;+p.imageBtnClose+&#39;&quot;&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#39;);var t=f();a(&quot;#jquery-overlay&quot;).css({backgroundColor:p.overlayBgColor,opacity:p.overlayOpacity,width:t[0],height:t[1]}).fadeIn();var u=h();a(&quot;#jquery-lightbox&quot;).css({top:u[1]+(t[3]/10),left:u[0]}).show();a(&quot;#jquery-overlay,#jquery-lightbox&quot;).click(function(){b()});a(&quot;#lightbox-loading-link,#lightbox-secNav-btnClose&quot;).click(function(){b();return false});a(window).resize(function(){var v=f();a(&quot;#jquery-overlay&quot;).css({width:v[0],height:v[1]});var w=h();a(&quot;#jquery-lightbox&quot;).css({top:w[1]+(v[3]/10),left:w[0]})})}function l(){a(&quot;#lightbox-loading&quot;).show();if(p.fixedNavigation){a(&quot;#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber&quot;).hide()}else{a(&quot;#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber&quot;).hide()}var t=new Image();t.onload=function(){a(&quot;#lightbox-image&quot;).attr(&quot;src&quot;,p.imageArray[p.activeImage][0]);j(t.width,t.height);t.onload=function(){}};t.src=p.imageArray[p.activeImage][0]}function j(w,z){var t=a(&quot;#lightbox-container-image-box&quot;).width();var y=a(&quot;#lightbox-container-image-box&quot;).height();var x=(w+(p.containerBorderSize*2));var v=(z+(p.containerBorderSize*2));var u=t-x;var A=y-v;a(&quot;#lightbox-container-image-box&quot;).animate({width:x,height:v},p.containerResizeSpeed,function(){g()});if((u==0)&amp;&amp;(A==0)){if(a.browser.msie){n(250)}else{n(100)}}a(&quot;#lightbox-container-image-data-box&quot;).css({width:w});a(&quot;#lightbox-nav-btnPrev,#lightbox-nav-btnNext&quot;).css({height:z+(p.containerBorderSize*2)})}function g(){a(&quot;#lightbox-loading&quot;).hide();a(&quot;#lightbox-image&quot;).fadeIn(function(){k();s()});q()}function k(){a(&quot;#lightbox-container-image-data-box&quot;).slideDown(&quot;fast&quot;);a(&quot;#lightbox-image-details-caption&quot;).hide();if(p.imageArray[p.activeImage][1]){a(&quot;#lightbox-image-details-caption&quot;).html(p.imageArray[p.activeImage][1]).show()}if(p.imageArray.length&gt;1){a(&quot;#lightbox-image-details-currentNumber&quot;).html(p.txtImage+&quot; &quot;+(p.activeImage+1)+&quot; &quot;+p.txtOf+&quot; &quot;+p.imageArray.length).show()}}function s(){a(&quot;#lightbox-nav&quot;).show();a(&quot;#lightbox-nav-btnPrev,#lightbox-nav-btnNext&quot;).css({background:&quot;transparent url(&quot;+p.imageBlank+&quot;) no-repeat&quot;});if(p.activeImage!=0){if(p.fixedNavigation){a(&quot;#lightbox-nav-btnPrev&quot;).css({background:&quot;url(&quot;+p.imageBtnPrev+&quot;) left 15% no-repeat&quot;}).unbind().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage-1;l();return false})}else{a(&quot;#lightbox-nav-btnPrev&quot;).unbind().hover(function(){a(this).css({background:&quot;url(&quot;+p.imageBtnPrev+&quot;) left 15% no-repeat&quot;})},function(){a(this).css({background:&quot;transparent url(&quot;+p.imageBlank+&quot;) no-repeat&quot;})}).show().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage-1;l();return false})}}if(p.activeImage!=(p.imageArray.length-1)){if(p.fixedNavigation){a(&quot;#lightbox-nav-btnNext&quot;).css({background:&quot;url(&quot;+p.imageBtnNext+&quot;) right 15% no-repeat&quot;}).unbind().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage+1;l();return false})}else{a(&quot;#lightbox-nav-btnNext&quot;).unbind().hover(function(){a(this).css({background:&quot;url(&quot;+p.imageBtnNext+&quot;) right 15% no-repeat&quot;})},function(){a(this).css({background:&quot;transparent url(&quot;+p.imageBlank+&quot;) no-repeat&quot;})}).show().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage+1;l();return false})}}m()}function m(){a(document).keydown(function(t){d(t)})}function e(){a(document).unbind()}function d(t){if(t==null){keycode=event.keyCode;escapeKey=27}else{keycode=t.keyCode;escapeKey=t.DOM_VK_ESCAPE}key=String.fromCharCode(keycode).toLowerCase();if((key==p.keyToClose)||(key==&quot;x&quot;)||(keycode==escapeKey)){b()}if((key==p.keyToPrev)||(keycode==37)){if(p.activeImage!=0){p.activeImage=p.activeImage-1;l();e()}}if((key==p.keyToNext)||(keycode==39)){if(p.activeImage!=(p.imageArray.length-1)){p.activeImage=p.activeImage+1;l();e()}}}function q(){if((p.imageArray.length-1)&gt;p.activeImage){objNext=new Image();objNext.src=p.imageArray[p.activeImage+1][0]}if(p.activeImage&gt;0){objPrev=new Image();objPrev.src=p.imageArray[p.activeImage-1][0]}}function b(){a(&quot;#jquery-lightbox&quot;).remove();a(&quot;#jquery-overlay&quot;).fadeOut(function(){a(&quot;#jquery-overlay&quot;).remove()});a(&quot;embed, object, select&quot;).css({visibility:&quot;visible&quot;})}function f(){var v,t;if(window.innerHeight&amp;&amp;window.scrollMaxY){v=window.innerWidth+window.scrollMaxX;t=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight&gt;document.body.offsetHeight){v=document.body.scrollWidth;t=document.body.scrollHeight}else{v=document.body.offsetWidth;t=document.body.offsetHeight}}var u,w;if(self.innerHeight){if(document.documentElement.clientWidth){u=document.documentElement.clientWidth}else{u=self.innerWidth}w=self.innerHeight}else{if(document.documentElement&amp;&amp;document.documentElement.clientHeight){u=document.documentElement.clientWidth;w=document.documentElement.clientHeight}else{if(document.body){u=document.body.clientWidth;w=document.body.clientHeight}}}if(t&lt;w){pageHeight=w}else{pageHeight=t}if(v&lt;u){pageWidth=v}else{pageWidth=u}arrayPageSize=new Array(pageWidth,pageHeight,u,w);return arrayPageSize}function h(){var u,t;if(self.pageYOffset){t=self.pageYOffset;u=self.pageXOffset}else{if(document.documentElement&amp;&amp;document.documentElement.scrollTop){t=document.documentElement.scrollTop;u=document.documentElement.scrollLeft}else{if(document.body){t=document.body.scrollTop;u=document.body.scrollLeft}}}arrayPageScroll=new Array(u,t);return arrayPageScroll}function n(v){var u=new Date();t=null;do{var t=new Date()}while(t-u&lt;v)}return this.unbind(&quot;click&quot;).click(r)}})(jQuery);
$(document).ready(function(){
$(&#39;a[href$=jpg]:has(img)&#39;).lightBox();
$(&#39;a[href$=jpeg]:has(img)&#39;).lightBox();
$(&#39;a[href$=png]:has(img)&#39;).lightBox();
$(&#39;a[href$=gif]:has(img)&#39;).lightBox();
$(&#39;a[href$=bmp]:has(img)&#39;).lightBox();
});
</script>
</b:if>

Затем сохраняете шаблон. Теперь в настройках нам нужно отключить lightbox, для этого переходим в раздел - Настройки - Сообщения и комментарии. В появившемся окне напротив строки:  
  • Показывать изображения в Lightbox ?
Переключаете на Нет и сохраняете настройки вверху с правой стороны. На картинке ниже указано, как это сделать.

отключить lightbox blogger

Вот и все, теперь можете радоваться новому Lightbox на jquery.



Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Адаптивный Lightbox на jquery
4/ 5
Oleh

3 Коммент.

Оставить комментарий
avatar
Андрей Смольянинов
мая 29, 2016

А вот это хорошо, давно уже надоел стандартный lightbox. Кстати я тут на днях читал на одном из сайтов статью о SmartBox, что-то вроде Lightbox выполняет ту же функцию. Как вы считаете, что лучше использовать на своем блоге?

Ответить
avatar
Шаблоны для Blogger
мая 29, 2016

Да, lightbox на jquery смотрится более изящней.
Со SmarBox я так же знаком, можно сказать это тот же lightbox, только он намного быстрее срабатывает. Лично я считаю его достойной заменой лайтбокса, правда в отличии от своего предшественника он не имеет функции прокрутки изображений.
А вот касательно того, что лучше использовать, то случаи бывают разные, зависит от тематики сайта и от его владельца(что ему нравится). К примеру для сайтов с картинками лучше подойдет Lightbox на jquery, для сайтов подобных моему стандартный лайтбокс. Ну а тем кому нужна скорость SmartBox в самый раз.

Ответить
avatar
Андрей Смольянинов
мая 29, 2016

Понятно. Ну мне больше нравится Lightbox на jquery, все таки его и поставлю.

Ответить