将缩略图翻转与图像交换和 Fancybox 2 相结合

Question

我正在尝试将缩略图翻转（在拇指上方显示更大的图像）与 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

Answer 1

我又来回答我自己的问题了！

 <script type="text/javascript">
   function swap(image) {
    document.getElementById("main").src = image.href;
    var imgurl = image.href;
    var filename = imgurl.substring(imgurl.lastIndexOf('/') + 1);
    document.getElementById("main2").href = "images/products/big/" + filename;
   }
 </script>