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

Галерея для вашего сайта на JQuery
Просмотров: 1123  Скачан: 197 раз  Комментариев в теме: 0

Красивая галерея для вашего сайта на css и JQuery, если вам действительно нужна красивая галерея и вам хочется, что-то необычное, могу вас смело поздравить, вы нашли то, что вам нужно. При нажатии на картинку происходит её увеличение до полного масштаба, за тем ваш курсор фиксируется на картинке, таким образом, что вы сможете просмотреть всю картинку полностью, передвигая курсор (чем то напоминает сенсор).

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

 

HTML

<div id="fp_gallery" class="fp_gallery">
    <img src="images/1.jpg" alt="" class="fp_preview" style="display:none;"/>
    <div class="fp_overlay"></div>
    <div id="fp_loading" class="fp_loading"></div>
    <div id="fp_next" class="fp_next"></div>
    <div id="fp_prev" class="fp_prev"></div>
    <div id="outer_container">
        <div id="thumbScroller">
            <div class="container">
                <div class="content">
                    <div><a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div>
                </div>
                <div class="content">
                    <div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
                </div>
                <div class="content">
                    <div><a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg" class="thumb" /></a></div>
                </div>
                <div class="content">
                    <div><a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg" class="thumb" /></a></div>
                </div>
                <div class="content">
                    <div><a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg" class="thumb" /></a></div>
                </div>
            </div>
        </div>
    </div>
    <div id="fp_thumbtoggle" class="fp_thumbtoggle">Вернуться</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.easing.1.3.js"></script>
<script type="text/javascript" src="js/humb.js"></script>
<script type="text/javascript" src="js/mousemove.js"></script>
Материалы по теме:

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

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

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

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

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

Paris ClarkParis Clark

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

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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