Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Предпросмотр изображений, как в поисковой выдачи Google

Урок есть и в видеоформате! Смотреть?

Давайте поговорим о том, как воссоздать на нашем сайте такой же эффект, как и при поисковой выдаче изображений в Google.


​​

    Если вы в последнее время, искали изображения в Google, то наверняка видели этот интересный эффект, когда нажимая по миниатюре, открывалась область пред просмотра, с  краткой информацией об изображении, и ссылкой на оригинал. Это очень хороший эффект, практичный, и заметно облегчает поиск. Сегодня мы хотим показать вам, как создать аналогичный эффект для вашего сайта. Идея заключается в том, чтобы открывать область предварительного просмотра, после щелчка мышью по выбранной миниатюре. Отображая при этом в ней всю необходимую информацию, и давая возможность посмотреть изображение в оригинале.

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

    Демонстрационный пример, содержит несколько удивительных произведений искусств Jaime Martinez.

    Итак, давайте начнем!

    Разметка

    Изначально, мы должны создать необходимую сетку для наших миниатюр, оформив её в неупорядоченный список. Каждый его элемент, будет содержать ссылку, которая в свою очередь будет содержать некоторые атрибуты данных:

<ul id="og-grid" class="og-grid">
    <li>
        <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
            <img src="images/thumbs/1.jpg" alt="img01"/>
        </a>
    </li>
    <li>
        <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
            <img src="images/thumbs/2.jpg" alt="img02"/>
        </a>
    </li>
    <li><!-- ... --></li>
    <!-- ... -->
</ul>

    Атрибут ссылки – href, будет использоваться в качестве указания пути на домашнюю страничку изображения, с содержанием описания и так далее (это также удобно, если отключен JavaScript). Атрибут data-largesrc будет содержать путь к большой картинке. data-title – название или заголовок, а data-description – описание для области предварительного просмотра.

    Если мы кликнем по миниатюре, нам соответственно захочется видеть область предварительного просмотра именно под самим элементом, по которому был совершён щелчок. Для этого нам необходимо вставить элемент области пред просмотра, в наш неупорядоченный список, а точнее в актуальный элемент li. Данные для области пред просмотра, мы будем брать из созданных нами ранее атрибутов ссылки, а увеличенное изображение из якоря ссылки (<a>якорь</a>):

<li>
 
    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
        <img src="images/thumbs/2.jpg" alt="img02"/>
    </a>
     
    <div class="og-expander">
        <div class="og-expander-inner">
            <span class="og-close"></span>
            <div class="og-fullimg">
                <div class="og-loading"></div>
                <img src="images/2.jpg">
            </div>
            <div class="og-details">
                <h3>Veggies sunt bona vobis</h3>
                <p>Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.</p>
                <a href="http://cargocollective.com/jaimemartinez/">Visit website</a>
            </div>
        </div>
    </div>
 
</li>

    Работу с разметкой можно считать законченной, переходим к стилям!

    CSS

    Обращаю ваше внимание, в данной статье, префиксы CSS стилей опущены, но вы сможете найти их в файлах демонстрации.

    Первое чем мы займёмся, будет сетка миниатюр. Она будет располагаться в центре, и иметь ширину в 100%. Это означает, что миниатюры будут располагаться в центре, и находится в одну линию, поэтому мы применим display: inline-block:

