RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

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

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

MinimoSity v1.1MinimoSity v1.1

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

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

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

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...
  • Текущий 1.91/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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