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

【问题标题】：combining a div thumbnail switching script with an image zoom script将 div 缩略图切换脚本与图像缩放脚本相结合
【发布时间】：2012-06-15 14:53:32
【问题描述】：

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

一个简单的缩略图切换脚本，根据单击的缩略图更改大图像，来自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>

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

【问题讨论】：

标签： javascript jquery css html thumbnails

【解决方案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' 是否存在。我还进行了其他一些编辑（请参阅代码中的我的 cmets）。

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

【讨论】：

感谢您的回答 :) 我尝试了上述更改，但不幸的是它仍然无法正常工作。当我将鼠标悬停在图像的上部时，它会显示“红色”，当我将鼠标悬停在下部时，会显示“蓝色”，无论我切换到哪个 div。也许是因为 div 重叠和隐藏？
@user1227914 好的，我做了一些修改。像我一样更新 CSS 规则和 switch1 函数，看看它是否有效。基本上，我正在尝试将隐藏的图像移出屏幕。我有点担心 image1 会起作用，但是当你切换到 image2 时，它不会。如果是这种情况，您可能需要在每次切换图像时调用addimagezoom 插件。让我知道...

【解决方案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..

【讨论】：