自动<a>从的src</a>获取href in <a>标记</a> <a><img></a> <a>标签</a>

Question

This probably seems like a strange question at first, but I haven't managed to find another way to solve the problem. Apologies if this is long winded, but I wanted to try and explain exactly what I'm trying to do!

Basically, I am using lightbox to display an image which when clicked, enlarges the image (this being what lightbox does..!) This is working fine, however: What lightbox actually does is load another image - useful so you can have two files, one small (thumbnail) and one large. I could even put the same image in both locations and scale the small one using CSS/html - as I have here - the relevant piece of lightbox code is below:

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

(I understand that it is preferable to have two seperate files for loading time etc, but in this case this will not work)

But the problem I am having is that the image in the image tag needs to be able to be changed (to a completely different image), without anything else been changed - so without updating the href for the lightbox link. But the lightbox needs to show the same image as is brought up by the image tag- as it stands, both the img tag and a tag need to be changed to do this. In this case, it will not be possible to edit the a tag - I am setting this up to allow another (fairly technophobic) person to replace the image using CushyCMS (a content editor) - this realistically only gives the ability to change the image itself, as I cannot rely on this person to also update the a tag (this is definitely not an option!)

What I need to know is, is there a way to make the image referred to in the a tag automatically be the same as that referred to in the img tag, whatever this may be at the time? From research so far I believe that jquery / javascript would be the solution here.
I've tried modifying some other javascript code that I've found, but possibly due to my own ineptitude I haven't been able to make it work.

If anyone has a solution, it would be greatly appreciated if they could also idiot-proof it for me, I've successfully used javascript that came complete with script tags, but beyond that I've had little success!

Thanks for your time reading and for any help anyone can offer!

Answer 1

I am still confused by this question, but i think that's what you want. The img src attribute can change from the CMS but no the a . Try this to fix it :

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

})