Простой способ увеличения эскизов при наведении мыши на веб-странице

Question

В моем проекте есть страницы со многими изображениями на них. Размеры 150х150. Мы хотим, чтобы сайт отображал полноразмерное изображение при зависании над каждым эскизом. Я хотел бы знать самый простой способ выполнить это, будь то использование HTML или JavaScript или CSS, а также основные шаги, чтобы начать играть с ним и получить его.

Я ищу простое решение, учитывая, что мой набор навыков - это базовый JavaScript и HTML, и я не знаком с тем, как работает CSS.

Answer 1

Я хотел бы посмотреть в использовании библиотеки как лайтбокс (http://lokeshdhakar.com/projects/lightbox2/) или Jquery зум (http://www.jacklmoore.com/zoom/)

Answer 2

Попробуйте удалить атрибуты ширину и высоту при наведении курсора мыши, и их восстановлении на отведении указателя мыши.

$("img").mouseover(function() { 
 
    this.setAttribute("data-width", this.width); 
 
    this.setAttribute("data-height", this.height); 
 
    this.removeAttribute("width"); 
 
    this.removeAttribute("height"); 
 
}); 
 
$("img").mouseout(function() { 
 
    this.setAttribute("width", this.getAttribute("data-width")); 
 
    this.setAttribute("height", this.getAttribute("data-height")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img height="25" width="25" src="https://www.gravatar.com/avatar/a5563b966d383529a65612e6590f957f?s=128&d=identicon&r=PG">

Пара предостережений:

1. Вам не нужно JQuery - но я использовал его здесь, чтобы избежать необходимости иметь дело с различиями в моделях событий между браузерами
2. Возможно, вы не хотите, чтобы это выполнялось для каждого изображения. В этом случае замените img с классом, как .hoverable

более компактная версия, используя дополнительные функции JQuery:

$("img").hover(function() { 
 
    $(this).attr({ 
 
     'data-width': this.width, 
 
     'data-height': this.height 
 
    }).removeAttr('width').removeAttr('height'); 
 
}, function() { 
 
    $(this).attr({ 
 
     width: $(this).attr('data-width'), 
 
     height: $(this).attr('data-height') 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img height="25" width="25" src="https://www.gravatar.com/avatar/a5563b966d383529a65612e6590f957f?s=128&d=identicon&r=PG">