faire plugin image intervertie Jquery cible un nouveau lien hypertexte

Question

J'utilise le Swap Image plugin, en particulier Rollovers disjoints 2.

Here's the live page

Je suis en train de faire l'image cible (la grande image à gauche) un nouveau lien hypertexte en fonction de l'image qui y est chargée. Le code que je utilise est

<img class="swapImageDisjoint { sin: ['#main:images/big-head-4.jpg'], sout: ['#main:main:images/blank-slate.jpg'] }" src="images/head-1.jpg" alt="" /> 

Merci

Answer 1

Vous n'avez pas vraiment besoin image intervertie faire ce que vous voulez. Vous pouvez tout faire avec une seule méthode de clic. Je mets un stripped-down par exemple ici:

http://jsfiddle.net/3ENWq/

(Dans cet exemple, j'utilisé les urls img comme l'URL du lien, mais ils n'ont évidemment pas être le même)

I simplement ajouté quelques attributs supplémentaires à vos petites images appelées swapimg et swapurl. J'ai utilisé la fonction de clic pour les charger dans l'image principale et un href mainlink que j'ai ajouté. J'ai également viré sur un each() pour précharger toutes les grandes images si vous le désirez.

$('.swapImage').click(function() { 

    $('#main').attr('src', $(this).attr('swapimg')); 
    $('#mainlink').attr('href', $(this).attr('swapurl')); 

}).each(function() { 

    var preloadImg = new Image(); 
    preloadImg.url = $(this).attr('swapimg'); 

}); 

Si vous ne voulez pas les attributs supplémentaires, vous pouvez le faire avec des métadonnées comme le plug-in d'échange d'image fait. Je peux poster un exemple de cela si vous le voulez.