.og-grid {
    list-style: none;
    padding: 20px 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
 
.og-grid li {
    display: inline-block;
    margin: 10px 5px 0 5px;
    vertical-align: top;
    height: 250px;
}

    Ссылки и миниатюры, будут отображаться в виде блочных элементов, мы так же удалим некоторые стили по умолчанию:

.og-grid li > a,
.og-grid li > a img {
    border: none;
    outline: none;
    display: block;
    position: relative;
}

    Щёлкая мышью по выбранной миниатюре, мы будем добавлять специальный класс «og-expanded» для текущего пункта неупорядоченного списка, который примет все необходимые атрибуты и ширину, став областью пред просмотра. Для якоря выбранной миниатюры, мы добавим небольшую стрелку с помощью псевдо – элемента:

.og-grid li.og-expanded > a::after {
    top: auto;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #ddd;
    border-width: 15px;
    left: 50%;
    margin: -20px 0 0 -15px;
}

    Область просмотра миниатюр, будет иметь класс «og-expander», и положение её будет абсолютным. Начальная высота области, будет равна 0, и все что будет выходить за её пределы, будет скрыто overflow: hidden:

.og-expander {
    position: absolute;
    background: #ddd;
    top: auto;
    left: 0;
    width: 100%;
    margin-top: 10px;
    text-align: left;
    height: 0;
    overflow: hidden;
}
 
.og-expander-inner {
    padding: 50px 30px;
    height: 100%;
}

    Внутренний подкласс, будет иметь необходимые внутренние отступы, и высоту равную 100%.

    Крест закрытия области предварительного просмотра, будет выполнен с помощью двух псевдо – элементов в виде линий, и повернуты они будут на 45 градусов:

.og-close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
 
.og-close::before,
.og-close::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    height: 1px;
    background: #888;
    transform: rotate(45deg);
}
 
.og-close::after {
    transform: rotate(-45deg);
}
 
.og-close:hover::before,
.og-close:hover::after {
    background: #333;
}

    Для области просмотра, мы сделаем 2 обёртки, для изображения и дополнительной информации, дав им по 50% ширины, а так же разместив их рядом друг с другом:

.og-fullimg,
.og-details {
    width: 50%;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
}

    Обёртка заключающая в себя детали, будет иметь некоторые внутренние отступы, а изображение, будет располагаться по середине благодаря установки text-align в центр, само же изображение, будет отображаться как линейный блочный элемент display: inline-block. Давайте зададим max-height и max-width  нашему изображению в 100%, чтобы оно изменяло свои размеры, исходя из размеров блока в котором находится:

.og-details {
    padding: 0 40px 0 20px;
}
 
.og-fullimg {
    text-align: center;
}
 
.og-fullimg img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
}

    Настало время определить стили для текстовых элементов и ссылок:

.og-details h3 {
    font-weight: 300;
    font-size: 52px;
    padding: 40px 0 10px;
    margin-bottom: 10px;
}
 
.og-details p {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #999;
}
 
.og-details a {
    font-weight: 700;
    font-size: 16px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 20px;
    border: 3px solid #333;
    display: inline-block;
    margin: 30px 0 0;
    outline: none;
}
 
.og-details a::before {
    content: '\2192';
    display: inline-block;
    margin-right: 10px;
}
 
.og-details a:hover {
    border-color: #999;
    color: #999;
}

    Изображение загрузки для блока в котором будет находиться изображение, мы выполним только с помощью CSS стилей. Мы создадим небольшой кружок, и три вариации box-shadow: первая для мягкости его отображения, а вторые две, копии первого, с немного более мягкими значениями. Затем, мы создадим анимацию которая будет менять цвет фона, и значения box-shadow последовательно:

.og-loading {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ddd;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    animation: loader 0.5s infinite ease-in-out both;
}
 
