javascript - 使用javascript函数激活灯箱让弹出窗口在照片库上工作

Question

我似乎无法在单击时让我的照片库正常工作。我正在尝试使用 java 函数来影响灯箱类型。

这是我的代码:

<div style="max-width: 888px; width: 100%; margin: 0 auto; text-align: center;" id="thumbnails">
$images_dir = 'images/med/full/';
$thumbs_dir = 'images/med/thumb/';
$thumbs_width = 300;
$thumbs_height = 300;
$images_per_row = 3;

/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
if(!file_exists($thumbnail_image)) {
    $extension = get_file_extension($thumbnail_image);
    if($extension) {
        make_thumb  ($images_dir.$file,$thumbnail_image,$thumbs_width,$thumbs_height);
    }
}
echo '<a href="',$images_dir.$file,'" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';
if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
}
echo '<div class="clear"></div>';
}
else {
echo '<p>There are no images in this gallery.</p>';
}

?>
</div>

我正在使用 Smoothbox，但我无法让它工作。我希望我可以编写一个更小的脚本，而不是使用上面链接中的脚本。

我研究过创建一个简单的灯箱，例如这个 here ，但我不确定如何将它与我上面的代码集成。

这是包含我的照片的网站链接，我希望它能在上面工作:http://davishosting.net/ginger/mediterranean

我希望照片放大并居中，其后的所有内容都具有半透明背景。

Answer 1

通过检查您的代码，您似乎没有对 Java 进行任何调用。

在链接一个js文件的时候，需要添加一个script元素来告诉Java一个元素正在被激活。

尝试将以下内容放在您的 head 标签之间或缩略图 div 的结束标签下:

<script type="text/javascript">
$(function() {
    $('#thumbnails a').lightbox();
});
</script>

我使用了 smooth box，该代码对我来说效果很好。