Question

我想让两个不同的脚本一起工作..

一个是简单的缩略图切换脚本，可根据点击的缩略图更改大图像，来自http://bonrouge.com/br.php?page=imageswitch
另一个是图像缩放脚本，根据鼠标悬停的位置缩放到更大的图像，来自http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

问题是它总是显示第二张图像，无论缩略图是切换到第一张还是第二张。我认为这与div重叠或其他事情有关。

这是组合代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#image-switch ul {
margin:0 0 0 20px;
color:red;
list-style-type:none;
}
#image-switch li {
padding:10px;
}
#image-switch #two, #image-switch #three, #image-switch #four, #image-switch #five {
display:none;
}
#radiobs {
width:150px;
position:relative;
margin:0;
}
#radiobs input {
margin:0;
padding:0;
position:absolute;
margin-left:6em;
width:15px;
}
</style>
<style type="text/css">
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>
</head>
<body>
<div id="image-switch">

<div class="fright">
<div id="one">
<img id="image1" src="redsmall.jpg" height="193" width="150" alt="redsmall" />
<p>This is a red one.</p>
</div>
<div id="two">
<img id="image2" src="bluesmall.jpg" height="193" width="150" alt="bluesmall" />
<p>This is a blue one.</p>
</div>
</div>
</div>



<ul>
<li><a onclick="switch1('one');">first frame</a></li>
<li><a onclick="switch1('two');">second frame</a></li>
</ul>
<div class="clear"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="featuredimagezoomer.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($){

$('#image1').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [450,350],
    magnifierpos: 'right',
    cursorshade: true,
    largeimage: 'redbig.jpg' //<-- No comma after last option!
})

$('#image2').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [450,350],
    magnifierpos: 'right',
    cursorshade: true,
    largeimage: 'bluebig.jpg' //<-- No comma after last option!
})

})

</script>

<script type="text/javascript">
function switch1(div) {
var options, obj, id; 
if (document.getElementById(div)) { // change this to div instead of 'one'
    options=['one','two','three','four'];
    for (var i=0; i<options.length; i++) { 
        id = options[i]; // caching the array item is good practice bc array/object     access is slow
        obj=document.getElementById(id);
        if (!obj) { continue; } // make sure the obj exists
        obj.style.display = (id === div) ? "block" : "none"; 
       }
   }
}
//
</script>
</body>
</html>

如果有人有任何想法有什么不对，我保证我会在你之后命名我的长子！

Answer 1

我注意到有两件事是错的：

<强> 1

您同时使用#image1

jQuery(document).ready(function($){

    $('#image1').addimagezoom({
        zoomrange: [3, 10],
        magnifiersize: [450,350],
        magnifierpos: 'right',
        cursorshade: true,
        largeimage: 'redbig.jpg' //<-- No comma after last option!
    }); //use semicolons

    $('#image2').addimagezoom({ // **** image2 not image1!!! ****
        zoomrange: [3, 10],
        magnifiersize: [450,350],
        magnifierpos: 'right',
        cursorshade: true,
        largeimage: 'bluebig.jpg' //<-- No comma after last option!
    }); //use semicolons

}); //use semicolons

<强> 2

您需要检查div是否存在，而不是每次检查是否存在“one”。我还做了一些其他的编辑（参见我在代码中的评论）。

var switch1;
(function($){ // let's use jQuery, its on the page anyway
    switch1 = function(div) {
        var options, $obj, id; 
        if ($('#' + div).length) { // change this to div instead of 'one'
            options=['one','two','three','four'];
            for (var i=0; i<options.length; i++) { 
                id = options[i]; // caching the array item is good practice bc array/object access is slow
                $obj=$('#' + id);
                if (!$obj.length) { continue; } // make sure the obj exists
                $obj.css({
                    "display": id === div ? "block" : "none",
                    "left": id === div ? "0" : "10000px"
                });
            }
        }
    }
})(jQuery);

修改既然你现在都看到了这两个，我想我们需要确保隐藏的图像被移出屏幕（然后我们将它们移回）。为此，请按照css规则添加更新：

#two, #three, #four, #five { /* using two id selectors in a row is unnecessary */ display: none; position: relative; left: 10000px; /* move them wayyy off screen. */ }

Answer 2

在这里，您调用了两张图片：

  <img id="image1" src="redsmall.jpg" height="193" width="150" alt="redsmall" /> 
  <img id="image2" src="bluesmall.jpg" height="193" width="150" alt="bluesmall" />

These two images should be seen as you only applied zoom feature using jQuery.
 Probably,in style section..you need to make some modifications.

 Following seems to be erratic work. 
                <li><a onclick="switch1('one');">first frame</a></li>

  Here,this shud be da way
                <a=" " onclick="switch1();"> or <a=# onclick="switch1();">

Moreover,U got all divs stored in options..so u dun need div to be passed.
U can refer to option[index]..And also, document.getElementById(img).src would be         required.

I amnt providing you the code.But hope these informations help you..

将div缩略图切换脚本与图像缩放脚本相结合

2 个答案: