0

"CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (下のリンク) を使用していますが、これは問題なく動作します。

しかし、私は大きな画像をクリック可能にするのが好きです（親指だけでなく）。大きな画像として表示されている画像をクリックすると、別の大きなバージョンの画像が新しいウィンドウで開きます。

http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/

どんなアイデアでも大歓迎です。ありがとうございました。

4

2 に答える 2

0

大きな画像をアンカー要素でラップできます。

<div id="panel">
    <a href="images/image_01_largest.jpg" target="_blank">
        <img id="largeImage" src="images/image_01_large.jpg" />
    </a>
    <div id="description">First image description</div>
</div>

これは、1 つの画像に *_thumb.jpg、*_large.jpg、*_largest.jpg の 3 つのサイズがあるという規則に従います。あとは、#largeImage の src を変更するときにアンカーの href 属性を変更するだけです。

$('#thumbs img').click(function(){
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
    $('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
    $('#description').html($(this).attr('alt'));
});
于 2012-08-06T11:22:45.190 に答える