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

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

ОБСУЖДЕНИЕ

Галерея с помощью jQuery

Галерея в сетку с помощью jQuery
Просмотров: 1670  Скачан: 288 раз  Комментариев в теме: 2

Стильная галерея в сетку на css и Jqurey длявашего сайта. Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение пропадает, когда открываете картинку, появляется ещё одна красивая анимация, картинка выезжает как бы с низу вверх и открывается по центру, но не по всей ширине, а подгоняется под расширение монитора, таким образом, картинка не выходит за грани.

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

 

HTML

<div class="infobar">
    <span id="description"></span>
    <span id="loading">Загрузка</span>
    <span class="reference">
        <a href="#">Codrops</a>
    </span>
</div>
<div id="thumbsWrapper">
    <div id="content" >
        <img src="images/thumbs/1-1.jpg" alt="images/1.jpg" title="фото 1"/>
        <img src="images/thumbs/2-1.jpg" alt="images/2.jpg" title="фото 2"/>
        <img src="images/thumbs/3-1.jpg" alt="images/3.jpg" title="фото 3"/>
        <img src="images/thumbs/4-1.jpg" alt="images/4.jpg" title="фото 4"/>
        <img src="images/thumbs/5-1.jpg" alt="images/5.jpg" title="фото 5"/>
        <img src="images/thumbs/6-1.jpg" alt="images/6.jpg" title="фото 6"/>
        <img src="images/thumbs/7-1.jpg" alt="images/7.jpg" title="фото 7"/>
        <img src="images/thumbs/8-1.jpg" alt="images/8.jpg" title="фото 8"/>
        <img src="images/thumbs/9-1.jpg" alt="images/9.jpg" title="фото 9"/>
        <img src="images/thumbs/10-1.jpg" alt="images/10.jpg" title="фото 10"/>
        <img src="images/thumbs/11-1.jpg" alt="images/11.jpg" title="фото 11"/>
        <img src="images/thumbs/12-1.jpg" alt="images/12.jpg" title="фото 12"/>
        <img src="images/thumbs/13-1.jpg" alt="images/13.jpg" title="фото 13"/>
        <img src="images/thumbs/14-1.jpg" alt="images/14.jpg" title="фото 14"/>
        <img src="images/thumbs/15-1.jpg" alt="images/15.jpg" title="фото 15"/>
        <img src="images/thumbs/16-1.jpg" alt="images/16.jpg" title="фото 16"/>
        <img src="images/thumbs/17-1.jpg" alt="images/17.jpg" title="фото 17"/>
        <img src="images/thumbs/18-1.jpg" alt="images/18.jpg" title="фото 18"/>
        <div class="placeholder"></div>
    </div>
</div>
<div id="panel">
    <div id="wrapper">
        <a id="prev"></a>
        <a id="next"></a>
    </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/gallery.js"></script>
Материалы по теме:

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

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

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

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

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....
  • Текущий 1.91/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (2)
↑ 0 ↓
Zis
Здравствуйте, а эта галерея пойдет на Joomla?
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Здравствуйте, да подойдёт, смотря как вы хотите её использовать, но в любом случае придётся лесть в шаблон сайта.

Ответить Ответ с цитатой

Страницы: 1

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


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