2

写真がクリックされたときに表示されるdivを取得しようとしています。この div には、クリックされた画像のみを大きくする必要があります。私はこれを機能させることはできません。私はさまざまなことを試しましたが、誰かが私を助けたり、いくつかの指針を与えてくれることを願っています.

最初に、php の while ループで生成された html 画像があります。

<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>

次に、前の画像をクリックしたときに表示したい div の CSS を作成します。

#showimagediv {
    display: none;
    width: 500px;
    height: 500px;
    margin-left: 100px;
    margin-top: -300px;
    position: fixed;
    background-color: #f00;
    z-index: 6;
}

最後に、作成しようとした Jquery コードがいくつかあります。

<script>
$(document).ready(function() {
    $(\"#gallerythumbnail\").click(function( event ) {
        $(\".showimagediv\").show();
    });
});
</script>

次の行を使用して、クリックした画像のアドレスを取得できることを知っています。

$(this).attr('src')

画像がクリックされたときに表示されるdivで使用する方法がわかりません

誰かが私の言いたいことを理解し、正しい方向に私を助けてくれることを願っています.

4

3 に答える 3

0

まず、CSS コード#showimagediv. #は ID 属性を表します。あなたのjQueryコードは.showimagediv. . クラス属性を表します。

そのため、最初に showimagediv が ID か DIV かを判断し、CSS または jQuery を修正する必要があります。

それよりも、「クリック可能」になるように img タグを a 内に配置します。href="#" は、クリックしても何も起こらないことを意味します。

<a href="#" id="image">
    <img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
</a>

jQuery 関数を次のように変更します (class 属性の場合は div.showimagediv を使用し、id 属性の場合は div#showimagediv を使用します)。

$(function() {
    $("a#image").click(function() {
        $("div.showimagediv").css("display", "block");
    });
});

したがって、リンク内の画像をクリックすると、表示値がnoneからblockに変更されます。これはトグルしません。一度表示され、再び非表示になることはありません。

切り替える必要がある場合は、次のように jQuery 関数内で制御する必要があります。

$(function() {
    $("a#image").click(function() {
        var actualDivDisplay = $("div.showimagediv").css("display");
        var newDivDisplay = "";

        if (actualDivDisplay == "none") {
            newDivDisplay = "block";
        } else {
            newDivDisplay = "none";
        }

        $("div.showimagediv").css("display", newDivDisplay);
    });
});
于 2013-09-09T23:45:41.370 に答える