0

画像をクリックすると中サイズの画像が表示され、中サイズをクリックするときれいな写真を使用して大きなサイズをロードする必要がありますが、小さな写真のいずれかをクリックして中画像をロードし、 ,edium 画像 きれいな写真が機能せず、大きな画像がリンクとして開きます

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

$(document).on("click",".image a",function(){
    var num = $(this).parent().index()+1;
    $(".bottom").slideUp(500,',function(){
        $(".bottom").html("<a rel='prettyPhoto' href='images/"+num+"_large.jpg'><img src='images/"+num+"_med.jpg'></a>").slideDown(500);    
    });
});

$("a[rel='prettyPhoto']").prettyPhoto();
});

html

<div class="container">

<div class="top">
<div class="image"><img src="images/1.jpg"  alt=""/></div>
<div class="image"><img src="images/2.jpg"  alt=""/></div>
<div class="image"><img src="images/3.jpg"  alt=""/></div>
</div>

<div class="bottom">
<a href="images/1_large.jpg" rel="prettyPhoto"><img src="images/1_med.jpg" width="640" height="480"  alt=""/></a>
</div>

</div>

ダウンロードする完全なコードhttp://www.mediafire.com/?xd97aonsjz3oyc0

およびhttp://jsfiddle.net/frTAY/3/

4

1 に答える 1

0

構文エラーがあります。これは、使用する正しいコードです。

$(document).on("click",".image a",function(){
    var num = $(this).parent().index()+1;
    $(".bottom").slideUp(500,function(){
        $(".bottom").html("<a rel='prettyPhoto' href='images/"+num+"_large.jpg'><img src=images/"+num+"_med.jpg></a>").slideDown(500);  
    });
});
于 2013-06-28T20:35:10.473 に答える