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

问题描述：

我试图结合缩略图翻转（其中显示大拇指上方的图像）与Fancybox。如果你看看这个测试页面，你会看到我在说什么：http://www.neptune-design.com/sites/test/products.php 结合缩略图翻转与图像交换和Fancybox 2

当你翻转拇指，上面的大图像正确改变。我想拥有它，这样当你点击上面的大图时，它会使用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 } ?>

的对课程的循环得到的图像文件名，并将其显示在缩略图框。我怎样才能改变这部分：

 <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。我意识到$图片[0]是指图像＃1，我只是不知道如何适当地改变它。任何帮助将不胜感激！

编辑：这是另一个页面说明我想要做的事：http://bloc-nc.com/projects/gateway.html

答

在这里，我再次去回答我自己的问题！

<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

相关推荐