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 галерея
Просмотров: 1206  Скачан: 198 раз  Комментариев в теме: 0

Красивая галерея на css и JQuery для вашего сайта. В галерее используется потрясающий эффект раскрытия картинки, когда вы нажимаете на картинку, она как бы собирается по кусочкам и выводится по центру (это очень красиво выглядит), при повторном нажатии на уже открывшуюся картинку, происходит тот же эффект, только в обратном порядке.

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

 

HTML

<div id="im_wrapper" class="im_wrapper">
    <div style="background-position:0px 0px;"><img src="images/thumbs/1.jpg" alt="" /></div>
    <div style="background-position:-125px 0px;"><img src="images/thumbs/2.jpg" alt="" /></div>
    <div style="background-position:-250px 0px;"><img src="images/thumbs/3.jpg" alt="" /></div>
    <div style="background-position:-375px 0px;"><img src="images/thumbs/4.jpg" alt="" /></div>
    <div style="background-position:-500px 0px;"><img src="images/thumbs/5.jpg" alt="" /></div>
    <div style="background-position:-625px 0px;"><img src="images/thumbs/6.jpg" alt="" /></div>
    <div style="background-position:0px -125px;"><img src="images/thumbs/7.jpg" alt="" /></div>

    <div style="background-position:-125px -125px;"><img src="images/thumbs/8.jpg" alt="" /></div>
    <div style="background-position:-250px -125px;"><img src="images/thumbs/9.jpg" alt="" /></div>
    <div style="background-position:-375px -125px;"><img src="images/thumbs/10.jpg" alt="" /></div>
    <div style="background-position:-500px -125px;"><img src="images/thumbs/11.jpg" alt="" /></div>
    <div style="background-position:-625px -125px;"><img src="images/thumbs/12.jpg" alt="" /></div>
    <div style="background-position:0px -250px;"><img src="images/thumbs/13.jpg" alt="" /></div>

    <div style="background-position:-125px -250px;"><img src="images/thumbs/14.jpg" alt="" /></div>
    <div style="background-position:-250px -250px;"><img src="images/thumbs/15.jpg" alt="" /></div>
    <div style="background-position:-375px -250px;"><img src="images/thumbs/16.jpg" alt="" /></div>
    <div style="background-position:-500px -250px;"><img src="images/thumbs/17.jpg" alt="" /></div>
    <div style="background-position:-625px -250px;"><img src="images/thumbs/18.jpg" alt="" /></div>
    <div style="background-position:0px -375px;"><img src="images/thumbs/19.jpg" alt="" /></div>

    <div style="background-position:-125px -375px;"><img src="images/thumbs/20.jpg" alt="" /></div>
    <div style="background-position:-250px -375px;"><img src="images/thumbs/21.jpg" alt="" /></div>
    <div style="background-position:-375px -375px;"><img src="images/thumbs/22.jpg" alt="" /></div>
    <div style="background-position:-500px -375px;"><img src="images/thumbs/23.jpg" alt="" /></div>
    <div style="background-position:-625px -375px;"><img src="images/thumbs/24.jpg" alt="" /></div>
</div>
<div id="im_loading" class="im_loading"></div>
<div id="im_next" class="im_next"></div>
<div id="im_prev" class="im_prev"></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/jquery.transform-0.9.1.min.js"></script>
<script type="text/javascript" src="js/thumbs.js"></script>
<script type="text/javascript">
    (function($,sr){
        var debounce = function (func, threshold, execAsap) {
            var timeout;
            return function debounced () {
                var obj = this, args = arguments;
                function delayed () {
                    if (!execAsap)
                    func.apply(obj, args);
                    timeout = null;
                };
                if (timeout)
                clearTimeout(timeout);
                else if (execAsap)
                func.apply(obj, args);
                timeout = setTimeout(delayed, threshold || 100);
            };
        }
        jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
    })(jQuery,'smartresize');
</script>
Материалы по теме:

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content Slid...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

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

Вертикальное меню с прокруткойВертикальное меню с прокруткой

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

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.
  • Текущий 1.60/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (0)

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


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