Галерея ввиде портфолио. Плагин для создания портфолио Плагин jquery для портфолио

В этом уроке мы напишем красивое портфолио, с использованием jQuery, CSS3 и плагина Timeline. Timeline - это jquery плагин, который специализируется на отображении хронологии событий. В этом портфолио вы можете вставлять разные типы медиа данных: твиты, видео, карты, картинки, записи, и после расставлять их в соответствии с датой. Если поработать над дизайном, то получится красивое портфолио, которое будет отображать ваши интересы и работы.

HTML

Стандартно, Timeline плагин содержит легкую цветовую схему. Это очень удобно и необходимо в большинстве случаев. Хотя, для нашего портфолио, темный дизайн более элегантен. Поэтому мы оптимизируем его так, как нам нравиться.

Для начала давайте посмотрим на базовую html разметку страницы:

index. html

Timeline Portfolio | Tutorialzine Demo

В head секции, мы имеем стили плагина - timeline.css и styles.css, которые будут содержать наши дизайнерские решения. В конце страницы мы подключаем jQuery библиотеку, timeline плагин и scripts.js, который будет инициализировать работу плагина.

Когда мы вызываем плагин, он находит DIV блок с ID=timeline. Внутрь блока монтирует html разметку, после чего страница становиться следующей:

Johnny B Goode

Designer & Developer

March 2009 My first experiment in time-lapse photography

Nature at its finest in this video.

March 2010 Logo Design for a pet shop July 2009 Another time-lapse experiment

Так как мы будем вносить некоторые изменения в CSS стили, код выше дает лучше понять, как устроена структура портфолио. Заметьте, мы не будем изменять стандартные стили плагина, мы только перепишем некоторые атрибуты в собственном css файле. Это дает нам преимущество в последующих изменениях дизайна портфолио.

Написание CSS мы будем обсуждать подробно, но немного позже. Единственное, нам придется переписать все указания поверх существующих, но с этим разберемся далее.

jQuery

Чтобы инициализировать плагин, нам нужно вызвать VMM.Timeline() метод:

$(function(){ var timeline = new VMM.Timeline(); timeline.init("data.json"); });

Метод init принимает простой аргумент - ресурс данных. Это может быть json файл, как в коде выше, или Google spreadsheet.

Чтобы более подробно узнать, как устроен data. json, скачайте исходники урока. Здесь нет ничего сложно, нет необходимости описывать структуру этого файла.

CSS

С помощью Firebug HTML Inspector, можно определить селекторы к HTML элементу, которые прописаны в timeline.css. После чего, используя такие же селекторы, можно присвоить свои стили в файле styles.css. В некоторых случаях, я использовал ! important , чтобы придать приоритет собственным стилям.

Все изменения, которые вы увидите ниже, дописаны вручную с помощью CSS стилей. Остальные элементы стилей установлены плагином по умолчанию.

Первым делом, после стилизации страницы в общем, мы изменим фон портфолио:

#timeline{ background:none; } /* The individual events in the slider */ .slider .slider-container-mask .slider-container{ background:none; } /* Setting a custom background image */ #timeline div.navigation{ background: url("../img/timeline_bg.jpg") repeat; border-top:none; }

Чтобы создать 3D эффект, в навигационном блоке, нам придется использовать . Элемент:after - это темная верхняя часть, он использует линейный градиент, чтобы придать эффект объема.

#timeline div.navigation:before{ position:absolute; content:""; height:40px; width:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") repeat; } #timeline div.navigation:after{ position:absolute; content:""; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%); }

#timeline div.timenav-background{ background-color:rgba(0,0,0,0.4) !important; } #timeline .navigation .timenav-background .timenav-interval-background{ background:none; } #timeline .top-highlight{ background-color:transparent !important; }

Стилизируем zoom-in и zoom-out кнопки на тулбаре:

#timeline .toolbar{ border:none !important; background-color: #202222 !important; } #timeline .toolbar div{ border:none !important; }

Стиль шкалы внизу:

#timeline .navigation .timenav .time .time-interval-minor .minor{ margin-left:-1px; } #timeline .navigation .timenav .time .time-interval div{ color: #CCCCCC; }

Стрелки на предыдущее и следующее событие:

