Стильное портфолио на jQuery с Lightbox эффектом

Вне зависимости от тематики ресурса, рано или поздно каждому может пригодиться портфолио на сайте. Особенно такой элемент будет интересен профессиональным фотографам или дизайнерам интерьеров. Но, к сожалению, движок Joomla в первозданном своём виде мало что может предложить для реализации данной затеи. В большинстве случаев люди скачивают специальные расширения и хорошо, если они вас устраивают в том виде, в котором предлагают разработчики. Обычно часть контента урезано, а для того чтобы получить полноценный вариант, требуется выложить некую сумму. Так же встречаются и крупные расширения, вам нужно создать портфолио, а там много лишнего, что вам лично не нужно. Так почему же не создать своё собственное, подходящее к вашим требованиям? Давайте сделаем своими руками в обход движка, чтобы не забивать себе голову сложностью разработки компонентов и плагинов. Добавим особый скрипт, который будет отвечать за вывод полноразмерных картинок, а миниатюры выстроим в ряд, как в галереи, при помощи библиотеки jQuery. Под всё это будет отдельная страница, а в верхней части поместим небольшое меню, вдруг кому пригодиться. Для работы неважно, какую версию cms вы используете, так же какой шаблон по умолчанию выставлен.

портфолио на jQuery с Lightbox эффектом

1. Создание папок и добавление изображений

Первым делом необходимо создать на рабочем столе папку с названием portfolio-lightbox. Внутри будут располагаться все файлы, отвечающие за работу портфолио, а вот изображения поместим в подпапку с именем images. Найдите 10 изображений в jpg формате с размером 1920х1200px. Переименуйте их следующим образом: image-1, image-2 и т.д. Положить все картинки в папку images. Вот как должно выглядеть:

Создание папок и добавление изображений

2. Создаём страницу на html

Для того чтобы создать страницу на HTML нужно всего два файла index.html (отвечает за генерацию страницы в браузере) и style.css (визуальное оформление). Создав их, помещаем в нашу папку portfolio-lightbox.

Создаём страницу на html

Открываем в любом текстовом редакторе index.html и пишем в него это:

HTML код:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  5.     <title>Portfolio jQuery</title>
  6.  
  7.     <link rel="stylesheet" type="text/css" href="style.css">
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  9.     <script type="text/javascript" src="jquery-gallary.js"></script>
  10.     <script type="text/javascript" src="lightbox.min.js"></script>
  11. </head>
  12. <body>
  13.  
  14.     <br><br>
  15.     <div><a href="#">&amp;lt; BACK TO HOME</a></div>
  16.     <div><a href="#">MENU 1</a></div>
  17.     <div><a href="#">MENU 2</a></div>
  18.     <div><a href="#">MENU 3</a></div>
  19.     <div><a href="#">MENU 4</a></div>
  20.     <br><br>
  21.     <div id="images">
  22.             <span id="i1"><a href="images/image-1.jpg" rel="lightbox"><img src="images/image-1.jpg" /></a></span>
  23.             <span id="i2"><a href="images/image-2.jpg" rel="lightbox"><img src="images/image-2.jpg" /></a></span>
  24.             <span id="i3"><a href="images/image-3.jpg" rel="lightbox"><img src="images/image-3.jpg" /></a></span>
  25.             <span id="i4"><a href="images/image-4.jpg" rel="lightbox"><img src="images/image-4.jpg" /></a></span>
  26.             <span id="i5"><a href="images/image-5.jpg" rel="lightbox"><img src="images/image-5.jpg" /></a></span>
  27.             <span id="i6"><a href="images/image-6.jpg" rel="lightbox"><img src="images/image-6.jpg" /></a></span>
  28.             <span id="i7"><a href="images/image-7.jpg" rel="lightbox"><img src="images/image-7.jpg" /></a></span>
  29.             <span id="i8"><a href="images/image-8.jpg" rel="lightbox"><img src="images/image-8.jpg" /></a></span>
  30.             <span id="i9"><a href="images/image-9.jpg" rel="lightbox"><img src="images/image-9.jpg" /></a></span>
  31.             <span id="i10"><a href="images/image-10.jpg" rel="lightbox"><img src="images/image-10.jpg" /></a></span>
  32.     </div>
  33.  
  34. </body>
  35. </html>

