我正在尝试将缩略图翻转(在拇指上方显示更大的图像)与 Fancybox 结合起来。如果你看看这个测试页面,你会明白我在说什么: http: //www.neptune-design.com/sites/test/products.php
当您滚动拇指时,上面的大图像会正确更改。我想要它,这样当你点击上面的大图时,它会使用fancybox打开一个更大的图像。正如您从我的测试页面中看到的,翻转效果很好,但是当您单击大图像时,它总是打开图像 1,而不是当前图像(已翻转)。
目前,图像名称存储在一个字符串中,但它们最终会从数据库字段中提取出来。这是我的代码:
翻转部分的一些javascript:
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
其余的在这里:
<?php
$allpics = "1.jpg,2.jpg,3.jpg,4.jpg";
$pictures = array();
$pictures = explode(",", $allpics);
<a href = "images/products/big/<?php echo $pictures[0]; ?>" class = "fancybox"><img id="main" src="images/products/small/<?php echo $pictures[0]; ?>" class = "bigImage"></a>
<?php
for ($i=0;$i<count($pictures);$i++) { ?>
<div class = "imageHolder" id = "thumb<?php echo $i; ?>">
<a href="images/products/small/<?php echo $pictures[$i]; ?>" onmouseover="swap(this);" onclick="return false;"><img src="images/products/small/<?php echo $pictures[$i]; ?>" class = "smallImage"></a></div>
<?php } ?>
for 循环当然会获取图像文件名并将其显示在缩略图框中。我怎样才能改变这部分:
<a href = "images/products/big/<?php echo $pictures[0]; ?>" class = "fancybox"><img id="main" src="images/products/small/<?php echo $pictures[0]; ?>" class = "bigImage"></a>
这样它将在 Fancybox 中打开当前图像,而不是始终打开图像 #1。我意识到 $pictures[0] 指的是图像 #1,我只是不确定如何适当地更改它。任何帮助将不胜感激!
编辑:这是另一个页面,说明了我正在尝试做的事情:http: //bloc-nc.com/projects/gateway.html