Фотогалерея на нумерованном списке с использованием jQuery TN3 Gallery
На странице демо-версии вы сможете посмотреть работу так называемой версии Lite, упрощенного варианта фотогалереи, которую разрешил для бесплатного скачивания со своего сайта.
Доступны также версии Pro и Multi-site, но они платные.
Как же подключить данную фотогалерею на страницу сайта?
Так как галерея использует в своей работе , естественно нам нужно подключить эту библиотеку в секции HEAD
Code
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- include tn3 plugin -->
<script type="text/javascript" src="http://ps-studio.info/WEBPRACTIC/38/js/jquery.tn3lite.min.js"></script>
Подключим там же стили для оформления нашей фотогалереи:
Code
<link type="text/css" rel="stylesheet" href="http://ps-studio.info/WEBPRACTIC/38/skins/tn3.css"></link>
а также скрипт-обработчик, отвечающий за варианты эффектов при переходе от изображения к изображению
Code
<!-- initialize the TN3 when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
//Thumbnailer.config.shaderOpacity = 1;
var tn1 = $('.mygallery').tn3({
skinDir:"skins",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:460,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
});
});
</script>
Настройки эффектов переходов:
maxZoom:1.5 - здесь можно задать величину зуммирования изображений для просмотра в zoom-режиме
blinds - вариант эффекта перехода "жалюзи"
grid - вариант эффекта перехода "сетка"
duration:460 - продолжительность эффекта
gridX:1, - число столбцов сетки по горизонтали
gridY:8, - число столбцов сетки по вертикали
sort:"circle" - в этой строке можно заменить значение random (случайно) на flat (плоскость), diagonal (диагональ) или circle (круг)
method:"scale", - значение scale можно заменить на fade и тогда столбцы сетки будут как бы растворяться.
Собственно, сама фотогалерея в данном случае представляет собой нумерованный список, каждый элемент которого выглядит так:
Code
<li>
<h4>Заголовок изображения</h4>
<div class="tn3 description">Описание изображения</div>
<a href="ссылка на изображение размерами 620x378 пикселов">
<img src="ссылка на мини-изображение размерами 35x35 пикселов" />
</a>
</li>
Таким образом, список демо-страницы выглядит так:
Code
<ol>
<li>
<h4>Hohensalzburg Castle</h4>
<div class="tn3 description">Salzburg, Austria</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/1.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/1.jpg" />
</a>
</li>
<li>
<h4>Isolated sandy cove</h4>
<div class="tn3 description">Zakynthos island, Greece</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/2.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/2.jpg" />
</a>
</li>
<li>
<h4>A view from the Old Town</h4>
<div class="tn3 description">Herceg Novi, Montenegro</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/3.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/3.jpg" />
</a>
</li>
<li>
<h4>Walls of the Old Town</h4>
<div class="tn3 description">Kotor, Montenegro</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/4.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/4.jpg" />
</a>
</li>
<li>
<h4>Boat in the port</h4>
<div class="tn3 description">Sousse, Tunis</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/5.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/5.jpg" />
</a>
</li>
<li>
<h4>Wall of the Jain temple</h4>
<div class="tn3 description">Jaisalmer, India</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/6.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/6.jpg" />
</a>
</li>
<li>
<h4>City park</h4>
<div class="tn3 description">Negotin, Serbia</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/7.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/7.jpg" />
</a>
</li>
<li>
<h4>Taj Mahal mausoleum</h4>
<div class="tn3 description">Agra, India</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/8.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/8.jpg" />
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/9.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/9.jpg" />
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/10.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/11.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/11.jpg" />
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a href="http://ps-studio.info/WEBPRACTIC/38/examples/620x378/12.jpg">
<img src="http://ps-studio.info/WEBPRACTIC/38/examples/35x35/12.jpg" />
</a>
</li>
</ol>
Для скачивания LITE-версии с сайта автора, достаточно указать свой e-mail, на который придёт ссылка для скачивания.
Всего комментариев: 0
Оставь комментарий первым!
Оставь комментарий первым!
