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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню на cs...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

ZeniZeni

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

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

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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