Здесь подключили последнею библиотеку jQuery, таблицу стилей, два скрипта (о них позже). Ещё добавили наши изображения и создали небольшое меню из пяти пунктов, один из которых мы будем использовать для возврата на сайт. На 15 строке, там, где написано «BACK TO HOME», вставляем ссылку на главную страницу своего сайта. Так посетители смогут возвращаться обратно на ваш ресурс.

Теперь вставляем код в style.css:

CSS код:
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     background: #000000;
  5. }
  6. #images {
  7.     white-space: nowrap;
  8.     overflow: hidden;
  9.     font-size: 0;
  10.     line-height: 0;
  11. }
  12. #images span img {
  13.     margin: 0;
  14.     font-size: 15px;
  15.     width: inherit;
  16.     position: absolute;
  17.     height: inherit;
  18.     width: 100%;
  19.     height: 100%;
  20. }
  21. #images span {
  22.     display: inline-block;
  23.     position: relative;
  24.     margin: 5px;
  25.     box-shadow: 0px 0px 6px 1px #ffffff;
  26. }
  27. a img {
  28.     border: 0;
  29. }
  30. #images span img:hover {
  31.     box-shadow: 0px 0px 6px 1px #ffffff;
  32. }
  33. #bars {
  34.     background: #000;
  35.     width: 100%;
  36.     color: #fff;
  37.     font-weight: bold;
  38.     position: relative;
  39.     padding: 30px 0 30px 0 ;
  40.     z-index: 10000;
  41.     box-shadow: 0px 0px 40px rgba(0,0,0,1);
  42.     font-size: 56px;
  43.     text-align: center;
  44.     font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
  45. }
  46. #bars a {
  47.     opacity: 1 !important;
  48.     color: #fff;
  49.     font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
  50.     font-size: 20px;
  51.     text-decoration: none;
  52.     font-weight: bold;
  53. }
  54. .link-back {
  55.     font: bold 12px Arial, Helvetica, sans-serif;
  56.     text-decoration: none;
  57.     width: 160px;
  58.     text-align: center;
  59.     display: inline-block;
  60. }
  61. .link-back a {
  62.     text-decoration: none;
  63.     padding: 10px;
  64.     display: block;
  65.     background: #6f89b9;
  66.     color: #fff;
  67. }
  68. .lightboxOverlay {
  69.     position: absolute;
  70.     top: 0;
  71.     left: 0;
  72.     z-index: 9999;
  73.     background-color: #82959e;
  74.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  75.     opacity: 0.8;
  76.     display: none;
  77.     }
  78. .lightbox {
  79.     position: absolute;
  80.     left: 0;
  81.     width: 100%;
  82.     z-index: 10000;
  83.     text-align: center;
  84.     line-height: 0;
  85.     font-weight: normal;
  86.     }
  87. .lightbox .lb-image {
  88.     /*display: block;*/
  89.     height: auto;
  90.     width: auto;
  91.     -webkit-border-radius: 3px;
  92.     -moz-border-radius: 3px;
  93.     -ms-border-radius: 3px;
  94.     -o-border-radius: 3px;
  95.     border-radius: 3px;
  96.     }
  97. .lightbox a img {
  98.     border: none;
  99.     }
  100. .lb-outerContainer {
  101.     /*position: relative;*/
  102.     background-color: #000;
  103.     *zoom: 1;
  104.     /*width: 250px;*/
  105.     /*height: 250px;*/
  106.     margin: 0 auto;
  107.     -webkit-border-radius: 4px;
  108.     -moz-border-radius: 4px;
  109.     -ms-border-radius: 4px;
  110.     -o-border-radius: 4px;
  111.     border-radius: 8px;
  112.     }
  113.     .lb-outerContainer:after {
  114.         content: "";
  115.         display: table;
  116.         clear: both;
  117.         }
  118. .lb-container {
  119.     padding: 6px;
  120.     }
  121. .lb-dataContainer {
  122.     margin: 0 auto;
  123.     padding-top: 5px;
  124.     *zoom: 1;
  125.     width: 100%;
  126.     -moz-border-radius-bottomleft: 4px;
  127.     -webkit-border-bottom-left-radius: 4px;
  128.     border-bottom-left-radius: 4px;
  129.     -moz-border-radius-bottomright: 4px;
  130.     -webkit-border-bottom-right-radius: 4px;
  131.     border-bottom-right-radius: 4px;
  132.     }
  133.     .lb-dataContainer:after {
  134.         content: "";
  135.         display: table;
  136.         clear: both;
  137.         }
  138. .lb-data {
  139.     padding: 0 4px;
  140.     color: #bbbbbb;
  141.     }
  142. .lb-data .lb-details {
  143.     width: 85%;
  144.     float: left;
  145.     text-align: left;
  146.     line-height: 1.1em;
  147.     }
  148. .lb-data .lb-caption {
  149.     font-size: 13px;
  150.     font-weight: bold;
  151.     line-height: 1em;
  152.     }
  153. .lb-data .lb-number {
  154.     display: block;
  155.     clear: left;
  156.     padding-bottom: 1em;
  157.     font-size: 12px;
  158.     color: #999999;
  159.     }
  160. .lb-data .lb-close {
  161.     display: block;
  162.     float: right;
  163.     width: 30px;
  164.     height: 30px;
  165.     text-align: right;
  166.     outline: none;
  167.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  168.     opacity: 0.7;
  169.     }
  170.     .lb-data .lb-close:hover {
  171.         cursor: pointer;
  172.         filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  173.         opacity: 1;
  174.         }

