0

私のコードでは、テーブルにたくさんの画像があります。写真をクリックすると、写真が画面上に大きなサイズでポップアップ表示されます。しかし、私は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>

ポップアップボックスに画像を表示する方法を教えてください。前もって感謝します。

4

3 に答える 3

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>

クリックする画像が正しく表示されていると思います

于 2016-06-15T05:06:07.110 に答える
1

Jack Moore の Colorbox を使用することをお勧めします。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"); ?>

于 2016-06-15T05:08:31.173 に答える