画像をクリックした後に画面上に画像をポップアップする方法

Question

私のコードでは、テーブルにたくさんの画像があります。私は写真&をクリックしたいと思います、そして、写真は画面上に大きなサイズでポップアップします。しかし、私はjavascript & jqueryについてあまり考えていません。私はこれをやろうとしますが、問題はポップアップボックスですが、画像は表示されません。私は、その絵を示すためのスクリプトにはプロブラムがあることを知っています。クリック後にどこが間違っているのか教えてください。

私のヘッダーは、下にあります。追加される他のリンクが必要ですか？ここ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" /> 
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script> 

はhtmlの一部です：ここ

<div> 
    <td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td> 
</div> 

はjavascriptのです：

<script type="text/javascript"> 
    function popup() { 
     w2popup.open({ 
      title: 'Image', 
      body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>' 
     }); 
    } 
</script> 

誰もがポップアップボックスに画像を表示する方法を私を助けてくださいすることができます。前もって感謝します。

Answer 1

代わりのonclick属性で簡単に使用することができ、あなたはあなたのimgにクラスpopup_imageを割り当て、DOMの準備ができたときにクリックハンドラをアタッチできます。

私は、結果を実証するために必要ではないスクリプトとタグを削除する自由を取った。

$(document).ready(function() { 
 

 
    $(".popup_image").on('click', function() { 
 
    w2popup.open({ 
 
     title: 'Image', 
 
     body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>' 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" /> 
 

 
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>

Answer 2

いかなる試み以下であなたのjqueryのを置き換えます

<script type="text/javascript"> 
    function popup() { 
     var image = $(this).attr('src'); 
     w2popup.open({ 
      title: 'Image', 
      body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>' 
     }); 
    } 
</script> 

を私はイメージが私はジャック・ムーアによるカラーボックスを使用することをお勧めします

Answer 3

をクリックしますどの正常に表示されていると仮定します。それはJQueryを使用し、非常にカスタマイズ可能です。

カラーボックス：http://www.jacklmoore.com/colorbox/

デモ：http://www.jacklmoore.com/colorbox/example1/

あなたがPHPを使用するのではなくされていない場合、あなたはまた、UberGalleryをチェックアウトすることができます。これは、内部的にカラーボックスを使用し、

<?php include_once('UberGallery.php') UberGallery::init()->createGallery("path to dir","name of gallery"); ?>