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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

Красивые кнопки на css3Красивые кнопки на css3

Оригинальные кнопки на css3, вам дано на выбор несколько кнопок, каждая по своему привлекательна, без сомнения посетители вашего сайта не останутся ра...

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

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

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......
  • Текущий 1.91/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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