0

Lightbox_meプラグインを使用して、フォト ギャラリーをゼロから作成しています。現在、私の画像が画面に表示される方法は、次を使用することです。

<?php
require 'DB.php';

    try{      
    $stmt ='SELECT * FROM victoria';
    foreach ($conn->query($stmt) as $row)
        {
        echo ('<div class="photo"> <a href="images/photoGallery/' . $row['name'] .'"> 
               <img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');

        }
    }  catch (PDOException $e){
        echo 'Connection failed: ' . $e->getMessage();
    }


?>

各写真は、現在私が 39 枚の写真を持っているdivという名前のクラス内に保存されます。photoLightbox me は、次のように呼び出して機能します。

$('#try-1').click(function(e) {
    $('#sign_up').lightbox_me({
        centered: true, 
        onLoad: function() { 
            $('#sign_up').find('input:first').focus()
            }
        });
    e.preventDefault();
});

写真のサムネイルをクリックし、ライトボックス内の大きな高解像度を開いて Lightbox_me を呼び出したい場合、どうすればよいですか?

4

1 に答える 1

1

あなたは以下を持っています（適切にネストされていません）

echo ('<div class="photo"> <a href="images/photoGallery/' . $row['name'] .'"> 
           <img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');

まずはここを変更して、こんな感じに

echo '<div class="photo"><a href="images/photoGallery/' . $row['name'] .'"> 
           <img src="images/photoGallery/thumbnails/' . $row['name'] . '" /></a></div>';

.photo a次に、のようにクリックイベントを登録します

$('div.photo a').on('click', function(e){
    e.preventDefault();
    var img = $('<img/>', {'src':$(this).attr('href')}),
        div = $('<div/>', {'id':'lightBoxWrapper', 'style':'display:none;'});
        $('body div#lightBoxWrapper').remove();
        $('body').append(div.append(img));
        $('#lightBoxWrapper').lightbox_me({centered: true})
});
于 2013-09-15T20:23:06.787 に答える