Тут написаны стили не только для галереи, но и для lightbox эффекта (всплывающее окно с оригинальной картинкой).

3. Создаём скрипты

У нас буду два скрипта, первый это lightbox.min.js. Он отвечает за вывод всплывающего окна тех элементов, которые имеют значения rel=”lightbox” в тегах. Если обратите внимание на код в index.html, то увидите, что я выставил это значение всем изображениям. Вот какой вид имеют эти ссылки:

HTML код:
  1. <a href="images/image-1.jpg" rel="lightbox"><img src="images/image-1.jpg" /></a>

Ссылка состоит из двух частей:

<a href="images/image-1.jpg" rel="lightbox"> - картинка, которая будет открыта только во всплывающем окне после нажатия (за работу отвечает lightbox.min.js).

<img src="images/image-1.jpg" /> - миниатюра на странице (за показ и построение будет отвечать второй срипт jquery-gallary.js).

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

Создаём jquery-gallary.js, lightbox.min.js и бросаем их в папку portfolio-lightbox.

Создаём скрипты

В jquery-gallary.js вставляем код:

jQuery код:
  1. $(document).ready(function() {
  2.     var imageWidth = 384; // Ширина миниатюры
  3.     var imageHeight = 240; // Высота миниатюры
  4.     $('#images span').css({'width' : imageWidth, 'height' : imageHeight});
  5.     function imageNumber() { 
  6.         $('.appended').remove();
  7.         $('#images span').removeClass();
  8.         $('.wrapper').each(function() {
  9.             var wrapperContent = $(this).html();
  10.             $(this).replaceWith(wrapperContent);
  11.         });
  12.         var windowWidth = $(window).width(); 
  13.         var numberOfImages = ($("#images span").length);
  14.         var imagesPerRow = Math.ceil(windowWidth / imageWidth);
  15.         if(numberOfImages % imagesPerRow != 0) {
  16.             var numberOnRow = Math.round((1 - (numberOfImages/imagesPerRow % 1)) * imagesPerRow); 
  17.             var number = 0;
  18.             while(number <= numberOnRow) { 
  19.                  $('#i'+number).clone(true).appendTo($('#images')).attr('class', 'appended');
  20.                  ++number;
  21.             }
  22.             var nuAppended = $('.appended').length;
  23.             var nextA = parseFloat(numberOfImages)+1;
  24.             while(nuAppended > 0) {
  25.                 $('.appended').each(function() { 
  26.                     $(this).attr('id', 'i'+nextA);
  27.                     ++nextA;
  28.                     --nuAppended;
  29.                 });
  30.             }                        
  31.           }
  32.           var slices = $("#images span"); 
  33.           for(var i = 0; i < slices .length; i+=imagesPerRow) {
  34.               slices .slice(i, i+imagesPerRow).wrapAll("<div class='wrapper'></div>");
  35.           }
  36.     }
  37.     function hovering() {
  38.         $('#images .wrapper span img').hover(function() {
  39.             $(this).css({
  40.                 'width' : '150%',
  41.                 'height' : '150%',
  42.                 'z-index' : '7000'
  43.             });
  44.         }, function() {
  45.             $(this).css({
  46.                 'height' : '100%',
  47.                 'width' : '100%',
  48.                 'box-shadow' : 'inset 0px 0px 20px rgba(0,0,0,0.8)',
  49.                 'z-index' : '2000'
  50.             });
  51.         });
  52.         $('#images .wrapper:not(:first, :last) span:not(:first-child) img').hover(function() {    
  53.             $(this).css({
  54.                 'right' : '-25%',
  55.                 'bottom' : '-25%'
  56.             });
  57.         }, function() {
  58.             $(this).css({
  59.                 'z-index' : '2000',
  60.                 'right' : '0',
  61.                 'bottom' : '0'
  62.             });
  63.         });
  64.         $('#images .wrapper:first span:not(:first) img').hover(function() {
  65.             $(this).css({
  66.                 'right' : '-25%',
  67.                 'top' : '0'
  68.             });
  69.         }, function() {
  70.             $(this).css({
  71.                 'z-index' : '2000',
  72.                 'right' : '0',
  73.                 'bottom' : '0'
  74.             });
  75.         });
  76.         $('#images .wrapper:first span:first-child img').hover(function() {
  77.             $(this).css({
  78.                 'left' : '0',
  79.                 'top' : '0'
  80.             });
  81.         }, function() {    
  82.             $(this).css({
  83.                 'left' : '0',
  84.                 'top' : '0'
  85.             });
  86.         });
  87.         $('#images .wrapper:not(:first, :last) span:first-child img').hover(function() { 
  88.             $(this).css({
  89.                 'left' : '0',
  90.                 'top' : '-25%'
  91.             });
  92.         }, function() {
  93.             $(this).css({
  94.                 'left' : '0',
  95.                 'top' : '0'
  96.             });    
  97.         });
  98.         $('#images .wrapper:last span img:not(:first)').hover(function() {
  99.             $(this).css({
  100.                 'left' : '-25%',
  101.                 'top' : '-50%'
  102.             });
  103.         }, function() {
  104.             $(this).css({
  105.                 'left' : '0',
  106.                 'top' : '0',
  107.             });    
  108.         });
  109.         $('#images .wrapper:last span:first img').hover(function() {
  110.             $(this).css({
  111.                 'left' : '0',
  112.                 'top' : '-50%'
  113.             });
  114.         }, function() {
  115.             $(this).css({
  116.                 'left' : '0',
  117.                 'top' : '0'
  118.             });        
  119.         });
  120.     }
  121.     imageNumber();
  122.     hovering();
  123.     $(window).resize(function() {
  124.         imageNumber();
  125.         hovering();
  126.     });
  127. });

