0

私は次のようにjQueryUIダイアログモーダルを使用しています:

<div id="dialog-modal" title="Basic modal dialog">
    <img src="#" alt="Pictures" />
</div>

任意の時点で 3 つの画像アイコンを表示する PHP foreachループがあります。画像の URL は MySQL データベースにあります。画像自体はアンカー タグ内に含まれ、サムネイルとして表示されます。<a>には「theLink」というクラスが含まれています。jQueryは、「theLink」をクリックすると（つまり、写真をクリックすると）ダイアログを開くことを認識しています。

私の希望は、画像をクリックしてサムネイルよりもはるかに大きく表示できるようにすることです。そして、画像リンクが表示されるモーダル ダイアログに動的に転送されます。<body>繰り返しになりますが、タグのすぐ下に 1 つのモーダル ダイアログ div (上記を参照) があります。これは私が探しているものです：

「theLink」をクリックすると、PHP によって生成された画像リンクが img から取得され、それを使用してモーダル div の「#」が置き換えられます。

<a> <img src="PHP GENERATED" /> </a>
4

1 に答える 1

1

jQueryの基本を理解することで答えを見つけました。

PHPで生成された画像にImageLinkというクラスを作成する必要がありました。一度に 3 つのサムネイルを表示すると、このクラスは 3 回繰り返されるため、ID ではなくクラスを使用する必要がありました。

特定の imageLink クラスを指すことができるように、キーワード「this」は重要でした。

  <a><img src="PHP GENERATED" class="imageLink" /></a>

次に、jQuery で次のようにします。

    var realImage = $(this).find('.imageLink').attr("src");
    $('#popUpImage').attr('src', realImage);
    $('#dialog-modal').dialog('open');
于 2012-05-23T23:40:59.970 に答える