Плагин для jquery - Магический зоом

23.12.2010

Плагин подключается на страницу в виде ненавязчивого Javascript и позволяет просматривать маленькие картинки в увеличенном виде, в окошке небольшого размера.

Полезно, если не хочется использовать скрипты вроде Lightbox или Fancybox, и на странице мало места.

Пример включения скрипта на страницу:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://siteforever.ru/files/scripts/jquery.ezoom.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('a.magiczoom').ezoom({width: 400, height: 250, top: 10, left: 10});
    })
</script>

<a class="magiczoom" href="http://siteforever.ru/files/scripts/images/r1-blue-3.jpg"> 
    <img alt="" src="http://siteforever.ru/files/scripts/images/r1-blue-2.jpg" /> 
</a> 
<a class="magiczoom" href="http://siteforever.ru/files/scripts/images/r1-red-3.jpg"> 
    <img alt="" src="http://siteforever.ru/files/scripts/images/r1-red-2.jpg" /> 
</a> 
<a class="magiczoom" href="http://siteforever.ru/files/scripts/images/r1-black-3.jpg"> 
    <img alt="" src="http://siteforever.ru/files/scripts/images/r1-black-2.jpg" /> 
</a>

 

Необязательные параметры:

  • width - ширина области, куда будет выводиться зум
  • height - высота области, куда будет выводиться зум
  • top - верхняя координата, куда будет выводиться зум
  • left - левая координата, куда будет выводиться зум
  • holder - id элемента (без #), в который будет выводиться зум. Если не указан, будет использован элемент по умолчанию (<div id="ezoom_holder"></div>)