javascript - 确定点击了哪些照片缩略图并打开带有更大照片的灯箱

Question

我正在使用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();
    }


?>

每张照片都存储在一个div名为的类中photo，现在我有 39 张照片。Lightbox me 通过以下方式工作：

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

如果我想通过单击照片缩略图并在灯箱内打开较大的高分辨率来调用 Lightbox_me，我该怎么做？

Answer 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})
});