画像のJqueryポップアップ

Question

1つのHTMLページに3つ以上の画像があり、特定の画像をクリックした後にポップアップで同じ画像を表示する必要があります。私がこれに使用できるものはありますか？

<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300"> 
<img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300"> 
<img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300"> 

Answer 1

あなたは、これがクリックされた画像のソースを取得し、あなたのポップアップのためのソースとして使用されますあなたのイメージ

$('.wp-image-4596').click(function(){ $('#popupimage').attr('src', $(this).attr('src')); });

<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300"> <img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300"> <img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300"> <div id="popup"><!--this is your pop for example--> <img src='' id="popupimage"> </div>

にonclickの機能を追加することにより、JavaScriptでそれを行うことができますimage

Answer 2

ブートストラップモーダルを使用して行うことができます。私の答えは同じでthisをチェックしてください。

Answer 3

Lighty2のjQueryプラグインを使用しています。これはクールな効果と機能を備えています。

より単純なプラグインを使用したい場合は、magnaficポップアッププラグインを使用できます。