0

On my website I have an image. I try to add a rel="lightbox" because I want to open the image in Lightbox when I click it. But I'm not able to change this part of the HTML code. Is there another solution to 'force' the rel with something like Javascript or jQuery?

This is the HTML code I want to add the rel="lightbox"

<div class="gv_panel" style="width: 240px; height: 290px;">
<img style="visibility: visible; " src="t-shirt.jpg">
</div>

Is there any solution for this??

robin S
  • 3
  • 1
  • 2

1 Answers1

0

Using jQuery you can do this using attr function:

$( '.gv_panel img' ).attr( 'rel', 'lightbox' );

And using Javascript only:

document.querySelector( '.gv_panel img' ).rel = 'lightbox';

But note that IE supports document.querySelector only from 8+ version. So if you need to support IE7 you should use getElementById instead or something else.

antyrat
  • 27,479
  • 9
  • 75
  • 76
  • I try the following code, but it is not working. Am I doing something wrong here?? – robin S Jun 09 '13 at 14:20
  • Code looks good. Don't forget that you need to initialize your `lightbox` after this code. Because if you initialize it earlier `lightbox` script will not know about new `rel`'s – antyrat Jun 09 '13 at 14:24
  • Thank you for the answer, I tried to move the code to a higher place on the webpage, but it's still not working.. Can you please take a look at my site? http://www.jaewhooclothing.com/collection/jae-whoo-limited-t-shirt-design/ – robin S Jun 09 '13 at 14:30
  • `$` is undefined - this is what I see in browser console. So you need to use `jQuery.` instaed of `$.` – antyrat Jun 09 '13 at 14:32
  • Good idea to use the console, I tried to change the $ in jQuery, but now the console is telling me: "jQuery is not defined" – robin S Jun 09 '13 at 14:42
  • This is because your code is before jQuery initialization `` it should be after jquery but before lightbox. – antyrat Jun 09 '13 at 14:44
  • I tried to move the jQuery code between the jQuery initialization and lightbox, but it still gives the same result: http://www.jaewhooclothing.com/collection/jae-whoo-limited-t-shirt-design/ – robin S Jun 09 '13 at 15:06
  • Try also after adding rel attr init lightbox `$( '.gv_panel img' ).lightbox();` – antyrat Jun 09 '13 at 15:18
  • This gives me the following error: Uncaught TypeError: Object [object Object] has no method 'lightbox' – robin S Jun 09 '13 at 15:20
  • IDK what lightbox exactly you are using. You need to google your's lightbox api better – antyrat Jun 09 '13 at 15:22
  • I allready use Lightbox on other pages from the website. But it's not a problem to use another like Colorbox or Thickbox. But I still need to add an attribute to the img element, is that right? – robin S Jun 09 '13 at 16:31