Вверху есть две строчки с imageWidth и imageHeight, они нужны для выбора размера миниатюр. Сейчас стоит 384х240px – такое значение специально выставлено для изображений с размером 1920x1200px. При использовании других вариантов, данные значения нужно менять.

Теперь в lightbox.min.js пишем этот большой код:

jQuery код:
  1. (function(){
  2.     var b,d,c;b=jQuery;c=(function(){function b(){
  3.         this.fadeDuration=500;
  4.         this.fitImagesInViewport=true; //false открыть изображение в полный размер
  5.         this.resizeDuration=700;
  6.         this.showImageNumberLabel=true; //false скрыть количество изображений на странице
  7.         this.wrapAround=true //false отключить повтор изображений на странице
  8.         }
  9.  
  10.     b.prototype.albumLabel=function(b,c){
  11.     return"Image "+b+" of "+c};
  12.     return b})();
  13.         d=(function(){function c(b){
  14.             this.options=b;this.album=[];
  15.             this.currentImageIndex=void 0;
  16.             this.init()
  17.         }
  18.  
  19.     c.prototype.init=function(){
  20.         this.enable();
  21.         return this.build()};
  22.  
  23.     c.prototype.enable=function(){
  24.         var c=this;return b('body')
  25.             .on('click','a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]',    function(d){c.start(b(d.currentTarget))
  26.             ;return false})
  27.         };
  28.  
  29.     c.prototype.build=function(){
  30.         var c=this;b("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div></div></div></div>")
  31.         .appendTo(b('body'));
  32.         this.$lightbox=b('#lightbox');
  33.         this.$overlay=b('#lightboxOverlay');
  34.         this.$outerContainer=this.$lightbox.find('.lb-outerContainer');
  35.         this.$container=this.$lightbox.find('.lb-container');
  36.         this.containerTopPadding=parseInt(this.$container.css('padding-top'),10);
  37.         this.containerRightPadding=parseInt(this.$container.css('padding-right'),10);
  38.         this.containerBottomPadding=parseInt(this.$container.css('padding-bottom'),10);
  39.         this.containerLeftPadding=parseInt(this.$container.css('padding-left'),10);
  40.         this.$overlay.hide().on('click',function(){c.end();return false});
  41.         this.$lightbox.hide().on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});
  42.         this.$outerContainer.on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});
  43.         this.$lightbox.find('.lb-prev').on('click',function(){if(c.currentImageIndex===0){c.changeImage(c.album.length-1)}else{c.changeImage(c.currentImageIndex-1)}return false});
  44.         this.$lightbox.find('.lb-next').on('click',function(){if(c.currentImageIndex===c.album.length-1){c.changeImage(0)}else{c.changeImage(c.currentImageIndex+1)}return false});
  45.  
  46.     return this.$lightbox.find('.lb-loader, .lb-close').on('click',function(){c.end();
  47.     return false})};c.prototype.start=function(c){var f,e,j,d,g,n,o,k,l,m,p,h,i;b(window).on("resize",this.sizeOverlay);b('select, object, embed').css({visibility:"hidden"});
  48.  
  49.         this.$overlay.width(b(document).width()).height(b(document).height()).fadeIn(this.options.fadeDuration);
  50.         this.album=[];g=0;j=c.attr('data-lightbox');
  51.             if(j){h=b(c.prop("tagName")+'[data-lightbox="'+j+'"]');for(d=k=0,m=h.length;k<m;d=++k){e=h[d];
  52.         this.album.push({link:b(e).attr('href'),title:b(e).attr('title')});
  53.  
  54.     if(b(e).attr('href')===c.attr('href')){g=d}}}else{if(c.attr('rel')==='lightbox'){
  55.         this.album.push({link:c.attr('href'),title:c.attr('title')})}else{i=b(c.prop("tagName")+'[rel="'+c.attr('rel')+'"]');
  56.         for(d=l=0,p=i.length;l<p;d=++l){e=i[d];
  57.         this.album.push({link:b(e).attr('href'),title:b(e).attr('title')});
  58.  
  59.     if(b(e).attr('href')===c.attr('href')){g=d}}}}f=b(window);o=f.scrollTop()+f.height()/10;n=f.scrollLeft();
  60.         this.$lightbox.css({top:o+'px',left:n+'px'}).fadeIn(this.options.fadeDuration);
  61.         this.changeImage(g)};
  62.  
  63.     c.prototype.changeImage=function(f){var d,c,e=this;
  64.         this.disableKeyboardNav();d=this.$lightbox.find('.lb-image');
  65.         this.sizeOverlay();
  66.         this.$overlay.fadeIn(this.options.fadeDuration);b('.lb-loader').fadeIn('slow');
  67.         this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
  68.         this.$outerContainer.addClass('animating');
  69.             c=new Image();
  70.             c.onload=function(){var m,g,h,i,j,k,l;d.attr('src',e.album[f].link);m=b(c);d.width(c.width);d.height(c.height);
  71.  
  72.         if(e.options.fitImagesInViewport){
  73.             l=b(window).width();
  74.             k=b(window).height();
  75.             j=l-e.containerLeftPadding-e.containerRightPadding-20;
  76.             i=k-e.containerTopPadding-e.containerBottomPadding-110;
  77.                 if((c.width>j)||(c.height>i)){if((c.width/j)>(c.height/i)){h=j;
  78.                 g=parseInt(c.height/(c.width/h),10);
  79.                 d.width(h);
  80.                 d.height(g)}else{g=i;
  81.                 h=parseInt(c.width/(c.height/g),10);
  82.                 d.width(h);
  83.                 d.height(g)}}
  84.         }
  85.  
  86.     return e.sizeContainer(d.width(),d.height())};c.src=this.album[f].link;
  87.     this.currentImageIndex=f};
  88.  
  89.     c.prototype.sizeOverlay=function(){return b('#lightboxOverlay').width(b(document).width()).height(b(document).height())};
  90.     c.prototype.sizeContainer=function(f,g){var b,d,e,h,c=this;
  91.         h=this.$outerContainer.outerWidth();
  92.         e=this.$outerContainer.outerHeight();
  93.         d=f+this.containerLeftPadding+this.containerRightPadding;
  94.         b=g+this.containerTopPadding+this.containerBottomPadding;
  95.         this.$outerContainer.animate({width:d,height:b},
  96.         this.options.resizeDuration,'swing');
  97.  
  98.     setTimeout(function(){
  99.         c.$lightbox.find('.lb-dataContainer').width(d);
  100.         c.$lightbox.find('.lb-prevLink').height(b);
  101.         c.$lightbox.find('.lb-nextLink').height(b);
  102.         c.showImage()},
  103.         this.options.resizeDuration)};
  104.  
  105.     c.prototype.showImage=function(){
  106.         this.$lightbox.find('.lb-loader').hide();
  107.         this.$lightbox.find('.lb-image').fadeIn('slow');
  108.         this.updateNav();
  109.         this.updateDetails();
  110.         this.preloadNeighboringImages();
  111.         this.enableKeyboardNav()};
  112.  
  113.     c.prototype.updateNav=function(){
  114.             this.$lightbox.find('.lb-nav').show();
  115.         if(this.album.length>1){if(this.options.wrapAround){
  116.             this.$lightbox.find('.lb-prev, .lb-next').show()}else{if(
  117.             this.currentImageIndex>0){this.$lightbox.find('.lb-prev').show()}
  118.         if(this.currentImageIndex<this.album.length-1){
  119.             this.$lightbox.find('.lb-next').show()}}}};
  120.  
  121.     c.prototype.updateDetails=function(){var b=this;
  122.         if(typeof this.album[this.currentImageIndex].title!=='undefined'&amp;&amp;this.album[this.currentImageIndex].title!==""){
  123.             this.$lightbox.find('.lb-caption').html(
  124.             this.album[this.currentImageIndex].title).fadeIn('fast')}if(
  125.             this.album.length>1&amp;&amp;this.options.showImageNumberLabel){
  126.             this.$lightbox.find('.lb-number').text(
  127.             this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn('fast')}else{
  128.             this.$lightbox.find('.lb-number').hide()}
  129.             this.$outerContainer.removeClass('animating');
  130.             this.$lightbox.find('.lb-dataContainer').fadeIn(
  131.             this.resizeDuration,function(){return b.sizeOverlay()})};
  132.  
  133.     c.prototype.preloadNeighboringImages=function(){var c,b;if(
  134.     this.album.length>this.currentImageIndex+1){c=new Image();c.src=this.album[this.currentImageIndex+1].link}if(
  135.     this.currentImageIndex>0){b=new Image();b.src=this.album[this.currentImageIndex-1].link}};
  136.  
  137.     c.prototype.enableKeyboardNav=function(){b(document).on('keyup.keyboard',b.proxy(this.keyboardAction,this))};
  138.     c.prototype.disableKeyboardNav=function(){b(document).off('.keyboard')};
  139.     c.prototype.keyboardAction=function(g){var d,e,f,c,b;d=27;e=37;f=39;b=g.keyCode;c=String.fromCharCode(b).toLowerCase();
  140.         if(b===d||c.match(/x|o|c/)){
  141.         this.end()}else if(c==='p'||b===e){if(
  142.         this.currentImageIndex!==0){
  143.         this.changeImage(this.currentImageIndex-1)}}else if(c==='n'||b===f){if(
  144.         this.currentImageIndex!==this.album.length-1){this.changeImage(this.currentImageIndex+1)}}};
  145.  
  146.     c.prototype.end=function(){
  147.         this.disableKeyboardNav();b(window).off("resize",this.sizeOverlay);
  148.         this.$lightbox.fadeOut(this.options.fadeDuration);
  149.         this.$overlay.fadeOut(this.options.fadeDuration);
  150.         return b('select, object, embed').css({visibility:"visible"})};
  151.         return c})();
  152.         b(function(){var e,b;b=new c();
  153.         return e=new d(b)})
  154.  
  155.     }
  156. )
  157. .call(this);