Slider .nav-previous .icon { background: url("timeline.png") no-repeat scroll 0 -293px transparent; } .slider .nav-previous,.slider .nav-next{ font-family:"Segoe UI",sans-serif; } .slider .nav-next .icon { background: url("timeline.png") no-repeat scroll 72px -221px transparent; width: 70px !important; } .slider .nav-next:hover .icon{ position:relative; right:-5px; } .slider .nav-previous:hover, .slider .nav-next:hover { color: #666; cursor: pointer; } #timeline .thumbnail { border: medium none; }

Фон загрузки:

#timeline .feedback { background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; border:none; } #timeline .feedback div{ color: #AAAAAA; font-size: 14px !important; font-weight: normal; }

#timeline .slider-item h2, #timeline .slider-item h3{ font-family:"Antic Slab","Segoe UI",sans-serif; } #timeline .slider-item h2{ color:#fff; } #timeline .slider-item p{ font-family:"Segoe UI",sans-serif; } #timeline .slider-item img, #timeline .slider-item iframe{ border:none; }

В конце, мы изменим обложку. Я использовал nth-child(1), чтобы ссылаться только на первый слайд (обложку), который содержит назвние и описание портфолио. Эти данные храняться в JSON файле.

/* Customizing the first slide - the cover */ #timeline .slider-item:nth-child(1) h2{ font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:10px 5px 5px 20px; position:relative; right:-60px; z-index:10; } #timeline .slider-item:nth-child(1) p i{ font:normal normal 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; } #timeline .slider-item:nth-child(1) p .c1{ color:#1bdff0; } #timeline .slider-item:nth-child(1) p .c2{ color:#c92fe6; } #timeline .slider-item:nth-child(1) .media-container { left: -30px; position: relative; z-index: 1; } #timeline .slider-item:nth-child(1) .credit{ text-align: center; }

Осталось только открыть timeline.psd, который прикреплен в файле плагина, и изменить цвет некоторых иконок. Я добавил все необходимые файлы в исходники к этому уроку. На этом создание jQuery портфолио со стилизацией на CSS3 завершено!

Что с этим делать?

Вы можете использовать это портфолио не только для отображения последних проектов, но также интересных и важных моментов вашей карьеры. Это как мини дневник вашей жизни! Надеюсь, вам понравился этот урок. Поделитесь своими мыслями в комментариях ниже.

Грамотно составленное и визуально оформленное , в нашем случае, это отдельная страница, является важным элементом личного сайта или блога, любого специалиста, достигшего определенного уровня мастерства в своей профессиональной деятельности.
Страница портфолио, это такой своеобразный отчет, или визуальное резюме, с помощью которого, вы сможете наглядно продемонстрировать читателям и посетителям сайта/блога, набор наиболее удачных реализованных работ, будь-то фотографии, статьи, публикации, элементы дизайна и т.п.
У меня такой странички нет и, это с моей стороны, досадное упущение, которое нужно, как можно скорее исправить, над чем собственно в данный момент и работаю.
На бескрайних просторах глобальной сети, можно найти огромное количество готовых шаблонов страниц для организации портфолио, и разнообразие таких страничек, по-настоящему впечатляет. Так что, кому в лом вникать во все тонкости веб-дизайна и разработки, всегда смогут найти подходящий для себя вариант. Ну, а для страждущих познаний в сайтостроительстве, предлагаю разобрать пример адаптивной верстки, простой страницы портфолио, с фильтрацией выполненных работ по категориям, выполненной на , разбавленной привлекательным эффектом перехода, с элементами анимации .

Макет странички, исполняемый javascript и некоторые элементы оформления, выдал «на гора», замечательный веб-дизайнер и разработчик Kevin Liew (queness.com). При выборе оптимального решения, для меня было важно, это простота исполнения, функциональность плагина jQuery, корректная работа во всех современных браузерах, и учитывая всевозрастающую популярность использования различных мобильных устройств, для интернет-серфинга, адаптивность дизайна будущей страницы. Никаких вычурных, дизайнерских наворотов и тяжеловесных плагинов.

Базовый макет состоит из двух основных элементов пользовательского интерфейса, которые нам предстоит построить, это навигации по вкладкам для фильтрации категорий представленных работ, и сама сетка миниатюр с эффектом всплывающей подписи при наведении.
Для начала, чтобы все в итоге заработало, будет необходим jQuery не ниже версии 1.7.0. Если он у вас еще не подключен, то добавьте следующую строку перед тегом :

Запустите плагин MixItUp в работу, этот код вставьте после вышеуказанных файлов:

< script type= "text/javascript" > $(function () { var filterList = { init: function () { $("#portfoliolist" ) . mixitup({ targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , easing: "snap" , // call the hover effect onMixEnd: filterList. hoverEffect() } ) ; } , hoverEffect: function () { $("#portfoliolist .portfolio" ) . hover( function () { $(this) . find(".label" ) . stop() . animate({ bottom: 0 } , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate({ top: - 30 } , 500 , "easeOutQuad" ) ; } , function () { $(this) . find(".label" ) . stop() . animate({ bottom: - 40 } , 200 , "easeInQuad" ) ; $(this) . find("img" ) . stop() . animate({ top: 0 } , 300 , "easeOutQuad" ) ; } ) ; } } ; filterList. init() ; } ) ;

$(function () { var filterList = { init: function () { $("#portfoliolist").mixitup({ targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing: "snap", // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { $("#portfoliolist .portfolio").hover(function () { $(this).find(".label").stop().animate({bottom: 0}, 200, "easeOutQuad"); $(this).find("img").stop().animate({top: -30}, 500, "easeOutQuad"); }, function () { $(this).find(".label").stop().animate({bottom: -40}, 200, "easeInQuad"); $(this).find("img").stop().animate({top: 0}, 300, "easeOutQuad"); }); } }; filterList.init(); });

Отдельно рассматривать все опции плагина, смысла нет, по умолчанию выставлен довольно оптимальный вариант. Ну, если уж кого вставит на эксперименты с параметрами, пожалуйста, все в ваших силах.

Для формирования макета страницы и внешнего вида элементов, подключаете к документу парочку файлов . , один для базовых стилей, обзовем его например: layout.css и еще один маленький CSS файл normalize.css , для обеспечения лучшей согласованности браузеров в стандартном оформлении элементов:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Теперь разберем все по порядку, по возможности без лишней воды, доступно и понятно, на родном, многострадальном нашем языке.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" > Все < li>< span class = "filter" data- filter= "app" > Приложения < li>< span class = "filter" data- filter= "card" > Визитки < li>< span class = "filter" data- filter= "icon" > Иконки < li>< span class = "filter" data- filter= "logo" > Логотип < li>< span class = "filter" data- filter= "web" > Веб- Дизайн

• Все
• Приложения
• Визитки
• Иконки
• Логотип
• Веб-Дизайн

На панели навигации, размещаем весь список работ, разбитый на категории. Нам необходимо каждую категорию портфолио через атрибут data-cat связать с тем или иным пунктом панели навигации в соответствии со значением в атрибуте data-filter . Путем сопоставления значений data-filter с data-cat , и будет выполняться фильтрация элементов портфолио по категориям.
Кроме этого, добавим к миниатюре, спрятанную до поры до времени, небольшую панель с названием работы и заголовком категории, всплывающую только при наведении на картинку. А чтобы легче сформировать внешний вид всей этой конструкции в CSS, пропишем соответствующие классы элементам:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" > Хостинг Beget. Ru < span class = "text-category" > Логотип < div class = "label-bg" > .........

Хостинг Beget.Ru Логотип .........

Обратите внимание, что вы можете добавить ссылки к картинке или непосредственно в подпись, для того чтобы пользователь смог в полном объеме лицезреть все ваши труды.

CSS

Теперь, тихим сапом, переходим к самому интересному, к формированию в CSS общих стилей пользовательского интерфейса нашей странички портфолио и адаптивной её версии. В статье укажу лишь базовые (по умолчанию) значения, то есть без каких-либо фоновых картинок и подключенных шрифтов, все это, кому оно надо, можно увидеть в демо, или найти в архиве с исходниками.

.container { position : relative ; width : 960px ; margin : 0 auto ; /* Вы сможете видеть цепь переходов при изменении размеров окна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition : all 1s ease; } #filters { margin : 1% ; padding : 0 ; list-style : none ; } #filters li { float : left ; } #filters li span { display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* добавляем немного тени для текста */ text-shadow : 1px 1px #FFFFFF ; cursor : pointer ; } /* изменяем фон категории при наведении */ #filters li span: hover { background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; } /* фон активного пункта категории */ #filters li span.active { background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; } #portfoliolist .portfolio { -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; width : 23% ; margin : 1% ; display : none ; float : left ; overflow : hidden ; } .portfolio-wrapper { overflow : hidden ; position : relative !important; background : #666 ; cursor : pointer ; } .portfolio img { max-width : 100% ; position : relative ; } /* по умолчанию подписи скрыты */ .portfolio .label { position : absolute ; width : 100% ; height : 40px ; bottom : -40px ; } .portfolio .label-bg { background : rgb (62 , 151 , 221 ) ; width : 100% ; height : 100% ; position : absolute ; top : 0 ; left : 0 ; } .portfolio .label-text { color : #fff ; position : relative ; z-index : 500 ; padding : 5px 8px ; } .portfolio .text-category { display : block ; font-size : 9px ; }

Container { position: relative; width: 960px; margin: 0 auto; /* Вы сможете видеть цепь переходов при изменении размеров окна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #filters { margin:1%; padding:0; list-style:none; } #filters li { float:left; } #filters li span { display: block; padding:5px 20px; text-decoration:none; color:#666; /* добавляем немного тени для текста */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; } /* изменяем фон категории при наведении */ #filters li span:hover { background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; } /* фон активного пункта категории */ #filters li span.active { background: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; } .portfolio-wrapper { overflow:hidden; position: relative !important; background: #666; cursor:pointer; } .portfolio img { max-width:100%; position: relative; } /* по умолчанию подписи скрыты */ .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: rgb(62, 151, 221); width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; }

Во второй части, прямо в этой же таблице стилей, с помощью нескольких медиа запросов создадим альтернативные секции CSS. Чтобы макет нашей страницы корректно отображался на экранах различных мобильных устройств, добавим и альтернативные правила CSS для разных экранов в эти секции. Тем самым мы запросто переопределяем любые правила, установленные ранее в нашей CSS таблице для обычных браузеров и добьемся той самой, вожделенной адаптивности.

/* Планшет */ @media only screen and (min-width : 768px ) and (max-width : 959px ) { .container { width : 768px ; } } /* Мобильный - Примечание: Дизайн для ширины 320px*/ @media only screen and (max-width : 767px ) { .container { width : 95% ; } #portfoliolist .portfolio { width : 48% ; margin : 1% ; } } /* Мобильный - Примечание: Дизайн для ширины 480px */ @media only screen and (min-width : 480px ) and (max-width : 767px ) { .container { width : 70% ; } }

/* Планшет */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } } /* Мобильный - Примечание: Дизайн для ширины 320px*/ @media only screen and (max-width: 767px) { .container { width: 95%; } #portfoliolist .portfolio { width:48%; margin:1%; } } /* Мобильный - Примечание: Дизайн для ширины 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 70%; } }

Вот и все. Наша замечательная страничка под емким названием «Портфолио» готова, остается лишь наполнить её своими не менее замечательными и выдающимися работами, и выставить на обозрение всему миру. Можно еще по тихому, скромно так, гордиться собой. Главное не переусердствовать в этом деле.
Смотрите еще раз пример и при необходимости забирайте исходники, на досуге, в тихой домашней обстановке, сможете довести до совершенства эту работу.

При создании урока использовался материал: . Оригинальная, девственно чистая, только что из под пера автора, страница портфолио, находится там же.

Удачи всем и с пользой для тела, провести остатки короткого лета!

by Dmitry Semenov
is a jQuery image gallery and content slider plugin. It’s completely responsive, touch-friendly and has modular architecture that allows you include only features that you need to optimize file size and performance.

by Andy – The Coffeescripter
A highly customizable gallery/showcase plugin for jQuery.

by Trent
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.

Tonic Gallery – jQuery XML Portfolio Gallery | $6

by Aino
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

by CatchMyFame
The other day I went looking for a simple way using jQuery to fade between a set of images on a page. So, being a coder, I set out to create my own plugin.

by Thomas Kahn
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps.

by Victor Zambrano – frwrd.net
Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

by Caspar David Friedrich
EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures.

by Arnault Pachot
A multi-format carousel for jQuery, Non obstrusive and accessible portfolio supporting multiple media: photos, video (flv), audio (mp3). This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

The Wall – Media Gallery – jQuery powered | $5

by Stefan Petre
Another image gallery plugin with space effect, very light and simple plugin.

by Moreno Di Domenico
jmFullWall is a jQuery plugin for the creation of an impressive portfolio.

by Fabrizio Calderan
Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.

by Cody
The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only.

VION – jQuery Image Gallery Plugin | $7

by Malihu
A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

An experimental web layout where several image columns get animated out when a menu item is clicked.The idea is based on the current trend of a grid layout where the columns are animated. In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.

Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.

Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.

Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.

Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax .

DoFilter is a Full Responsive Bootstrap Multipurpose Filtering and Shorting plugin built on Latest Version of Bootstrap Framework (v3.3.7), HTML5, CSS3 and jQuery. Its wonderful features can be used to Filtering and Shorting your website content as like Portfolio, Service, Team, Blog, Products, Pricing, FAQ etc. Also you can customize it for Filtering and Shorting any your website content.

• 19 Different Style Isotope Filtering
• Grid and Masonry Filtering and Shorting
• Lightbox Image Gallery
• Image Hover Effect
• W3C Valid HTML Code
• HTML5 ,CSS3 & jQuery
• 100% Responsive & Mobile-Friendly Layout

Используется jQuery плагин jmFullWall для получения действительно впечатляющих портфолио из фотографий.

Требования

• jQuery 1.4+
• jquery.imgpreload.js (thanks to Dimas Begunoff)
• jquery.imagepanner.js (thanks to Dynamic Drive)
• jmFullWall.js

Совместимость

• Mozilla Firefox
• Google Chrome
• Safari
• Opera

HTML

Для Демо 4

res/img/slide/1.jpg res/img/slide/1.jpg Audi Locus Audi Locus res/img/slide/2.jpg res/img/slide/2.jpg Porsche Supercar Porsche Supercar res/img/slide/3.jpg res/img/slide/3.jpg Ford GT Ford GT res/img/slide/4.jpg res/img/slide/4.jpg Lamborghini Murcielago Lamborghini Murcielago res/img/slide/5.jpg res/img/slide/5.jpg Nissan R390 GT1 Nissan R390 GT1 res/img/slide/6.jpg res/img/slide/6.jpg Porsche 911 GT3 RS Porsche 911 GT3 RS

CSS

Подключаем файл стилей:

JS

Подключаем скрипты:

$(function(){ $("#wall").jmFullWall({ itemsForRow: 5, itemTransition: "slideDown", itemTransitionSpeed: 150, detailTransitionIn: "slideDown", detailTransitionOut: "slideUp" }); });

Опции

• itemTransition :fadeIn , Эффект появления миниатюр. Может быть установлен на "fadeIn", "show" или "slideDown".
• itemTransitionSpeed :200 , Скорость появления миниатюр. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• itemsForRow :5 , Сколько элементов в строке.
• itemsBtnNext :jmFullWall-next , Название класса для кнопки "Вперед".
• itemsBtnPrev :jmFullWall-prev , Название класса для кнопки "Назад".
• itemsBtnClose :jmFullWall-close , Название класса для кнопки "Закрыть".
• detailTransitionIn :fadeIn , Эффект при открытии изображения. Может быть "fadeIn", "show" или "slideDown".
• detailTransitionInSpeed :500 , Скорость открытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• detailTransitionOut :fadeOut , Эффект при закрытии изображения. Может быть "fadeOut", "hide" или "slideUp".
• detailTransitionOutSpeed :500 , Скорость закрытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• showTooltip :true , Включить подсказки, когда изображение полностью загрузится.
• imgPanning :true , Включить панорамирование изображения, если режим полноэкранный.Enable the panning of the image when is in fullscreen mode.
• imgPanningCenter :true , Центрировать изображение, если режим полноэкранный.
• imgPanningZoom :true , Включить опцию увеличения, если режим полноэкранный.