Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 20 » Как создать фотоальбом с TN3


22:24
Как создать фотоальбом с TN3

Как создать фотоальбом с 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


ДЕМО          СКАЧАТЬ ИСХОДНИК


Источник урока

Категория: CSS//HTML//JS | Просмотров: 641 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди