Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Март » 31 » Создаем фотоальбом с TN3
15:07
Создаем фотоальбом с 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


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


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

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

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Введение в информатику
[Безопасность систем]
Резервирование и восстановление
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Прогараммирование]
Строковый тип данных
[Прогараммирование]
Динамическая память
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ
[Прогараммирование]
Файлы
[Разное]
Большие секреты маленького BIOSa

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2024Конструктор сайтов - uCoz