RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

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

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

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

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

ZeniZeni

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilyslider...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками

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

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

Шаблон Desire Night ClubШаблон Desire Night Club

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

Portfolio SitePortfolio Site

Оригинальный одностраничный html шаблон для сайта портфолио, шаблон создан на фоне красивых морских глубин....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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