html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

 

 


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

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

Разметка

Для структуры 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

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

78
    +60 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • css
          • html
          • javascript
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции