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




Коммент.

BLOGGER: 3
Loading...
Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Адаптивный Lightbox на jquery
Адаптивный Lightbox на jquery
Добавляем адаптивный Lightbox на jquery для изображений.
https://4.bp.blogspot.com/-uRvJfGWHhuE/Vweiqxh43fI/AAAAAAAAiug/26zqzxWJjAUCm0XkA2IxONSZmNOYs5thw/s640/%25D0%25B0%25D0%25B4%25D0%25B0%25D0%25BF%25D1%2582%25D0%25B8%25D0%25B2%25D0%25BD%25D1%258B%25D0%25B9-lightbox-jquery.jpg
https://4.bp.blogspot.com/-uRvJfGWHhuE/Vweiqxh43fI/AAAAAAAAiug/26zqzxWJjAUCm0XkA2IxONSZmNOYs5thw/s72-c/%25D0%25B0%25D0%25B4%25D0%25B0%25D0%25BF%25D1%2582%25D0%25B8%25D0%25B2%25D0%25BD%25D1%258B%25D0%25B9-lightbox-jquery.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2016/04/adaptivnyj-lightbox-na-jquery.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2016/04/adaptivnyj-lightbox-na-jquery.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy