Page 1 of 4 123 ... LastLast
Results 1 to 10 of 31

Thread: Lightbox image viewer 2.0: load outside iframe

  1. #1
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox image viewer 2.0: load outside iframe

    1) Script Title: Lightbox image viewer 2.0

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm


    3) Describe problem: I've put the script in my page and it works fine the only problem is now, that I'm using an iframe... when I click on the thumb, the picture enlarges inside the iframe which is too small and scrollbars appear. Is there any way (in html) so that I could get it out of the iframe and let the picture enlarge on top of all the template and the iframe?

    Thanks in advance,
    the goose

  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

    The easiest way would be to use this mod of the script because it already works inside an iframe:

    http://www.dolem.com/lytebox/
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ah thanks alot! Got it to work
    Still one question: I can only put 3 images in one group?
    Last edited by the goose; 03-28-2007 at 11:59 AM.

  4. #4
    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

    From the lytebox page:

    !IMPORTANT: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while still including lytebox.js in the iFrame document. Samples are included in the download file from above. If you are still unsure where you need to include each, then it is perfectly safe to include both the css and js in both documents.
    - John
    ________________________

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

  5. #5
    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

    Quote Originally Posted by the goose View Post
    Ah thanks alot! Got it to work
    Still one question: I can only put 3 images in one group?
    No, you can use as many as you like as long as they all have the same [label] added to the rel="lytebox[label]" attribute.
    - John
    ________________________

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

  6. #6
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yes it works but can I only have 3 images per group?

  7. #7
    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

    We just cross posted, the answer to your post before this one is answered before it but, the answer is short so, I will just repeat it here:

    Quote Originally Posted by jscheuer1 View Post
    No, you can use as many as you like as long as they all have the same [label] added to the rel="lytebox[label]" attribute.
    - John
    ________________________

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

  8. #8
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've tried that:

    HTML Code:
    ...........
    
    <!-- begin eerste rij -->
    
    	<div id="align_foto_links_r1"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
    	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>
    
    	<div id="align_foto_rechts_r1"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
    	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>
    
    <!-- einde eerste rij -->
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <!-- begin tweede rij -->
    
    	<div id="align_foto_links_r2"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
    	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>
    
    	<div id="align_foto_rechts_r2"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
    	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>
    
    <!-- einde tweede rij -->
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <!-- begin derde rij -->
    
    	<div id="align_foto_links_r3"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
    	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>
    
    	<div id="align_foto_rechts_r3"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
    	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>
    
    <!-- einde derde rij -->
    
    ..............
    so that should be one group of 6 images... though it says image 1/3, 2/3 and 3/3. Or am I missing something?

  9. #9
    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

    In your example code, I only see one image:

    Code:
    portfolio/example_full.jpg
    The script does have code to eliminate duplicate entries.
    - John
    ________________________

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

  10. #10
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I see, it works now thanks alot!

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
  •