obtenir automatiquement le href en <a> tag du src d'un <img> tag

Question

Cela semble probablement une question étrange au début, mais je n'ai pas réussi à trouver une autre façon de résoudre le problème. Toutes mes excuses si c'est long, mais je voulais essayer d'expliquer exactement ce que j'essaie de faire!

Fondamentalement, j'utilise la visionneuse pour afficher une image lorsque vous cliquez dessus, agrandit l'image (cet être ce lightbox fait ..!) Cela fonctionne bien, cependant: Quelle lightbox fait n'est de charger une autre image - utile donc vous pouvez avoir deux fichiers, un petit (vignette) et un grand. Je pourrais même mettre la même image dans les deux endroits et l'échelle de la petite en utilisant CSS/html - comme je l'ai ici - la pièce correspondante du code lightbox est ci-dessous:

<a href="image1.gif" rel="lightbox" title="Project one image"> 
<img src="image1.gif" width="200px" alt="small version of image" /></a> 

(je comprends qu'il est préférable d'avoir deux fichiers séparés pour le temps de chargement etc, mais dans ce cas cela ne fonctionnera pas)

Mais le problème que je suis est que l'image dans l'image doit être changée (à une image complètement différente), sans quoi que ce soit d'autre a été changé - donc sans mettre à jour le href pour le lien lightbox. Mais la lightbox doit montrer la même image que celle qui est affichée par la balise d'image - en l'état, la balise img et une balise doivent être changées pour cela. Dans ce cas, il ne sera pas possible d'éditer le tag a - je le configure pour permettre à une autre personne (assez technophobe) de remplacer l'image en utilisant CushyCMS (un éditeur de contenu) - cela ne donne en réalité que la possibilité de changer image elle-même, comme je ne peux pas compter sur cette personne pour mettre à jour également l'étiquette a (ce n'est certainement pas une option!)

Ce que je dois savoir est, est-il un moyen de rendre l'image référencée dans l'étiquette être automatiquement le même que celui mentionné dans la balise img, quelle qu'elle soit à ce moment-là? De la recherche jusqu'à présent, je crois que jquery/javascript serait la solution ici.
J'ai essayé de modifier un autre code javascript que j'ai trouvé, mais peut-être en raison de ma propre incompétence, je n'ai pas été en mesure de le faire fonctionner. Si quelqu'un a une solution, je serais très reconnaissant si elles pouvaient aussi le prouver, j'ai utilisé javascript avec des balises de script, mais au-delà j'ai eu peu de succès!

Merci pour votre temps de lecture et pour toute aide que vous pouvez offrir!

Answer 1

Je suis encore confus par cette question, mais je pense que c'est ce que vous voulez. L'attribut src img peut changer à partir du CMS mais pas le a. Essayez ceci pour le fixer:

$(document).ready(function(){ 
    var $a = $('a[rel=lightbox]'); 
    $a.each(function(){ 
     $(this).attr('href', $(this).find('img').attr('src')); 
    }) 

})