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文件时，需要添加一个脚本元素来告诉Java正在激活一个元素。

尝试将以下内容置于您的头标记之间或缩略图div的结束标记下：

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

我使用了光滑的框，代码对我来说很好。

使用javascript函数弹出照片库以激活灯箱

1 个答案: