Results 1 to 3 of 3

Thread: Lightbox not working with tabs/ajax pagination combo

  1. #1
    Join Date
    Aug 2008
    Posts
    25
    Thanks
    4
    Thanked 2 Times in 2 Posts

    Default Lightbox not working with tabs/ajax pagination combo

    So I'm trying to figure this out here, and I've done some research, but nothing seems to exactly fit my problem.

    I am working on my portfolio, and I have 3 tabs to display each type of work (Web, Print, Multimedia). Each tab allows for 8 pieces of work, which are pulled from an external php page.

    HOWEVER, some sections are going to have more than just 8 pieces of work to show, so to keep from reloading the page to call another set of images, I used an AJAX pagination script, which works quite good.

    But now I can't seem to figure out how to get the lightbox to work, since the links are pulled from external pages, I know that they have to be polled or loaded, but anything I've seen hasn't wanted to work.

    You can view my site at http://www.chromaticstudios.net/work.php (the print section is the one currently up and running). Any ideas what to do?

    I also don't like the way that I'm doing this, so if anyone has an easier, less messy, and less JS reliant way to do it, I'm open for suggestions!
    Last edited by smswetz; 01-14-2009 at 02:56 PM.

  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

    You should be able to use the 'manual' method. First, get rid of all that polling stuff.

    Now, I see that print.php has some invalid code on it (for one, two titles, for another, multiple elements with the same id, an element or elements with the same id as an element or elements on the work.php to which it is being imported, there could be other issues). But that shouldn't matter if we create the right division on it for jQuery lightbox initialization and give that division a totally unique id.

    Anyways, with this method, you don't need the rel="lightbox-nvGroup" for the links, and it may even cause problems, so get rid of it.

    Next, place a division around all of the links on print.php that you wish to be in the group, and give it a totally unique id and the exact onmouseover event shown (make no changes to it):

    Code:
    <div id="myuniquegal_1" onmouseover="$('#' + this.id + ' a').lightbox();this.onmouseover=function(){return;};">
    
    all the links in this group go here
    
    </div>
    That's it, nice and simple. However , there may or may not issues with doing this multiple times. I leave that to you to test.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    smswetz (01-14-2009)

  4. #3
    Join Date
    Aug 2008
    Posts
    25
    Thanks
    4
    Thanked 2 Times in 2 Posts

    Default

    You made my day, I'm going to have to seriously go through the code and fix the elements with the same id's..that would explain why I can't style the pagination links. I'm happy it works though....I can't thank you enough haha.

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
  •