Здесь расскажу вам как вставить на страничку, запись на сайте 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>

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