Эффект лупы для изображения

Здесь расскажу вам как вставить на страничку, запись на сайте wordpress картинку с эффектом лупы (линзы, lens, zoom, масштабирование изображения).

Скачать исходники для статьи можно ниже

 

 
Посмотреть демо пример можно по следующей ссылке:
http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html

Данный метод достаточно прост в отличие от других, которые описаны на аналогичных блогах.

Что нам понадобиться?

  1. Подключить JQuery
  2. Подключить ImageLens плагин — jquery.imagelens.js
  3. Изображение

Для начала нам необходимо закачать скрипты, вот по этой ссылке:

http://www.dailycoding.com/Uploads/2011/03/imageLens.zip

Распаковываем zip архив и находим внутри папки два скрипта:

— jquery.imageLens.js

— jquery.js

Вот их нужно перебросить в корневую папку (можно выбрать и другую папочку) вашего сайта через программу FileZilla (можно использовать и другой ftp загрузчик).

Далее выбираем нужную нам страничку, на которой будет стоять изображение с эффектом лупы, для этого в панели управления переходим в Редактор страницы и выбираем закладку HTML.

Подключим JQuery и ImageLens плагин, для этого в самом начале кода странички вставим следующее:

 

<script src="http://mnogoblog2.16mb.com/jquery.js" type="text/javascript"></script>
	<script src="http://mnogoblog2.16mb.com/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>

 
где src=»http://mnogoblog2.16mb.com/jquery.js» и src=»http://mnogoblog2.16mb.com/jquery.imageLens.js»- это путь до скриптов, в данном примере я закачал скрипты в корневую папку сайта mnogoblog2.16mb.com, если вы закачаете скрипты на свой сайт, то путь измениться на src=»http://ваш сайт/jquery.js».

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

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

— sample01.jpg — разрешение 1280 на 800 px и достаточно хорошего качества.

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

Осталось вставить изображение на страничку и прописать к нему вызов функции эффекта лупы, а для этого прописываем на страничке во вкладке HTML следующий код:

 

<img id="img_01" src="http://mnogoblog2.16mb.com/sample01.jpg" width="384" height="240" />

 
где src=»http://mnogoblog2.16mb.com/sample01.jpg» — это путь до изображения, в данном примере я закачал изображение sample01.jpg в корневую папку сайта mnogoblog2.16mb.com.
 

У данного скрипта эффекта лупы есть свои настройки.
Например:
1. Можно изменить размер лупы, для этого необходимо изменить параметр id в теге img на id=»img_02″:

<img id="img_02" src="http://mnogoblog2.16mb.com/sample01.jpg" width="384" height="240" />

И лупа увеличиться в двое.
Во сколько раз должна увеличиться лупа задается в следующем коде:

$("#img_02").imageLens({ lensSize: 200 });

В примере у нас указано 200 (то есть 200%), но можно поставить любую цифру.

2. Также можно изменить границу лупы, ее толщину, цвет.
Данные параметры регулируются следующей строчкой кода:

$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

Где borderSize — размер границы лупы в px, а borderColor — цвет.

В нашем примере для придание лупе границы и цвета границы достаточно изменить параметр id в теге img на id=»img_04″:

<img id="img_04" src="http://mnogoblog2.16mb.com/sample01.jpg" width="384" height="240" />

3. Можно также изменить изображение картинки, к которой будет применяться эффект лупы, например сделать ее черно-белой, а в лупе она будет отображаться цветным, для этого необходимо изменить параметр id в теге img на id=»img_03″:

<img id="img_03" src="http://mnogoblog2.16mb.com/sample01.jpg" width="384" height="240" />

Данные параметры регулируются следующей строчкой кода, в которой и можно поменять подложенное изображение:

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

 
 
Теперь ознакомимся с возможными проблемами, которые могут возникнуть.
Главная проблема это смещение фонового изображение, которое находится внутри лупы, то есть наводим лупой на один фрагмент, а показывается фрагмент, расположенный немного левее или правее.
Скорее всего вам мешают стили темы вашего сайта (файл style.css вашей темы, шаблона).
Данную проблему я исправил с помощью создания индивидуального шаблона для страницы, где находится изображение с эффектом лупы.

Я просто создал новый индивидуальный шаблон на основе файла темы page.php и просто удалил в нем теги div мешающихся мне блоков, а именно:

Вот например код моего файла page.php

<?php get_header(); ?>
	<div class="grid_11">
      <div id="content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h1 class="entry-title"><?php the_title(); ?></h1>
			<div class="entry">
				<?php the_content('Continue reading &rarr;'); ?>
				<div class="clearfix"></div>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
		</div>
		<?php endwhile; endif; ?>
	 <?php edit_post_link('Edit', '<p>', '</p>'); ?>
	 <?php comments_template( '', true ); ?>
	 </div>
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

А вот код уже преобразованного на основе page.php индивидуального шаблона:

<?php
/*
Template Name: shirokii
*/
?>
<?php get_header(); ?>


		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<div class="post" id="post-<?php the_ID(); ?>">

		<h1 class="entry-title"><?php the_title(); ?></h1>

			<div class="entry">

				<?php the_content('Continue reading &rarr;'); ?>

				<div class="clearfix"></div>



				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>



			</div>

		</div>

		<?php endwhile; endif; ?>

	 <?php edit_post_link('Edit', '<p>', '</p>'); ?>
	 <?php comments_template( '', true ); ?>
	
<?php get_sidebar(); ?>

<?php get_footer(); ?>

Как видите я просто убрал код 2-х блоков:

<div class="grid_11">
      <div id="content">
...
</div>
</div>

И смещение фоновой картинки пропало.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Эффект лупы для изображения: 3 комментария

  1. Евгений

    Здравствуйте!
    Очень классная вещь, очень помогла!
    Только возник вопрос. как сделать чтобы эффект лупы работал на нескольких изображениях на одной странице?

  2. Константин

    На wordpress.org появились плагины (с помощью них легче реализовать эффект лупы на сайте чем подключать скрипты самому):
    — Zoom Image (wordpress.org/plugins/zoom-image/);
    — Imagelens (wordpress.org/plugins/imagelens/);
    — Wp-ImageZoom (wordpress.org/plugins/wp-imagezoom/);
    — Super Zoom Gallery (wordpress.org/plugins/super-zoom-gallery/).

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