Combiner le survol des vignettes avec l'échange d'image et Fancybox 2

Question

J'essaie de combiner un survol de vignettes (qui affiche une image plus grande au-dessus des pouces) avec Fancybox. Si vous jetez un oeil à cette page de test, vous verrez de quoi je parle: http://www.neptune-design.com/sites/test/products.php

Lorsque vous faites pivoter les pouces, la grande image ci-dessus change correctement. Je veux l'avoir pour que lorsque vous cliquez sur la grande image ci-dessus, il ouvre une image encore plus grande en utilisant fancybox. Comme vous pouvez le voir sur ma page de test, le rollover fonctionne bien, mais lorsque vous cliquez sur la grande image, elle ouvre toujours l'image 1, pas l'image actuelle (qui a été retournée). Pour l'instant, les noms d'image sont stockés dans une chaîne, mais ils seront finalement retirés d'un champ de base de données. Voici mon code:

Certains javascript pour la partie de retournement:

<script type="text/javascript"> 
    function swap(image) { 
     document.getElementById("main").src = image.href; 
    } 
</script> 

Et le reste ici:

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

La boucle de cours reçoit le nom du fichier image et l'affiche dans la boîte de vignettes. Comment puis-je changer cette partie:

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

afin qu'il ouvre l'image actuelle Fancybox, pas toujours l'image # 1. Je réalise que $ images [0] se réfère à l'image # 1, je ne suis pas sûr de savoir comment le changer de façon appropriée. Toute aide serait grandement appréciée!

EDIT: Voici une autre page qui illustre ce que je suis en train de faire: http://bloc-nc.com/projects/gateway.html

Answer 1

Ici, je vais répondre à nouveau mes propres questions!

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