Getting a jquery lightbox to pull the image out of a <img> tag

0
votes

On my website I am currently using a jquery plugin that scrolls images automatically across the page, which is all fine.

But if you click the image it just takes you to the image source and I want to use a lightbox feature incorporated with it. The problem is all the jquery lightbox codes I can find uses a href tag to get the image url, but the scroller uses img as so;

img src="img/img1.jpg" longdesc="img/img1.jpg" width="400" alt="Image 1" /

how can I get around this?

2
jqueryhtmlcss
What is wrong with href? – Fresheyeball
If I use h ref to enclose the img used by the other jquery scroller it stops working as I believe the jquery scroller is looking for media enclosed in a <img tag – Stacker-flow
Oh so this a problem because of nested jquery pluggins. Please post links to the pluggins you are using. – Fresheyeball
The image scoller covering most of my page is imageflow.finnrudolph.de Image Flow. and the lightbox im trying use (happy to use an alternative is needed) if jacklmoore.com/colorbox Colourbox – Stacker-flow

2 Answers

1
votes

First thing you are going to need to do is to disable the onclick behavior of Image flow: http://finnrudolph.de/ImageFlow/Documentation Luckily its available in the image flow options.

Something like onClick : $.noop

Next you need to make some alterations for your lightbox. Colorbox uses the href attribute to determine what content to display. Its not standard but you should be able to get away with an href attribute on an image element. Give it a shot.

<img src="img/img1.jpg" href="img/img1.jpg" width="400" alt="Image 1" />
0
votes

You can select the attribute of the img element by using "document.getElementById("id").src" or "document.getElementByTagName("img").src" in JavaScript and then assign that to a another tag the same way, just changing the "id" to the correct id and the "src" to whatever the attribute is.