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

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

ОБСУЖДЕНИЕ

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

Облако теговОблако тегов на css

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

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

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......
  • Текущий 2.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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