Lightbox image viewer 2.0: load outside iframe

[the goose]

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

[jscheuer1]

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

http://www.dolem.com/lytebox/

[the goose]

Ah thanks alot! Got it to work
Still one question: I can only put 3 images in one group?

[jscheuer1]

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.

[jscheuer1]

Originally Posted by the goose

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.

[the goose]

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

[jscheuer1]

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:

Originally Posted by jscheuer1

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.

[the goose]

I've tried that:

...........

<!-- 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?

[jscheuer1]

In your example code, I only see one image:

portfolio/example_full.jpg

The script does have code to eliminate duplicate entries.

[the goose]

I see, it works now thanks alot!