@keyframes loader {
    0% { background: #ddd; }
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

    Последнее, но не менее важное, нам необходимо добавить стили для небольших экранов или мобильных устройств. Мы изменим размер шрифта, так же скроем полное изображение открывающееся в области предварительного просмотра, если экран совсем мал. Это не является довольно эффективным решением, поэтому в JavaScript, мы так же коснёмся этого вопроса:

@media screen and (max-width: 830px) {
 
    .og-expander h3 { font-size: 32px; }
    .og-expander p { font-size: 13px; }
    .og-expander a { font-size: 12px; }
 
}
 
@media screen and (max-width: 650px) {
 
    .og-fullimg { display: none; }
    .og-details { float: none; width: 100%; }
     
}

    Со стилями всё. Переходим к JavaScript.

    JavaScript

    Давайте начнём с кэширования некоторых элементов и инициализации некоторых переменных:

// список миниатюр
var $grid = $( '#og-grid' ),
    // и элементов LI
    $items = $grid.children( 'li' ),
    // индекс текущего значения миниатюры
    current = -1,
    // отступ сверху расширенной миниатюры
    // используется, чтобы знать, на какой линии она находится
    previewPos = -1,
    // дополнительное количество пикселей, чтобы прокрутить окно
    scrollExtra = 0,
    // дополнительный внешний отступ при появлении области пред просмотра(между областью и ближайшими миниатюрами)
    marginExpanded = 10,
    $window = $( window ), winsize,
    $body = $( 'html, body' ),
    // события переходов для разных браузеров
    transEndEventNames = {
        'WebkitTransition' : 'webkitTransitionEnd',
        'MozTransition' : 'transitionend',
        'OTransition' : 'oTransitionEnd',
        'msTransition' : 'MSTransitionEnd',
        'transition' : 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    // проверка на поддержку css переходов
    support = Modernizr.csstransitions,
    // настройки по умолчанию
    settings = {
        minHeight : 500,
        speed : 350,
        easing : 'ease'
    };

    Мы начнём с предварительной загрузки миниатюр в сетке. Сохраняем значение смещения верхнего отступа и высоты для каждого элемента сетки, получаем текущие размеры окна, и инициализируем некоторые события:

function init( config ) {
     
    // настройки...
    settings = $.extend( true, {}, settings, config );
 
    // предварительная загрузка всех изображений
    $grid.imagesLoaded( function() {
 
        // сохранить объекты, размер и смещение
        saveItemInfo( true );
        // получить размеры окна
        getWinSize();
        // инициализация некоторых событий
        initEvents();
 
    } );
 
}
 
// сохранить значение смещения сверху и высоту элементов(если saveheight верно)
function saveItemInfo( saveheight ) {
    $items.each( function() {
        var $item = $( this );
        $item.data( 'offsetTop', $item.offset().top );
        if( saveheight ) {
            $item.data( 'height', $item.height() );
        }
    } );
}
 
function getWinSize() {
    winsize = { width : $window.width(), height : $window.height() };
}

    Событие click, мы будем связывать с каждым элементом (якорь) и кнопкой «закрыть» (когда область пред просмотра открыта). Щелчок по миниатюре, будет не только открывать область предварительного просмотра для выбранного элемента, оно так же будет его закрывать, если повторно кликнуть по выбранной миниатюре. Щелчок по кресту (кнопке «закрыть»), так же приведёт к закрытию области просмотра.
    Этим будет заниматься событие resize для области пред просмотра, в котором будут сбрасываться некоторые значения, и область будет автоматически закрыта (если открыта):

function initEvents() {
     
    // после нажатия на миниатюру, показать предварительный просмотр с увеличенным изображением и дополнительной информацией;
    // закрыть область пред просмотра, если оно уже открыто.
    // закрыть, если нажат крестик
    $items.on( 'click', 'span.og-close', function() {
        hidePreview();
        return false;
    } ).children( 'a' ).on( 'click', function(e) {
 
        var $item = $( this ).parent();
        // проверить, если область уже открыта
        current === $item.index() ? hidePreview() : showPreview( $item );
        return false;
 
    } );
 
    // если окно изменило размер, получить его размер снова
    // сброс некоторых значений..
    $window.on( 'debouncedresize', function() {
         
        scrollExtra = 0;
        previewPos = -1;
        // save item´s offset
        saveItemInfo();
        getWinSize();
        var preview = $.data( this, 'preview' );
        if( typeof preview != 'undefined' ) {
            hidePreview();
        }
 
    } );
 
}

    Функция showPreview занимается тем, что подготавливает область предварительного просмотра, позволяет расширить её, показать увеличенное изображение и загрузить некоторую информацию о нём. Если экземпляр объекта предварительного просмотра уже инициализирован, то нам остаётся только обновить внутреннее содержимое исходя из новых деталей (если щелчок мыши пришёлся на близлежащий пункт от до этого выбранного), или скрыть, и инициализировать новый (если выбранная миниатюра, находится в другом ряду).
    Чтобы проверить, расположена ли выбранная миниатюра на одной линии с выбранной до этого или нет, мы будем использовать значение отступа сверху:

function showPreview( $item ) {
 
    var preview = $.data( this, 'preview' ),
        // смещение элементов сверху
        position = $item.data( 'offsetTop' );
 
    scrollExtra = 0;
 
    // если предварительный просмотр существует и previewPos отличается (другая строка) от миниатюр сверху, закрываем его
    if( typeof preview != 'undefined' ) {
 
        // если выбранная миниатюра находится в другой строке
        if( previewPos !== position ) {
            // Если position > previewPos тогда мы должны прокрутить окно, на некоторое значение
            if( position > previewPos ) {
                scrollExtra = preview.height;
            }
            hidePreview();
        }
        // если выбранная миниатюра находится в той же строке
        else {
            preview.update( $item );
            return false;
        }
         
    }
 
    // обновляем previewPos
    previewPos = position;
    // инициализируем новую область пред просмотра для текущей миниатюры
    preview = $.data( this, 'preview', new Preview( $item ) );
    // открыть область предварительного просмотра
    preview.open();
 
}

    Объект пред просмотра (Preview.$item), будет содержать ссылку на текущий объект отображаемой миниатюры, а индекс блока предварительной области просмотра (Preview.expandedIdx) для текущей линии в которой находится выбранная миниатюра. Обратите внимание, область предварительного просмотра, не обязательно имеет ссылку для выбранного элемента. Например, если мы нажмём на вторую миниатюру расположенную на одной линии с предыдущей, по которой мы нажали и была открыта область предварительно просмотра, в этом случае объект пред просмотра не изменит индекс Preview.expandedIdx  на ссылку Preview.$item. Мы должны сохранить ссылку на область предварительного просмотра так, чтобы знать, когда она закрыта, а когда открыта, для параметра «collapse»:

// выводим структуру области пред просмотра
function Preview( $item ) {
    this.$item = $item;
    this.expandedIdx = this.$item.index();
    this.create();
    this.update();
}

    Когда область пред просмотра инициализируется, мы должны создать необходимую структуру для заголовков, дополнительной информации и прочих элементов, подготовив к выводу на экран:

create : function() {
    // создаём структуру области пред просмотра:
    this.$title = $( '<h3></h3>' );
    this.$description = $( '<p></p>' );
    this.$href = $( '<a href="#">Visit website</a>' );
    this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
    this.$loading = $( '<div class="og-loading"></div>' );
    this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
    this.$closePreview = $( '<span class="og-close"></span>' );
    this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
    this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
    // добавляем область предварительного просмотра к выбранной миниатюре
    this.$item.append( this.getEl() );
    // устанавливаем переход для области предварительного просмотра, и элемента
    if( support ) {
        this.setTransition();
    }
}

    Затем мы заполняем созданную структуру необходимыми значениями (хранящимися в атрибутах тега a).
    Функцию обновления (update) можно просто использовать для обновления имеющегося содержимого в блоке предварительного просмотра:

update : function( $item ) {
 
    // обновляем информацию о новом изображении 
    if( $item ) {
        this.$item = $item;
    }
     
    // если область пред просмотра уже открыта, удаляем класс "og-expanded" у текущей области и добавляем для новой миниатюры
    if( current !== -1 ) {
        var $currentItem = $items.eq( current );
        $currentItem.removeClass( 'og-expanded' );
        this.$item.addClass( 'og-expanded' );
        // текущее положение области пред просмотра
        this.positionPreview();
    }
 
    // обновляем текущее значение
    current = this.$item.index();
 
    // обновляем содержимое области пред просмотра
    var $itemEl = this.$item.children( 'a' ),
        eldata = {
            href : $itemEl.attr( 'href' ),
            largesrc : $itemEl.data( 'largesrc' ),
            title : $itemEl.data( 'title' ),
            description : $itemEl.data( 'description' )
        };
 
    this.$title.html( eldata.title );
    this.$description.html( eldata.description );
    this.$href.attr( 'href', eldata.href );
 
    var self = this;
     
    // удаляем текущее изображение в окне предварительного просмотра
    if( typeof self.$largeImg != 'undefined' ) {
        self.$largeImg.remove();
    }
 
    // предварительная загрузка большого изображения и добавление его в область пред просмотра
    // для небольших экранов, мы не отображаем картинки (медиа-запрос будет скрыть блок $largeImg)
    if( self.$fullimage.is( ':visible' ) ) {
        this.$loading.show();
        $( '<img/>' ).load( function() {
            self.$loading.hide();
            self.$largeImg = $( this ).fadeIn( 350 );
            self.$fullimage.append( self.$largeImg );
        } ).attr( 'src', eldata.largesrc ); 
    }
 
}

    Для появления области пред просмотра, нам нужно установить необходимую высоту блока содержащего её, а так же, отступ сверху для миниатюр, расположенных ниже. Высотой области предварительного просмотра, будет высота окна минус высота миниатюр в сетке. Чтобы избежать случая, при котором высота может оказаться слишком маленькой, мы добавим опцию “minHeight”, в которой укажем минимальное значение необходимое для области пред просмотра.
    Во время открытия области, мы хотим, чтобы окно немного прокрутилось, дав возможность полностью увидеть область пред просмотра (и, если возможно, также миниатюр):

open : function() {
 
    setTimeout( $.proxy( function() {   
        // устанавливаем высоту для области предварительного просмотра, и отступ сверху для спуска нижележащих миниатюр
        this.setHeights();
        // устанавливаем положение, области предварительного просмотра в нужном месте
        this.positionPreview();
    }, this ), 25 );
 
}
 
setHeights : function() {
 
    var self = this,
        onEndFn = function() {
            if( support ) {
                self.$item.off( transEndEventName );
            }
            self.$item.addClass( 'og-expanded' );
        };
 
    this.calcHeight();
    this.$previewEl.css( 'height', this.height );
    this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
 
    if( !support ) {
        onEndFn.call();
    }
 
}
 
calcHeight : function() {
 
    var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
        itemHeight = winsize.height;
 
    if( heightPreview < settings.minHeight ) {
        heightPreview = settings.minHeight;
        itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
    }
 
    this.height = heightPreview;
    this.itemHeight = itemHeight;
 
}
 
positionPreview : function() {
 
    // прокручиваем страницу
    // вариант 1 : высота области + высота изображения, исходя из высоты окна
    // вариант 2 : высота области + высота изображения, исходя из высоты окна и высоты области в случае если высота окна небольшая
    // вариант 3 : высота области + высота изображения, исходя из высоты окна и высоты области в случае если высота окна большая
    var position = this.$item.data( 'offsetTop' ),
        previewOffsetT = this.$previewEl.offset().top - scrollExtra,
        scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;
     
    $body.animate( { scrollTop : scrollVal }, settings.speed );
 
}

    Для закрытия превью, мы будем сбрасывать высоты области пред просмотра, и поднимать вверх опущенные миниатюры. Как только это будет сделано, структура области удалится из DOM:

close : function() {
 
    var self = this,
        onEndFn = function() {
            if( support ) {
                $( this ).off( transEndEventName );
            }
            self.$item.removeClass( 'og-expanded' );
            self.$previewEl.remove();
        };
 
    setTimeout( $.proxy( function() {
 
        if( typeof this.$largeImg !== 'undefined' ) {
            this.$largeImg.fadeOut( 'fast' );
        }
        this.$previewEl.css( 'height', 0 );
        // текущая открытая область пред просмотра (индекс может отличаться от индекса текущей миниатюры .$item)
        var $expandedItem = $items.eq( this.expandedIdx );
        $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );
 
        if( !support ) {
            onEndFn.call();
        }
 
    }, this ), 25 );
     
    return false;
 
}

    Вот и все! Мы надеемся, вам понравилась эта статья, и вы нашли её вдохновляющей!

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 22.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 892
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


arcticModal - простые модальные окна jQuery
В поисках простого плагина для создания модальных окон, я перепробовал кучу вариантов, наткнувшись на arcticModal я остановился. Простота работы, вес самого плагина меня очень порадовали, поэтому поделюсь с вами я именно им, так как сам его проверял.
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.
5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
хорошая музыкальная школа - смотрите информацию у нас на сайте
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
Деревянные православные храмы. Проект деревянного православного храма .
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
набор для днд
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: