Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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="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 все, что вам нужно сделать, это определить размер элемента (изображения), только что созданного -плагином, а так же его местоположение и внешний вид. В примере я использовал такие параметры:
 

#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 и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 3

  • Алексей: 22 декабря, 2011 в 18:30

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

    Ответить
    • driver: 23 декабря, 2011 в 18:02

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

      Ответить
  • Сергей: 12 сентября, 2012 в 17:59

    Мне очень понравился плагин. Но я не смог его установить.
    Вот что я сделал:
    ————————————————–
    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
    Сергей

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>