Javascript 确定单击了哪些照片缩略图，并打开带有较大照片的lightbox

我正在使用插件从头创建一个照片库。现在，我的图像在屏幕上填充的方式是使用：

<?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();
    }


?>

如果我想通过单击照片缩略图并打开Lightbox内更大的高分辨率来调用Lightbox\u me，我该怎么做？

您有以下内容（未正确嵌套）

---

#try-1和#sign-up指的是什么？这只是Lightbox#me网站的示例代码

#try-1

指的是单击的div，而

sign-up

指的是在lighbox中显示的div。调用lightbox时，页面加载时，

sign-up

div设置为

display:none

。

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

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>';

$('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})
});