Создаем фотоальбом с TN3
Просматривая веб – сайты я заметил новые интересные
библиотека - TN3. Это JQuery галерея изображений со слайд-шоу, переходы
эффекты, несколько вариантов альбомов и т.д. Кроме того, вы будете в состоянии
настроить его (через CSS). Сегодня я покажу вам, как можно реализовать эту
галерею, чтобы создать собственный фотоальбом.
ДЕМО СКАЧАТЬ ИСХОДНИК
Шаг 1. HTML
index.html
|
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="css/tn3/tn3.css" />
<link rel="stylesheet" href="css/style.css"
type="text/css" media="all">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="js/jquery.tn3lite.min.js"></script>
<script type="text/javascript"
src="js/main.js"></script>
<title>Creating photo galleries with TN3 | Script
Tutorials</title>
</head>
<body>
<div
class="example">
<h4>Creating photo galleries with TN3 | Script Tutorials</h4>
<div class="tn3gallery"><!-- TN3Gallery -->
<div class="tn3 album">
<h4>Image 1 title</h4>
<div class="tn3 description">Image 1 description</div>
<div class="tn3 thumb">images/thumb_pic1.jpg</div>
<ol>
<li>
<h4>Image 1 title</h4>
<div class="tn3 description">Image 1 description</div>
<a href="images/pic1.jpg">
<img
src="images/thumb_pic1.jpg" />
</a>
</li>
<li>
<h4>Image 2 title</h4>
<div class="tn3 description">Image 2 description</div>
<a href="images/pic2.jpg">
<img src="images/thumb_pic2.jpg" />
</a>
</li>
........
<!-- all another images of our gallery -->
........
</ol>
</div>
</div>
</div>
</body>
</html>
|
Как вы можете видеть - галерея основана на OL-LI
элементы. Вся структура очень проста для понимания, не правда ли?
Шаг 2. CSS
Здесь используется CSS файлов для нашей галерее:
css/tn3/tn3.css
Этот файл CSS из стандартного пакета, TN3
галереи. Мы не будем опубликовать ее здесь - она доступна в нашем
исходнике.
CSS / style.css
|
/* demo
page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example
{
position:relative;
background-color:#fff;
width:768px;
overflow:hidden;
border:1px #000 solid;
margin:20px auto;
padding:20px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* custom
styles */
.tn3-gallery
{
width: 768px;
height: 559px;
}
.tn3-image
{
width: 768px;
height: 512px;
}
.tn3-controls-bg
{
width: 768px;
}
.tn3-thumbs {
width: 565px;
}
|
В нашем файле CSS мы просто предопределили несколько
основных стилей.
Шаг 3. JS
js/jquery.tn3lite.min.js
Это файл библиотеки, и его всегда вы найдете в исходнике.
JS / main.js
|
$(document).ready(function()
{
var tn3 = $('.tn3gallery').tn3({
skinDir:'css',
imageClick:'fullscreen',
image:{
maxZoom:2.0,
crop:true,
clickEvent:'dblclick',
transitions:[{
type:'blinds'
},{
type:'grid'
},{
type:'grid',
duration:350,
easing:'easeInQuad',
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:'random',
sortReverse:false,
diagonalStart:'bl',
// fade, scale
method:'scale',
partDuration:360,
partEasing:'easeOutSine',
partDirection:'left'
}]
}
});
});
|
Первые важные вещи: skinDir: "CSS"
С этой опцией, мы указываем папку, где будет базовый файл
CSS из TN3 галереи.
Здесь вы
можете найти другую полезную документацию из этой галереи.
Шаг 4. Изображения
Все наши изображения расположены в папке
«образов». Вот указатель изображений: (thumb_pic1.jpg, thumb_pic2.jpg ..
thumb_pic12.jpg) и полноразмерные изображения (pic1.jpg, pic2.jpg ..
pic12.jpg). Плюс несколько небольших файлов TN3 галереи находится в той же
папке кожи css/tn3. Вот лишь несколько файлов, таких как: bg.png, tbg.png,
tbg2.png и tn3.png
ДЕМО СКАЧАТЬ ИСХОДНИК
Источник
урока
|
