Выделение и просмотр изображений с использованием jQuery

5 марта 2014 | Опубликовано в css | 2 Комментариев »

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

Демонстрация работы – Скачать исходный код

Давайте начнем.

Разметка

Для структуры HTML нам нужно только изображение и его класс. Изображение может находиться где угодно на Вашем веб-сайте:

<img src="images/thumbs/1.jpg" alt="images/1.jpg"/>

Мы используем атрибут alt, чтобы добавить ссылку на большое изображение.

Мы также добавим элемент маскирующего слоя перед концом тега body:

<div id="ih_overlay" style="display:none;"></div>

Структура, которую мы создадим с помощью JavaScript, будет выглядеть так:

<div id="ih_clone" class="ih_image_clone_wrap">
    <span class="ih_close"></span>
    <img class="preview" src="images/1.jpg">
</div>

Изначально эта структура не будет находиться в нашем HTML документе, а будет создана динамически.

Теперь давайте рассмотрим стили.

CSS

Сначала мы определим стили для маскирующего слоя:

.ih_overlay{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#000;
    z-index:10;
    opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

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

Изображение, к которому мы хотим применить наш эффект, будет иметь такой стиль:

img.ih_image{
    margin:10px 0px;
    position:relative;
    -moz-box-shadow:1px 1px 4px #000;
    -webkit-box-shadow:1px 1px 4px #000;
    box-shadow:1px 1px 4px #000;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Это довольно просто, мы добавили ему только тень блока.

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

.ih_image_clone_wrap{
    position:absolute;
    z-index:11;
}

Мы так же добавим теги span с уменьшенными изображениями, которые покажут увеличительное стекло, изображение загрузки или крест. Мы определим все общие свойства:

.ih_image_clone_wrap span.ih_zoom,
.ih_image_clone_wrap span.ih_loading,
.ih_image_clone_wrap span.ih_close{
    position:absolute;
    top:10px;
    right:10px;
    width:24px;
    height:24px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    opacity:0.8;
    cursor:pointer;
    -moz-box-shadow:1px 1px 2px #000;
    -webkit-box-shadow:1px 1px 2px #000;
    box-shadow:1px 1px 2px #000;
    z-index:999;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

Особые свойства для каждого класса, такие как фон, будут определены так:

.ih_image_clone_wrap span.ih_zoom{
    background:#000 url(../icons/zoom.png) no-repeat center center;
}
.ih_image_clone_wrap span.ih_loading{
    background:#000 url(../icons/loader.gif) no-repeat center center;
}
.ih_image_clone_wrap span.ih_close{
    background:#000 url(../icons/close.png) no-repeat center center;
}
.ih_image_clone_wrap img{
    opacity:0.7;
    -moz-box-shadow:1px 1px 10px #000;
    -webkit-box-shadow:1px 1px 10px #000;
    box-shadow:1px 1px 10px #000;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

У большого изображения, которое загрузится поверх уменьшенного изображения, будет такой стиль:

.ih_image_clone_wrap img.preview{
    opacity:1;
    position:absolute;
    top:0px;
    left:0px;
}

А теперь давайте добавим немного волшебства.

JavaScript

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

Когда мы наводим указатель мыши на изображение определенного класса, мы создаем блок класса ih_image_clone_wrap и устанавливаем значение его положение таким же, как у текущего изображения.

/* задержка появления маскирующего слоя/выделения */
var highlight_timeout;

/* пользователь наводит указатель мыши на изображение, создается блок с абсолютным позиционированием с тем же изображением внутри, и он добавляется к тегу body */
$('img.ih_image').bind('mouseenter',function () {
        var $thumb = $(this);

        var $clone = $('<div />',{
            'id'        : 'ih_clone',
            'className' : 'ih_image_clone_wrap',
            'html'      : '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
            'style'     : 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
        });

        var highlight = function (){
            $('#ih_overlay').show();
            $('BODY').append($clone);
        }
        //показать его через некоторое время ...
        highlight_timeout = setTimeout(highlight,700);

        /* когда мы нажимаем на увеличение, мы показываем изображение в центре окна и увеличиваем его до размера большого изображения, заставляя его плавно появиться после того, как заканчивается анимация. */
        $clone.find('.ih_zoom').bind('click',function(){
            var $zoom = $(this);
            $zoom.addClass('ih_loading').removeClass('ih_zoom');
            var imgL_source = $thumb.attr('alt');

            $('<img class="ih_preview" style="display:none;"/>').load(function(){
                var $imgL = $(this);
                $zoom.hide();
                var windowW = $(window).width();
                var windowH = $(window).height();
                var windowS = $(window).scrollTop();

                $clone.append($imgL).animate({
                    'top'           : windowH/2 + windowS + 'px',
                    'left'          : windowW/2  + 'px',
                    'margin-left'   : -$thumb.width()/2 + 'px',
                    'margin-top'    : -$thumb.height()/2 + 'px'
                },400,function(){
                    var $clone = $(this);
                    var largeW = $imgL.width();
                    var largeH = $imgL.height();
                    $clone.animate({
                        'top'           : windowH/2 + windowS + 'px',
                        'left'          : windowW/2  + 'px',
                        'margin-left'   : -largeW/2 + 'px',
                        'margin-top'    : -largeH/2 + 'px',
                        'width'         : largeW + 'px',
                        'height'        : largeH + 'px'
                    },400).find('img:first').animate({
                        'width'         : largeW + 'px',
                        'height'        : largeH + 'px'
                    },400,function(){
                        var $thumb = $(this);
                        /* заставляем плавно появиться большое изображение и заменяем уменьшенное изображение увеличительного стекла на крест, чтобы пользователь мог выйти из режимы предварительного просмотра */
                        $imgL.fadeIn(function(){
                            $zoom.addClass('ih_close')
                                 .removeClass('ih_loading')
                                 .fadeIn(function(){
                                    $(this).bind('click',function(){
                                        $clone.remove();
                                        clearTimeout(highlight_timeout);
                                        $('#ih_overlay').hide();
                                    });
                                $(this).bind('click',function(){
                                    $clone.remove();
                                    clearTimeout(highlight_timeout);
                                    $('#ih_overlay').hide();
                                });
                            });
                            $thumb.remove();
                        });
                    });
                });
            }).error(function(){
                /* ошибка при загрузке изображения, возможно, показать сообщение, например, 'предварительный просмотр не доступен'? */
                $zoom.fadeOut();
            }).attr('src',imgL_source);
        });
}).bind('mouseleave',function(){
    /* пользователь отодвигает курсор мыши от изображения, если копия еще не создана, очищаем значение задержки появления (пользователь, вероятно, прокручивал статью и не хотел рассматривать изображение) */
    if($('#ih_clone').length) return;
    clearTimeout(highlight_timeout);
});
/* пользователь отодвигает курсор мыши от копии изображения, если у нас еще не появилось изображение креста, чтобы закрыть предварительный просмотр, очищаем значение задержки появления */
$('#ih_clone').live('mouseleave',function() {
    var $clone = $('#ih_clone');
    if(!$clone.find('.ih_preview').length){
        $clone.remove();
        clearTimeout(highlight_timeout);
        $('#ih_overlay').hide();
    }
});

И это все! Надеемся, вам понравился этот урок!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

Опубликовано в css, марта 5, 2014
Метки: css, Jquery, jquery галерея, верстка, изображения jquery, урок css, урок верстка

�

Выделение и просмотр изображений с использованием jQuery

Разметка

CSS

JavaScript

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые