Главная » jQuery » jQuery плагин для увеличения изображений

jQuery плагин для увеличения изображений

Работая над заказом одного «товарищча», мне необходимо было добиться не простого увеличения картинки при наведении, а проработать возможность просмотра деталей при перемещении курсора по телу миниатюрной копии картинки. Задача была понятна как ясный день и механизмы исполнения тоже имелись, но мне хотелось как можно больше упростить, а самое главное добавить возможность настройки инструменту.
Пройдясь по злачным (для веб-разработчиков) местам натолкнулся на интереснейшее решение вопроса, полностью соответствующее моим требованиям, с которым и хочу познакомить всех, кто читает мои записи.
 
Плагин увеличения изображений
 
Прежде чем начнем полный расклад работы и структуры плагина, стоит все же взглянуть на него в действии, а уж затем, если возникнет непреодолимое желание, возвращайтесь к описанию:

Разметка HTML

Мудрить не будем и начнем с разметки, непосредственно на странице html. С этим надо сказать до безобразия просто, поверьте, проще уже некуда, максимально избежали ненужных элементов и раздутого кода HTML, не забыв однако сделать контент доступным даже с выключенным JavaScript, что порой бывает очень важно.
Все, что нужно для работы плагина это поместить миниатюру изображения с ссылкой на увеличенную картинку:
 

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>

 
Как не удивительно, но это все, остальную работу по выводу и оформлению увеличенной картинки мы возложим на стили css, библиотеку javascript и непосредственно сам плагин , который найдете в исходниках. В начало документа html, в раздел между тегами <head></head> или пред закрывающим тегом </body>, остается поместить следующее:
 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="easyzoom.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('a.zoom').easyZoom();
});
</script>

 

CSS

С точки зрения оформления плагина через стили css все, что вам нужно сделать, это определить размер элемента (изображения), только что созданного -плагином, а так же его местоположение и внешний вид. В примере я использовал такие параметры:
 

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:15px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #555;
	-webkit-box-shadow:0 0 10px #555;
	box-shadow:0 0 10px #555;
	/* вертикальное и горизонтальное выравнивание текста предзагрузки */
	line-height:400px;
	text-align:center;
	}

 
Экспериментируя с параметрами, добавляя новые, можно добиться впечатляющих результатов, для примера можете добавить закругленные углы блоку, или поработать с тенями box-shadow. Вы можете использовать свои собственные методы позиционирования, свой собственный текст сообщения, которое отображается в то время как детальное изображение загружается.

На этом всё, думаю надо постараться, чтобы ошибиться, или накосячить организовывая работу плагина у себя на сайте, так что всё у вас получится, а если не покатит вдруг, пишите в комментах, вместе разберем любую возникшую проблему :)).

Источник: Css Globe

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

3 комментария
  1. Интересный эффект. Еще бы можно было сохранять увеличенный фрагмент фото.

    Ответить
    • driver:

      Алексей, спасибо.

      Согласен с вами, сохранение увеличенного фрагмента фото стало бы отличным расширением функционала всего эффекта, но это уже совсем другая история.

      Ответить
  2. Мне очень понравился плагин. Но я не смог его установить.

    Вот что я сделал:

    --------------------------------------------------

    1. В корень своего сайта загрузил:

    — easyzoom

    — easyzoom.min

    — sample01.jpg

    — sample02.jpg

    ---------------------------------------------------

    2. На странице своего сайта установил:

    ---------------------------------------------------

    3. На этой же странице вверху вставил:

    ---------------------------------------------------

    head

    jQuery (function ($){

    $('a.zoom').easyZoom ();

    });

    / head

    -------------------------------------------------

    4. В файл стилей style.css прописал:

    #easy_zoom{

    width:600px;

    height:400px;

    border:5px solid #eee;

    background:#fff;

    color:#333;

    position:absolute;

    top:15px;

    left:400px;

    overflow:hidden;

    -moz-box-shadow:0 0 10px #555;

    -webkit-box-shadow:0 0 10px #555;

    box-shadow:0 0 10px #555;

    /* vertical and horizontal alignment used for preloader text */

    line-height:400px;

    text-align:center;

    }

    ------------------------------------------

    5. Все.

    Картинка появилась на странице а зум не работает.

    Может подскажете в чем дело.

    icq 267583086

    proncom@mail.ru

    Сергей

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »