Question

我喜欢

将电动变焦效果同时应用于一组图像

就像在这个示例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>

Answer 1

我从未使用过这个脚本，但如果你看一下源代码：

//** 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 />

jQuery缩放多个图像

1 个答案: