jQuery плагин для увеличения изображений
Работая над заказом одного «товарищча», мне необходимо было добиться не простого увеличения картинки при наведении, а проработать возможность просмотра деталей изображения при перемещении курсора по телу миниатюрной копии картинки. Задача была понятна как ясный день и механизмы исполнения тоже имелись, но мне хотелось как можно больше упростить, а самое главное добавить возможность настройки инструменту.
Пройдясь по злачным (для веб-разработчиков) местам натолкнулся на интереснейшее решение вопроса, полностью соответствующее моим требованиям, с которым и хочу познакомить всех, кто читает мои записи.
Прежде чем начнем полный расклад работы и структуры плагина, стоит все же взглянуть на него в действии, а уж затем, если возникнет непреодолимое желание, возвращайтесь к описанию:
Разметка HTML
Мудрить не будем и начнем с разметки, непосредственно на странице html. С этим надо сказать до безобразия просто, поверьте, проще уже некуда, максимально избежали ненужных элементов и раздутого кода HTML, не забыв однако сделать контент доступным даже с выключенным JavaScript, что порой бывает очень важно.
Все, что нужно для работы плагина это поместить миниатюру изображения с ссылкой на увеличенную картинку:
<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a> |
Как не удивительно, но это все, остальную работу по выводу и оформлению увеличенной картинки мы возложим на стили css, библиотеку javascript и непосредственно сам плагин jQuery, который найдете в исходниках. В начало документа html, в раздел между тегами <head></head> или пред закрывающим тегом </body>, остается поместить следующее:
<script type="text/javascript" src="http://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 все, что вам нужно сделать, это определить размер элемента (изображения), только что созданного zoom-плагином, а так же его местоположение и внешний вид. В примере я использовал такие параметры:
#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 и поделитесь ссылкой на запись в своих соц-сетях:
Интересный эффект. Еще бы можно было сохранять увеличенный фрагмент фото.
Алексей, спасибо.
Согласен с вами, сохранение увеличенного фрагмента фото стало бы отличным расширением функционала всего эффекта, но это уже совсем другая история.
Мне очень понравился плагин. Но я не смог его установить.
Вот что я сделал:
————————————————–
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
Сергей