Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Галерея на весь экран с миниатюрами

Галерея на весь экран с миниатюрами


Демо: смотреть
Скачать: fullscreengallerythumbnailflip.zip [637,5 Kb] (cкачиваний: 229)


В этом уроке мы создадим полноэкранную галерею с JQuery. Идея такова, есть изображение, которое показано сейчас на полный экран, и менять изображения можн переворачивая при помощи навигации по изображениям. Большое изображение будет скользить вверх или вниз в зависимости, что вы нажмете. Мы так же будем добавлять элементы навигации для колесика мыши и клавиш. Миниатюры будут с зумом и полноэкранным вариантом. Зум для того, чтобы изображение уместилось на странице.

Мы будем использовать Flip JQuery плагин, автор Лукка Манно, этот плагин переворачивает элементы.

И мы также будем использовать плагин JQuery Колесико от Брэндона Аарона.

Красивые фотографии пренадлежат талантливой Полины Ефремовой. Посетить ее веб-сайт или посмотреть профиль на Behance.

Давайте начнем с разметкой!

HTML Разметкa
Во-первых, мы добавим элемент загрузки, который мы хотим показать, когда изображения загружаются:
<div id="tf_loading" class="tf_loading"></div>

Затем, мы создадим контейнер для всех изображений, которые будут показаны в полноэкранном режиме:
<div id="tf_bg" class="tf_bg">
    <img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
    <img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
    <img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
    <img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
    <img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
    <img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
    <div class="tf_pattern"></div>
</div>

Далее, мы добавим контейнер для содержания, которые показаны на левом нижнем углу экрана.
<div id="tf_content_wrapper" class="tf_content_wrapper">
    <div class="tf_content" id="content1" style="display:block;">
        <h2>Dreamer</h2>
        <p>Far far away, behind the word mountains, ... </p>
    </div>
    <div class="tf_content" id="content2">
        ...
    </div>
    ...
</div>

Структура для миниатюр на правой стороне экрана будет выглядеть следующим образом:
<div id="tf_thumbs" class="tf_thumbs">
    <span id="tf_zoom" class="tf_zoom"></span>
    <img src="images/thumbs/1.jpg" alt="Thumb1"/>
</div>

И навигация:
<div id="tf_next" class="tf_next"></div>
<div id="tf_prev" class="tf_prev"></div>


CSS
Ну, а как же без css стилей?
html, body{
    margin: 0;
    padding: 0;
}
body{
    background:#000;
}
.tf_bg{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
}
.tf_bg img{
    position:absolute;
    top:0px; /*-482px;     -(imgh/2 - wh/2) */
    left:0px;    /* calculate a negative value to center horizontally */
    width:100%;    /* windowwidth plus negative value of left */
    /*height:1650px; /* windowheight plus negative value of top */
    z-index: 1;
    display:none;
}
.tf_pattern{
    position:absolute;
    width:100%;
    height:100%;
    background:transparent url(../images/pattern.png) repeat top left;
    z-index:2;
}
.tf_content{
    position:absolute;
    bottom:50px;
    left:50px;
    z-index:10;
    display:none;
}
.tf_content h2{
    color:#fff;
    font-size:90px;
    padding:0;
    margin:0;
    font-family: 'Dancing Script', arial, serif;
    text-shadow:1px 1px 2px #000;
}
.tf_content p{
    color:#fff;
    padding:0;
    margin:0;
    background:transparent url(../images/bg_content.png) repeat top left;
    padding:40px;
    width:500px;
    font-family: 'PT Sans Narrow', arial, serif;
    font-size:20px;
    line-height:25px;
    text-transform:uppercase;
    text-shadow:2px 2px 1px #000;
    -moz-box-shadow:1px 1px 5px #202020;
    -webkit-box-shadow:1px 1px 5px #202020;
    box-shadow:1px 1px 5px #202020;
    border:4px solid #fff;
}
.tf_thumbs{
    position:absolute;    
    z-index:12;
    right:50px;
    top:50%;
    margin-top:-79px;
    border:4px solid #fff;
    -moz-box-shadow:1px 1px 5px #202020;
    -webkit-box-shadow:1px 1px 5px #202020;
    box-shadow:1px 1px 5px #202020;    
    -webkit-box-reflect:
        below 5px
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(0.6, transparent),
            to(rgb(18, 18, 18))
        );
}
.tf_thumbs img{
    display:block;
}
.tf_loading{
    position:fixed;
    top:50%;
    left:50%;
    margin:-30px 0px 0px -30px;
    width:60px;
    height:60px;
    background:#fff url(../images/loader.gif) no-repeat center center;
    z-index:999;
    opacity:0.7;
}
.tf_next,
.tf_prev{
    width:35px;
    height:14px;
    position:absolute;
    top:50%;
    right:320px;
    z-index:100;
    cursor:pointer;
    background:transparent url(../images/nav.png) no-repeat top left;
    opacity:0.5;
}
.tf_next{
    background-position:0px -14px;
    margin-top:80px;
}
.tf_prev{
    background-position:0px 0px;
    margin-top:-55px;
}
.tf_next:hover,
.tf_prev:hover{
    opacity:0.9;
}
.tf_zoom,
.tf_fullscreen{
    width:20px;
    height:20px;
    position:absolute;
    top:6px;
    right:6px;
    cursor:pointer;
    z-index:100;
    opacity:0.6;
    background:transparent url(../images/icons.png) no-repeat top left;
}
.tf_zoom{
    background-position:0px -20px;
}
.tf_fullscreen{
    background-position:0px 0px;
}
.tf_zoom:hover,
.tf_fullscreen:hover{
    opacity:0.9;
}
.reference{
    position:fixed;
    bottom:0px;
    right:0px;
    background:#000;
    height:23px;
    text-align:right;
    width:100%;
    text-shadow:1px 1px 1px #000;
    z-index:999;
    opacity:0.8;
}
.description{
    position:fixed;
    top:5px;
    right:5px;
    text-shadow:1px 1px 1px #000;
    z-index:999;
}
.reference a, .description span{
    color:#fff;
    text-transform: uppercase;
    margin-left:20px;
    text-decoration:none;
    font-family:Arial;
    font-size:10px;
}
a.last{
    float:left;
    line-height:23px;
}
.reference a:hover{
    text-shadow:0px 0px 1px #fff;
}


Подключить красивые шрифты можно следующим образом:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />


Java Script
Мы подключим следующие сценарии:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>


В подробности js кода мы вдаваться не будем!

Демо: смотреть
Скачать: fullscreengallerythumbnailflip.zip [637,5 Kb] (cкачиваний: 229)
Опубликовал dimas_ua, 1-04-2011, 00:00 Комментариев: 0
 (голосов: 1)