1

2つの異なるスクリプトを一緒に動作させようとしています..

  • 1つは、クリックされたサムネイルに応じて大きな画像を変更する単純なサムネイル切り替えスクリプトです。http：//bonrouge.com/br.php？page=imageswitchから

  • もう1つは、 http： //www.dynamicdrive.com/dynamicindex4/featuredzoomer.htmから、マウスを置いた場所に応じてより大きな画像にズームする画像ズームスクリプトです。

問題は、サムネイルが最初の画像に切り替えられても2番目の画像に切り替えられても、常に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

次の 2 つの点が間違っていることに気付きました。

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:

毎回「1」が存在するかどうかを確認するのではなく、div が存在するかどうかを確認する必要があります。他にもいくつか編集を加えました (コード内のコメントを参照してください)。

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 ルールに従って update を追加します。

#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

ここでは、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..
于 2012-06-12T18:14:11.770 に答える