Во время просмотра web - я заметил новые интересные библиотека - TN3. Это jQuery коллекции изображений в слайд-шоу, c эффектами перехода, несколько альбомов опций и т.д. Кроме того, вы сможете настроить его (через CSS). Сегодня я покажу вам, как можно реализовать эту галерею, чтобы создать собственный фотоальбом.
Шаг 1. HTML
Как обычно, мы начнем с 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-файлы для нашей галерее:
/* 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
$(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'
}]
}
});
});
Здесь вы можете найти другую полезную документацию этой галереи.
Заключение
Я надеюсь, что сегодня мы сделали новые прекрасные галереи. TN3 есть большая библиотека, если вы узнаете его - он откроет для вас новые возможности. Удачи в реализации ваших проектов!
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.