2012-01-24 4 views
0

я бы хотелJQuery масштабирования несколько изображений

применить эффект трансфокатора к коллекции изображений сразу

как в этом примере http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm

я пытаюсь напрасно, но я не могу заставить его работать в скрипке http://bit.ly/AheChs или html-файл

Идея состоит в том, чтобы заставить ее работать для м есколько изображений

<!DOCTYPE html PUBLIC "-//W3C//Dtr XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtr/xhtml1-transitional.dtr"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <meta http-equiv="Content-Language" content="fr" /> 
      <title></title> 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="http://nathan-love.com/ddpowerzoomer.js"></script> 

<script type="text/javascript"> 
jQuery(document).ready(function($){ 

jQuery('div.zoom img').addpowerzoom({ 
magnifiersize: [120, 120]} //Set size of magnifier to 120px by 120px 
) 

}) 
</script> 
</head> 
     <body> 
    <div class="zoom">        
<img id="myimage" src="http://www.destination360.com/europe/france/images/french-riviera-beaches.jpg" alt="" /> 

<img id="myimage2" src="http://f.thumbs.redditmedia.com/ZI2tZmWPMLldHK8q.jpg" alt="" /> 


    </div> 

</body>  
    </html> 

ответ

0

Я никогда не использовал этот сценарий, но если вы посмотрите на источнике:

//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs 
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image 

jQuery(document).ready(function($){ 
    var $targets=$('.magnify') 

Похоже, он ищет изображения с классом «увеличить».

также:

$targets.each(function(i){ 
     var $target=$(this) 
     var options={} 
     if ($target.attr('data-magnifyto')) 
      options.magnifyto=parseFloat($target.attr('data-magnifyto')) 
     if ($target.attr('data-magnifyby')) 
      options.magnifyby=parseFloat($target.attr('data-magnifyby')) 
     if ($target.attr('data-magnifyduration')) 
      options.duration=parseInt($target.attr('data-magnifyduration')) 
     $target.imageMagnify(options) 
    }) 

Похоже, что вы можете добавлять атрибуты тегов изображения для хранения мета-данные ему необходимо:

<img src="..." data-magnifyby="2" ... etc /> 
+0

я пытался использовать атрибут возвеличивать, но отмечая происходит – user472285

+0

Это просто подсказки. Возможно, вам действительно удалось найти пример этой работы или перейти на сайт DEV. –

Смежные вопросы