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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......
  • Текущий 1.64/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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