Для того чтобы впоследствии закрыть всплывающее окно, необходимо нажать на любое свободное место.

4. Бросаем на сервер

На этом этапе портфолио готово, если открыть index.html в браузере вы увидите полностью рабочую страницу. Здесь можно посмотреть ДЕМО. Но нам ведь нужно чтобы посетители сайта смогли тоже увидеть её, поэтому, папку portfolio-lightbox с уже готовыми файлами бросаем на сервер в корень сайта (это место где лежат configuration.php и htaccess.txt).

Бросаем на сервер

5. Настраиваем меню

Открываем панель управления и в основном меню создаём ещё один пункт с заголовком Portfolio. Тип пункта меню выбираем «системные ссылки – внешний url». Вставляем ссылку такого типа http://вашсайт.ru/portfolio-lightbox/index.html.

Настраиваем меню

Домен используем свой. Теперь гости сайта смогут заходить в ваше портфолио через этот пункт в основном меню.

Стильное портфолио (ссылка)

Заключение

У такого способа есть очевидные плюсы. Для создания данного портфолио мы использовали всего четыре файла, два из которых скрипты, когда как при разработке сложного компонента ушло бы куда больше времени и сил. Меняя таблицу стилей и выбирая размер миниатюр под свои изображения, можно создать по-настоящему уникальную галерею. Меню вставил только для того, чтобы вы могли использовать его в качестве навигации. При желании их можно удалить или создайте ещё страницы, а пункты используйте для перехода между разного рода портфолио.

 
4.4375 1 1 1 1 1 (Оценок: 224)
4.4375 224
Опубликовано: 11-02-2017

Соседние материалы

<Назад Вперёд>

Вы не зарегистрированы, чтобы оставлять комментарии.