Extract text from img's thumb “alt” or “title” attribute and use it as a signature for enlarged popup photo

0
votes

Is it possible to do so? Example: I get image img src="some_img_thumb.png" alt="That's the image alt" title="That's the image title" which is thumbnail and has both alt and title attributes. When i hover mouse over it or click on it, enlarged image should pop up. Now, i want make this image pop up with it's alt or title as a signature, placed on bottom img's border. I know some other trick ( http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer ), but i'd like to know if this what i want achieve is possible. I'm sure it's related with this statement:

a:after { content: " (" attr(href) ")"; }

but the way i tried to use content: attr(title); statement, was bad way:

img.thumb:active img.thumb:after { content: attr(title); font-weight: bold; margin: 10px 400px 20px 400px; }

I'm newbie into webdesign and was searching for inspiration to achieve that trick, but still no ideas.

Thanks for eventual help. Cheers

1
htmlcssimagethumbnailssignature

1 Answers

1
votes

You'd probably want to use jquery for that one. You can harvest the alt tag, or any other attribute with the following line

var altText = $('img').attr('alt');

You'd probably want to use an id on the image as well to make sure you get the right one.

Then you can the value to the signature with the following line.

$('#signature').append(altText);

If you'd like more specific directions comment and I'll be happy to help you further.

That's the theory, but there are some great lightbox plugins out there that have this functionality. Have you tried colorbox?

http://colorpowered.com/colorbox/