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

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

ОБСУЖДЕНИЕ

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

Full галерея на jQuery
Просмотров: 1316  Скачан: 205 раз  Комментариев в теме: 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>
Материалы по теме:

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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