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>

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

1 个答案: