Problèmes avec la galerie d'images jQuery simple avec le plugin Colorbox

Question

Je crée une galerie d'images pour un site de commerce électronique et je souhaite utiliser colorbox pour lancer des images plus grandes. Mon problème est que l'image lancée dans colorbox reste la première lancée et devrait refléter l'image affichée comme img # bigpic - le lien vers l'image semble être mis à jour correctement.

Voici le jQuery je:

$(document).ready(function(){ 

$("#largeimage").colorbox(); 
imageSwapper(".thumbnails a"); 


function imageSwapper(link) { 
$(link).click(function(){ 
$("#bigpic").attr("src", this.href); 
$("#largeimage").attr("href", this.rel); 
return false; 
}); 
}; 


$("#largeimage").bind('mouseenter mouseleave', function(event) { 
     $("#largeimage span").toggleClass('showspan'); 
    }); 

}); 

... et le HTML

<a href="_images/products/large/bpn0001_1.jpg" id="largeimage"><span></span><img src="_images/products/bpn0001_1.jpg" id="bigpic" /></a> 
     <div class="thumbnails"> 
      <ul> 
       <li><a href="_images/products/bpn0001_1.jpg" rel="_images/products/large/bpn0001_1.jpg"><img src="_images/products/mini/bpn0001_1.jpg" /></a></li> 
       <li><a href="_images/products/bpn0001_2.jpg" rel="_images/products/large/bpn0001_2.jpg"><img src="_images/products/mini/bpn0001_2.jpg" /></a></li> 
       <li><a href="_images/products/bpn0001_3.jpg" rel="_images/products/large/bpn0001_3.jpg"><img src="_images/products/mini/bpn0001_3.jpg" /></a></li> 
      </ul> 
     </div> 

Toute aide serait grandement appréciée!

Answer 1

Je ne pense pas que vous ayez besoin de la fonction imageSwapper(). Essayez de remplacer ceci:

imageSwapper(".thumbnails a"); 


function imageSwapper(link) { 
$(link).click(function(){ 
    $("#bigpic").attr("src", this.href); 
    $("#largeimage").attr("href", this.rel); 
    return false; 
}); 
}; 

Avec:

$(".thumbnails a").click(function(){ 
    $("#bigpic").attr("src", $(this).attr("href")); 
    $("#largeimage").attr("href", $(this).attr("rel")); 
    return false; 
}); 

Answer 2

Au lieu de lier le colorbox directement au lien appeler la boîte de couleur de cliquer sur ce lien et passer dans le href actuel comme il semblerait qu'il est ne pas revérifier la valeur actuelle.

$("#largeimage").click(function(){ 
    $.fn.colorbox({href:$(this).attr("href")}); 
    return false; 
});