Что такое 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='"post-body-" + data:post.id'>Если у вас новые темы Blogger: Contemp, Soho, Notable, Emporio, тогда нужно найти следующею строку:
<div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'> Замените ее следующей строкой:
<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>5. Сохраните тему и проверьте, как работает. Если новый лайтбокс не срабатывает подключите библиотеки Jquery. В открывшейся статье сморите пункт 1).
6. Финальный штрих. В разделе Настройки - Сообщения, комментарии и настройки доступа - Показывать изображения в Lightbox ? Да переключите на Нет.
Переходим к просмотру видео:
Адаптивный Lightbox на jquery
Прежде, чем рассказать вам, как добавить в свой блог или сайт адаптивный lightbox на jquery я напишу несколько строчек для тех, кто не знает, что это такое и для чего оно нужно и нужно ли вообще.
Что такое Lightbox
Lightbox - в переводе с английского означает светлая коробка или светлый ящик, в общем, что-то в этом роде. В веб-дизайне Lightbox отыгрывает роль подачи изображения. К примеру вы просматриваете статью в которой есть несколько изображений, если вы хотите посмотреть на это изображение в его полном размере вы, что делаете? Правильно кликаете по нему, и вот в это время когда оно открывается вместе с ним отрывается и Lightbox, который задает фон окна в котором появляется картинка и скажем так стиль появления этой картинки. К примеру сравните, как открывается изображения в разных лайтбоксах:- Обычный Lightbox - кликнете по заглавной картинке поста
- 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 > #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 == "item"'>
<script>
(function(a){a.fn.lightBox=function(p){p=jQuery.extend({overlayBgColor:"#000",overlayOpacity:0.9,fixedNavigation:false,imageLoading:"http://3.bp.blogspot.com/-PhHW03ckcTo/Uxz2KObEXKI/AAAAAAAAGdc/yIlxeHoSGrQ/s1600/loading.gif",imageBtnPrev:"http://3.bp.blogspot.com/-argbPLkMSYI/Uxz1cSp0BYI/AAAAAAAAGc8/CEVnfIEZcdA/s1600/prev-image.gif",imageBtnNext:"http://2.bp.blogspot.com/-eKmHc8KcGhg/Uxz1lTM4CoI/AAAAAAAAGdE/aqs71cp-J4M/s1600/next-image.gif",imageBtnClose:"http://3.bp.blogspot.com/-AaP8lP-PLP4/Uxz1wHeh-1I/AAAAAAAAGdM/B4g4ds7FSr8/s1600/close-image.gif",imageBlank:"http://4.bp.blogspot.com/-YAyF8nlnzyM/Uxz1579tqvI/AAAAAAAAGdU/qYDLC_j3T6k/s1600/blank.gif",containerBorderSize:10,containerResizeSpeed:400,txtImage:"Image",txtOf:"of",keyToClose:"c",keyToPrev:"p",keyToNext:"n",imageArray:[],activeImage:0},p);var i=this;function r(){o(this,i);return false}function o(v,u){a("embed, object, select").css({visibility:"hidden"});c();p.imageArray.length=0;p.activeImage=0;if(u.length==1){p.imageArray.push(new Array(v.getAttribute("href"),v.getAttribute("title")))}else{for(var t=0;t<u.length;t++){p.imageArray.push(new Array(u[t].getAttribute("href"),u[t].getAttribute("title")))}}while(p.imageArray[p.activeImage][0]!=v.getAttribute("href")){p.activeImage++}l()}function c(){a("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="'+p.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="'+p.imageBtnClose+'"></a></div></div></div></div>');var t=f();a("#jquery-overlay").css({backgroundColor:p.overlayBgColor,opacity:p.overlayOpacity,width:t[0],height:t[1]}).fadeIn();var u=h();a("#jquery-lightbox").css({top:u[1]+(t[3]/10),left:u[0]}).show();a("#jquery-overlay,#jquery-lightbox").click(function(){b()});a("#lightbox-loading-link,#lightbox-secNav-btnClose").click(function(){b();return false});a(window).resize(function(){var v=f();a("#jquery-overlay").css({width:v[0],height:v[1]});var w=h();a("#jquery-lightbox").css({top:w[1]+(v[3]/10),left:w[0]})})}function l(){a("#lightbox-loading").show();if(p.fixedNavigation){a("#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}else{a("#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}var t=new Image();t.onload=function(){a("#lightbox-image").attr("src",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("#lightbox-container-image-box").width();var y=a("#lightbox-container-image-box").height();var x=(w+(p.containerBorderSize*2));var v=(z+(p.containerBorderSize*2));var u=t-x;var A=y-v;a("#lightbox-container-image-box").animate({width:x,height:v},p.containerResizeSpeed,function(){g()});if((u==0)&&(A==0)){if(a.browser.msie){n(250)}else{n(100)}}a("#lightbox-container-image-data-box").css({width:w});a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({height:z+(p.containerBorderSize*2)})}function g(){a("#lightbox-loading").hide();a("#lightbox-image").fadeIn(function(){k();s()});q()}function k(){a("#lightbox-container-image-data-box").slideDown("fast");a("#lightbox-image-details-caption").hide();if(p.imageArray[p.activeImage][1]){a("#lightbox-image-details-caption").html(p.imageArray[p.activeImage][1]).show()}if(p.imageArray.length>1){a("#lightbox-image-details-currentNumber").html(p.txtImage+" "+(p.activeImage+1)+" "+p.txtOf+" "+p.imageArray.length).show()}}function s(){a("#lightbox-nav").show();a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({background:"transparent url("+p.imageBlank+") no-repeat"});if(p.activeImage!=0){if(p.fixedNavigation){a("#lightbox-nav-btnPrev").css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}else{a("#lightbox-nav-btnPrev").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}}if(p.activeImage!=(p.imageArray.length-1)){if(p.fixedNavigation){a("#lightbox-nav-btnNext").css({background:"url("+p.imageBtnNext+") right 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}else{a("#lightbox-nav-btnNext").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnNext+") right 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",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=="x")||(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)>p.activeImage){objNext=new Image();objNext.src=p.imageArray[p.activeImage+1][0]}if(p.activeImage>0){objPrev=new Image();objPrev.src=p.imageArray[p.activeImage-1][0]}}function b(){a("#jquery-lightbox").remove();a("#jquery-overlay").fadeOut(function(){a("#jquery-overlay").remove()});a("embed, object, select").css({visibility:"visible"})}function f(){var v,t;if(window.innerHeight&&window.scrollMaxY){v=window.innerWidth+window.scrollMaxX;t=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight>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&&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<w){pageHeight=w}else{pageHeight=t}if(v<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&&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<v)}return this.unbind("click").click(r)}})(jQuery);
$(document).ready(function(){
$('a[href$=jpg]:has(img)').lightBox();
$('a[href$=jpeg]:has(img)').lightBox();
$('a[href$=png]:has(img)').lightBox();
$('a[href$=gif]:has(img)').lightBox();
$('a[href$=bmp]:has(img)').lightBox();
});
</script>
</b:if>Затем сохраняете шаблон. Теперь в настройках нам нужно отключить lightbox, для этого переходим в раздел - Настройки - Сообщения и комментарии. В появившемся окне напротив строки:
- Показывать изображения в Lightbox ?
Вот и все, теперь можете радоваться новому Lightbox на jquery.