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的{{1}}类中，我有39张照片。 Lightbox我的工作原理是：

photo

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

Answer 1

你有以下（不适当的nestede）

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

确定点击的照片缩略图并打开带有更大照片的灯箱

1 个答案: