Плохо видишь? Да нет изображение маленькое!

Плохо видишь? Да нет изображение маленькое!

Необходимо было сделать эффект увеличения через лупу при наведении. Нашел классный скрипт на сайте  Там же вверху слева можно скачать скрипты.

Нужно просто закинуть скрипты к себе на сайт, в хедере прописать пути к ним, у меня получилось вот так

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
		$(function () {
			$("#img_01").imageLens();
			$("#img_02").imageLens({ lensSize: 200 });
			$("#img_03").imageLens({ imageSrc: "sample01.jpg" });
			$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
		});	
	</script>
	<script type="text/javascript" async="" src="//s3.buysellads.com/ac/bsa.js"></script>

И вставляя изображение нужно указать ей id

<img id="img_02" src="tree.jpg" width="100%" height="100%" style="margin:auto;"/>

Где img_02 это вариант примера.

Вот такой пример получился у меня — oshkay.ru

Так же кучу видов этой лупы можно найти на этой страничке

Опубликовано:31.01.2014inkognitod

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *