3

私はターゲットである div を持っています:

<div id="rightbox"></div>

グループごとに整理されたサムネイル画像があります。

<img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
<img src="group1/thumb/02.png" width="160" height="97" class="imgtopright" />
<img src="group2/thumb/01.png" width="160" height="97" class="imgbottomleft" />
<img src="group2/thumb/02.png" width="160" height="97" class="imgbottomright" />

そして、各親指に対応する大き​​な画像があります。

<img src="group1/large/01.png" width="560" height="297" class="largeimage" />
<img src="group1/large/02.png" width="560" height="297" class="largeimage" />
<img src="group2/large/01.png" width="560" height="297" class="largeimage" />
<img src="group2/large/02.png" width="560" height="297" class="largeimage" />

関数を使用して、対応するサムネイルがターゲット div (id="rightbox" を使用) でクリックされたときに、それぞれの大きな画像を表示できるかどうかを知りたいですか?

注: 対応する大き​​な画像を含むサムネイルのグループが約 10 個あり、それぞれが特定のフォルダーにあります。すべての画像を同じディレクトリに配置し、image01_thumb.jpg や image01_large.jpg などの異なる命名規則を使用することはできますが、最終的には、ターゲット div の各サムを開くことができるようにしたいと考えています。

私はこれを隅々まで調べましたが、この正確な質問への回答はまだ見つかりません。

すべての提案とヘルプは大歓迎です。

4

4 に答える 4

5

大きな画像が要素に既に存在すると仮定すると、次の#rightboxことをお勧めします。

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').hide();
            $('#rightbox img').eq(that.index()).show();
            /* or:
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').show();
            */
        }
    });

ただし、それらが DOM に存在するが に存在しない場合#rightbox:

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').clone().appendTo('#rightbox');
        }
    });

それらが DOM に存在しないが、作成する必要がある場合:

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large'),
                newImg = $('<img />',{src : newSrc}).appendTo('#rightbox');
        }
    });

参考文献:

  1. jQuery:
  2. 「プレーン」な JavaScript
于 2012-04-27T13:15:51.380 に答える
1

これを試して：

$("img").click(function(){
    var largesrc = $(this).attr("src").replace("thumb","large");
    $("#rightbox").html('<img src="'+largesrc+'" width="560" height="297" class="largeimage" />');
});

img がクリックされると、この関数は画像の src を取得し、フォルダーのつまみを大きなものに置き換えてから、これをその src を含む画像として rightbox div に配置します。これにより、ページ上のすべての画像に対してこれが行われるため、小さい画像に「smallimage」などのクラスを指定してから、最初の行を次のように変更することができます。$(".smallimage").click(function(){

于 2012-04-27T13:21:45.313 に答える
0

これをソース コードとして使用し、リンクのクリック イベントをハイジャックします。

<a href="group1/large/01.png" class="viewLargeImage">
   <img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
</a>

この JavaScript では:

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $(this).replaceWith( "<img src=" + bigPath + " />" );
});

右のボックスに表示する必要がある場合:

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $('#rightbox').html( "<img src=" + bigPath + " />" );
});

その後、Google は大きな画像にインデックスを付けることができ、JavaScript を使用していない人でもそれらを見つけることができます。

于 2012-04-27T13:25:38.997 に答える
0

これは役に立ちますか？指定された幅を変更するだけで、高さが自動的に変更されます。

$(document).ready(function() {
        $(".imgtopleft").click(function() {
            $(".imgtopleftlargerimage").css("width","1000");
        });
});
于 2012-04-27T13:15:01.963 に答える