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

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

ОБСУЖДЕНИЕ

Галерея для вашего сайта на JQuery

Галерея для вашего сайта на JQuery
Просмотров: 1289  Скачан: 210 раз  Комментариев в теме: 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>
Материалы по теме:

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

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

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

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

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

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

TanyaCMS 1.0TanyaCMS 1.0

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

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

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

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

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

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
  • Текущий 1.45/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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