Results 1 to 2 of 2

Thread: Simple Javascript Help :: Document.Images[]

  1. #1
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Simple Javascript Help :: Document.Images[]

    I'm naive in javascript...need some help. I'm using the Lightbox v2.0 script

    Script Link: http://www.dynamicdrive.com/dynamici...box2/index.htm

    I'm trying to write another javascript which simply adds rel="lightbox" to all images <a> tag on the page. So, all I would have to do is call two scripts (or combine them) and my images will automatically have lightbox effect.

    Since I've not done any coding with javascript, i'm not sure how to achieve this. I was thinking along the lines of using document.images to get all the images and then possibly looking at the <a> tag right before it and appending rel="lightbox".

    However, I have no idea how to achieve that with code and therefore I seek assistance fro Javascript Pros....

    any help is much appreciated...thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not really sure of the best way to go here, two choices - you can try them both to see which, if either, is best (they both may be fine). OK, at the end of lightbox.js we have this:

    Code:
    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, 'load', initLightbox, false);
    Add to it like so:

    Code:
    function initLightbox() {
    var imgs=document.images;
    for (var i_tem = 0; i_tem < imgs.length; i_tem++)
    if(imgs[i_tem].parentNode.tagName.toLowerCase()=='a')
    imgs[i_tem].parentNode.setAttribute('rel', 'lightbox', 0);
    myLightbox = new Lightbox();
    }
    Event.observe(window, 'load', initLightbox, false);
    Or like so:

    Code:
    function initLightbox() {
    var imgs=document.images;
    for (var i_tem = 0; i_tem < imgs.length; i_tem++)
    if(imgs[i_tem].parentNode.tagName.toLowerCase()=='a')
    imgs[i_tem].parentNode.rel='lightbox';
    myLightbox = new Lightbox();
    }
    Event.observe(window, 'load', initLightbox, false);
    Also, some folks may prefer:

    Code:
    document.getElementsByTagName('img')
    to:

    Code:
    document.images
    document.images is supported by more browsers but, the lightbox script itself will not work in browsers that don't support document.getElementsByTagName('img') and I think it works better in the browsers that do support it (less resources, faster or something).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •