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

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

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

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


Код
<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


6 комментариев:

  1. Спасибо, Виктория! Интересно про увеличительное стекло!

    ОтветитьУдалить
  2. Ирина, да, мне тоже нравится. Иногда можно применить.

    ОтветитьУдалить
  3. Ну, лупа лупой, а Мэрилин и так, и так - шикарная женщина. Недаром на нее западали почти все Кеннеди!

    ОтветитьУдалить
  4. Семён, вот поэтому, чтобы ещё раз посмотрели и вспомнили именно её я и выбрала в качестве примера.

    ОтветитьУдалить
  5. Очередная симпатичная фишка для картинок. Спасибо, Вика. Но HTML редактор кодов - это класс!

    ОтветитьУдалить
  6. Люба, редактор этот просто палочка - выручалочка. Вставляешь, подправляешь и тут же результат. А с увеличительным стеклом игралась с фото групповых снимков, вообще здорово.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML