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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....
  • Текущий 1.57/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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