Неповторимый Фотоальбом с TN3

jQuery 02.05.2013

Во время просмотра 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'
            }]
        }
    });
});

По ссылке - tn3gallery.com/tn3-api Вы можете найти другую полезную документацию этой галереи.

Заключение

Я надеюсь, что сегодня мы сделали новые прекрасные галереи. TN3 есть большая библиотека, если вы узнаете его - он откроет для вас новые возможности. Удачи в реализации ваших проектов!