увеличительное стекло для изображений в блоге

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

Я очень много тестировала подобных эффектов, но все они в Блоггере отказывались работать. Вот не так давно нашла руководство по его созданию здесь, чем и делюсь сегодня с вами. 

Для просмотра результата в работе, как всегда, скопируйте код и установите его в этом редакторе. Ещё рабочий вариант на тестовом блоге в самом низу сайдбара. 

Код

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0.min.js"></script><script type="text/javascript">

$(function() {

var native_width = 0;

var native_height = 0;

var mouse = {x: 0, y: 0};

var magnify;

var cur_img;

var ui = {

magniflier: $('.magniflier')

};

if (ui.magniflier.length) {

var div = document.createElement('div');

div.setAttribute('class', 'glass');

ui.glass = $(div);

$('body').append(div);

}

var mouseMove = function(e) {

var $el = $(this);

var magnify_offset = cur_img.offset();

mouse.x = e.pageX - magnify_offset.left;

mouse.y = e.pageY - magnify_offset.top;

if (

mouse.x < cur_img.width() &&

mouse.y < cur_img.height() &&

mouse.x > 0 &&

mouse.y > 0

) {

magnify(e);

}

else {

ui.glass.fadeOut(100);

}

return;

};

var magnify = function(e) {

var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;

var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;

var bg_pos = rx + "px " + ry + "px";

var glass_left = e.pageX - ui.glass.width() / 2;

var glass_top = e.pageY - ui.glass.height() / 2;

ui.glass.css({

left: glass_left,

top: glass_top,

backgroundPosition: bg_pos

});

return;

};

$('.magniflier').on('mousemove', function() {

ui.glass.fadeIn(100);

cur_img = $(this);

var large_img_loaded = cur_img.data('large-img-loaded');

var src = cur_img.data('large') || cur_img.attr('src');

// cur_img.data('large-img-loaded', true)

if (src) {

ui.glass.css({

'background-image': 'url(' + src + ')',

'background-repeat': 'no-repeat'

});

}

//if(!native_width && !native_height) {

if (!cur_img.data('native_width')) {

var image_object = new Image();

image_object.onload = function() {

native_width = image_object.width;

native_height = image_object.height;

cur_img.data('native_width', native_width);

cur_img.data('native_height', native_height);

//console.log(native_width, native_height);

mouseMove.apply(this, arguments);

ui.glass.on('mousemove', mouseMove);

};

image_object.src = src;

return;

} else {

native_width = cur_img.data('native_width');

native_height = cur_img.data('native_height');

}

//}

//console.log(native_width, native_height);

mouseMove.apply(this, arguments);

ui.glass.on('mousemove', mouseMove);

});

ui.glass.on('mouseout', function() {

ui.glass.off('mousemove', mouseMove);

});

});

</script>

<style type="text/css">

.glass {

width: 170px;

height: 170px;

position: absolute;

border-radius: 50%;

cursor: crosshair;

box-shadow:

0 0 0 7px rgba(255, 255, 255, 0.85),

0 0 7px 7px rgba(0, 0, 0, 0.25),

inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

display: none;

}

.magnifying {

margin: 50px auto;

text-align: center;

padding: 20px;

border: none!important;

}

</style>

<div class="magnifying">

<img class="magniflier" src="https://1.bp.blogspot.com/-X9uDmnYMyR8/X6P73yoNKrI/AAAAAAAAOUE/AUzYaPQBDSgf6lYj0bCwpGdixNLig6shwCLcBGAsYHQ/s16000/%25D0%25BC%25D0%25BE%25D0%25BD%25D1%2580%25D0%25BE.jpg" width="160" />

</div>

Первую строку я отметила другим цветом. Это скрипт библиотеки jquery. Если вдруг код не будет у вас работать, эту строку нужно удалить. Подробнее про jquery читаем здесь.

В строку синего цвета вставьте адрес вашей картинки. В начале статьи я писала, что можно применить на странице такой вариант увеличительного стекла к нескольким изображением сразу. 

Просто добавляйте новые классы div с другими адресами. 

На тестовом блоге, ссылка на который выше,  всё прекрасно разместилось в гаджете HTML/JavaScript. Так что,  в сообщениях блога такой вариант прекрасно устроится. Переходите в формат HTML в редакторе создания поста, в нужных местах пропишите 1 или несколько div ов с адресами картинок. А в конце сообщения, там же вставьте всю первую часть кода - JQuery, JavaScript и CSS3.

Собственно и ни каких хлопот, Нужны лишь адреса ваших изображений. Я пробовала очень много картинок - групповые фотографии, фото где не совсем видны мелкие детали. Реально получается просмотреть всё в увеличенном виде. Попробуйте.

Возможно вас заинтересует

Эффект увеличения миниатюр в блоге

Эффект света фонарика

На этом всё, спасибо вам за визит и до встречи.

 Получайте новые статьи прямо на почту

Введите Ваш email