background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Полноэкранная галерея на jQuery

Full галерея на jQuery
Просмотров: 1156  Скачан: 193 раз  Комментариев в теме: 0

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с меню к самой картинке, есть возможность выбирать расширение открываемой картинки (full, fit или original). Галерея отлично работает во всех браузерах.

Шаг 1 - создание разметки

 

HTML

<div id="outer_container">
    <div id="customScrollBox">
        <div class="container">
            <div class="content">
                <h1>Шикарная<span class="lightgrey">Галерея</span><br />
                    <span class="light">
                        <span class="grey">
                            <span class="s36">Для вашего сайта</span>
                        </span>
                    </span>
                </h1>
                <div id="toolbar"></div>
                <div class="clear"></div>
                <a href="images/space/1.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/1-1.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" />
                </a>
                <a href="images/space/2.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/2-1.jpg" title="Denebola" alt="Denebola" class="thumb" />
                </a>
                <a href="images/space/3.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/3-1.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" />
                </a>
                <a href="images/space/4.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/4-1.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" />
                </a>
                <a href="images/space/5.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/5-1.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" />
                </a>
                <a href="images/space/6.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/6-1.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" />
                </a>
                <a href="images/space/7.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/7-1.jpg" title="Decampment" alt="Decampment" class="thumb" />
                </a>
                <a href="images/space/8.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/8-1.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" />
                </a>
                <a href="images/space/9.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/9-1.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" />
                </a>
                <a href="images/space/10.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/10-1.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" />
                </a>
                <a href="images/space/11.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/11-1.jpg" title="Transitorius" alt="Transitorius" class="thumb" />
                </a>
                <a href="images/space/12.jpg" class="thumb_link">
                    <span class="selected"></span>
                    <img src="images/space/12-1.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" />
                </a>
                <p class="clear"></p>
            </div>
        </div>
        <div id="dragger_container"><div id="dragger"></div></div>
    </div>
</div>
<div id="bg">
    <img src="images/space/1.jpg" title="Supremus Lucernarium" id="bgimg" />
    <div id="preloader"><img src="images/ajax-loader_dark.gif" width="32" height="32" align="absmiddle" />LOADING...</div>
    <div id="arrow_indicator"><img src="images/sw_arrow_indicator.png" width="50" height="50"  /></div>
    <div id="nextimage_tip">Кликните на картинку</div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/ViewMode.js"></script>
Материалы по теме:

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

Full галерея на jQueryFull галерея на jQuery

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......

Галерея на jQueryГалерея на jQuery

В галерее используется потрясающий эффект раскрытия картинки, когда вы нажимаете на картинку, она как бы собирается по......

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......
Интересные публикации:

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.5/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить