Javascript-форум - Появление лупы при наведении на картинку

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Появление лупы при наведении на картинку (https://javascript.ru/forum/jquery/58538-poyavlenie-lupy-pri-navedenii-na-kartinku.html)

Dash	28.09.2015 12:41

Появление лупы при наведении на картинку

Добрый день! Была идея создать галлерею, при наведении на картинку превью появляется лупа над этой же картинкой, когда мышка уходит, она исчезает.
Сначала реализовал на css свойством hover и z-index, но если курсор попадает на эту лупу, то она начинает мерцать (то есть мы, как бы, покидаем пределы картинки, к которой этот hover привязан).
Потом jQuery, но и тут возникает "баг", если курсор попадает на лупу.
Сама лупа сделана абсолют, и появляется в уголке картинки при наведении.

$(function() {
		$('div a').mouseenter(function() {
			$('img.magnifier').fadeIn('100');
		});
		$('div a').mouseleave(function() {
			$('img.magnifier').fadeOut('100');
		});
	});

Надеюсь все доходчиво объяснил :write:
Может быть у кого есть идеи, как сделать появляющуюся картинку более стабильной?

ksa	28.09.2015 13:19

Цитата:

Сообщение от Dash

как сделать появляющуюся картинку более стабильной?

Дык!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
span {
	position: relative;
	display: inline-block;
}
.test {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}
span:hover > .test {
	visibility: visible;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<span>
	<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
	<img class='test' src='http://javascript.ru/forum/images/smilies/wink.gif' />
</span>
</body>
</html>

Dash	28.09.2015 13:50

Здорово! Правда, после плавной анимации, не охота возвращаться к css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script type="text/javascript">
	$(function() {
		$('div a').mouseenter(function() {
			$('img.magnifier').fadeIn('100');
		});
		$('div a').mouseleave(function() {
			$('img.magnifier').fadeOut('100');
		});
	});
</script>
<style>
	img.prev {
		padding: 4px; 		border:1px solid grey; 		box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}	
	img.prev:hover {
		box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
	}
	
	img.magnifier {
		padding:0;margin:0;border:none;position:absolute; 		bottom: 24px; 		right: 10px; 		z-index:99; 		display:none;
	}
	div a {
		position:absolute;top:0;left:0;display:inline-block;
	}
</style>
</head>
<body>
<div style="position:relative;width:170px; height:130px;">
<img class="magnifier" alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/magnifier_.png" width="40" height="40" /><a  href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery"><img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" /></a>
</div>
</body>
</html>

рони	28.09.2015 14:10

Dash,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>

<style>
	img {
		padding: 4px; 		border:1px solid grey; 		box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
	img:hover {
		box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
	}


	div:hover:after { content: '';
        width: 40px; height:40px;
        background-image: url(http://files.boysgame.su/games/magnifier_.png);
         background-size: cover;
		position:absolute;bottom: 24px;       right: 10px;   display:block;
	}
</style>
</head>
<body>
<div style="position:relative;width:170px; height:130px;">
<a  href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery">
<img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" />
</a>
</div>
</body>
</html>

ksa	28.09.2015 14:22

Цитата:

Сообщение от Dash

после плавной анимации

ЦСС тут вовсе ни при чем... :no:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.foto {
	position: relative;
	display: inline-block;
}
.test {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.foto')
		.mouseover(function(){
			$(this).children('.test').stop().fadeIn();
		})
		.mouseout(function(){
			$(this).children('.test').stop().fadeOut();
		});
});
</script>
</head>
<body>
<span class='foto'>
	<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
	<img class='test' src='http://javascript.ru/forum/images/smilies/wink.gif' />
</span>
</body>
</html>

Dash	28.09.2015 15:40

ksa, на основе Вашего кода удалось, наконец, создать нужный эффект. Благодарность :thanks: Заменил события mouseenter на mouseover, а mouseleave на mouseout, + пригодилось кое-что из CSS.

Осталось поколдовать немного, чтобы лупа также была ссылкой (сейчас cursor:pointer).

рони, Ваш вариант почти то, но все же отдал предпочтение варианту с плагином

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script type="text/javascript">
	$(function() {
		$('div.thumbnail').mouseover(function() {
			$('img.magnifier').stop().fadeIn('100');
		})
		.mouseout(function() {
			$('img.magnifier').stop().fadeOut('100');
		});
	});
</script>
<style>
	img.prev {
		padding: 4px;border:1px solid grey;box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}	
	div.thumbnail:hover img.prev {
		box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
	}	
	img.magnifier {
		padding:0;margin:0;border:none;position:absolute;bottom: 12px;right: 10px;z-index:99;display:none;cursor:pointer;
	}
</style>
</head>
<body>
<div class="thumbnail" style="position:relative;display:inline-block;">
<img class="magnifier" alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/magnifier_.png" width="40" height="40" />
<a  href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery"><img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" /></a>
</div>
</body>
</html>

рони	28.09.2015 15:57

Dash,
зачема плагин?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>

<style>
	img.prev {
		padding: 4px;border:1px solid grey;box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
	div.thumbnail:hover img.prev {
		box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
	}
	img.magnifier {
	  padding:0;margin:0;border:none;position:absolute;bottom: 12px;right: 10px;z-index:99;transition: all .6s ease-in-out;
      opacity: 0;cursor:pointer;
	}
    div.thumbnail:hover img.magnifier{
       opacity: 1;
    }

</style>
</head>
<body>
<div class="thumbnail" style="position:relative;display:inline-block;">
<img class="magnifier" alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/magnifier_.png" width="40" height="40" />
<a  href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery"><img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" /></a>
</div>
</body>
</html>

ksa	28.09.2015 16:03

Цитата:

Сообщение от Dash

Осталось поколдовать немного, чтобы лупа также была ссылкой

Так можно ссылку и использовать... ;)
Лупу фоновой картинкой.

Dash	29.09.2015 19:54

ksa, да, все под ссылку засунул, так сработало.

рони, интересное решение. В сравнении jquery эффект оказался стабильнее + плюшка работы в старых ослах. Остановлюсь на этом :agree:

Агата Лёд

08.08.2017 21:27

Поздно, но вдруг кому-то пригодится:

Цитата:

если курсор попадает на эту лупу, то она начинает мерцать (то есть мы, как бы, покидаем пределы картинки, к которой этот hover привязан).
Потом jQuery, но и тут возникает "баг", если курсор попадает на лупу.

Нужно для элемента лупы поставить стилевое свойство:

pointer-events:none;

Таким образом, он как-бы станет невидимым для мыши.

Часовой пояс GMT +3, время: 03:31.