1

我正在尝试让 2 个不同的脚本一起工作..

问题是它总是显示第二张图像，无论缩略图是切换到第一张还是第二张。我认为这与 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>

如果有人知道出了什么问题，我保证我会以你的名字命名我的长子！

4

2 回答 2

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. */
}
于 2012-06-12T17:18:05.750 回答
0

在这里，您调用了两个图像：

  <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..
于 2012-06-12T18:14:11.770 回答