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

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

ОБСУЖДЕНИЕ

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

Галерея в сетку с помощью jQuery
Просмотров: 1466  Скачан: 266 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

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

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

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

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

CharismaCharisma

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

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

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....
  • Текущий 2.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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