結合縮略圖翻轉與圖像交換和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

來源

2013-05-01 John O

在這裏，我再次去回答我自己的問題！

<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>

來源

2013-05-01 15:55:22

結合縮略圖翻轉與圖像交換和Fancybox 2

回答

相關問題