Lightbox для Blogger - галерея картинок

Крутой Lightbox для Blogger - галерея картинок

Что такое Lightbox?

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

Как установить Lightbox в Blogger


1. Перейдите в раздел Тема.
2. Откройте редактор Изменить HTML.
3. Перед закрывающим тегом </body> вставьте код:

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});
//]]>
</script>

4. Для старых стандартных тем нужно найти строку:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Если у вас новые темы Blogger: Contemp, Soho, Notable, Emporio, тогда нужно найти следующею строку:

<div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>

Замените ее следующей строкой:

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

5. Сохраните тему и проверьте, как работает. Если новый лайтбокс не срабатывает подключите библиотеки Jquery. В открывшейся статье сморите пункт 1).

6. Финальный штрих. В разделе Настройки - Сообщения, комментарии и настройки доступа - Показывать изображения в Lightbox ? Да переключите на Нет.

Переходим к просмотру видео:

Адаптивный 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 Twitter Vkontakte

Рекомендуем