Mini lightbox/greybox? Inside a div and not entire page?

[jlizarraga]

Looking for a script to fade out the rest of the containing div and display whatever content in a box on top, just like lightbox and greybox - but just for that container and not for the entire page.

Any links/tips greatly appreciated!

[jlizarraga]

Well thanks to anyone who looked and found nothing like myself. >_>

[sfchun]

Hello

I would like to do the same thing , run an external lightbox page in a DIV

until now i was using this : http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

but it's not working with lightbox ... (not working without deep modification i think)

sorry , no answer, but also expect someone can help...

[sfchun]

support of lightbox2 says , we should better watch lytebox (http://www.dolem.com/lytebox/) , for an iframe call purpose.

from lytebox : iFrames: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.

[sfchun]

Ok so now it is better working with Lytebox ;)

but it seems there is a problem due to PHP generating on the fly JavaScript ...
I explain ...

Here are the full details :
i got an php page composed with iframes ;
In this page i have a main container (an iframe), where i display some external pages using this : AjaxContent ...
until today i had no problem with this.

When i try to load lytebox in the iframe, it display the thumbs correctly, but if i click on one of them , the image display in a white page which replace the main one ;
I had no effects, and the full path to the image is displayed in the URL bar...
(like if it loaded a new page).

Some more information : As i want my slideshow list to be dynamically created, the page containing Lytebox call, is a php page which auto-generate the html and javascript code, after getting a directory content.

When i save this auto-generated code on a static html page, it works great.
but when i want it to be run on the fly, it fails...

any help is welcome

[Medyman]

It would be better if you uploaded your page somewhere, if it's not already up, so we could see the problem. It will make finding the problem a lot easier.

[jscheuer1]

There are really two different issues here in this thread:


Getting a lightbox type display in a small area like a division on your page.
Getting lightbox to work with its triggers inside an iframe and yet still cover the entire page with its overlay and enlarged image display.


To get the first result, simply place the ordinary lightbox on a page in an iframe. It will be confined to that iframe.

For the second result, you should use lytebox (with a y, not i). It is a little tricky, and as Medyman asks, if you are having trouble setting it up, we can best help you if you provide a link to your problem page. From your description it sounds like the script is simply not running.

[sfchun]

Sorry , i forgot to mention that i'm using lytebox and not lightbox.

so i'll try to upload something for you to check as fast as possible.

[sfchun]

ok i made some more tests !

the problem is not coming from the fact that code had been dynamicaly generated...
If i do not access directly to the slideshow page, and if i try to load it through ajax in an iframe, it fails (mean does not work correctly)...

problem should come from this script 'Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm)'

Maybe someone have an alternative to load a page in iframe ?

[jscheuer1]

AJAX doesn't load scripts. But, if you are using the iframe method of an 'ajax' script, it should work, unless the script is using AJAX to populate the iframe. Or unless the lytebox script needs to load onload of the top page.

[sfchun]

Ok i joined to this post the web page i'm working on...

I simplified it at maximum to make debug/analysis faster.
I think i made it the most simple i could with keeping my frame set.

just get the zip file and uncompress it on your server to test it.
I couldn't join pictures cause of the zip size limit, so feel free to add yours in :
lyteboxTest/gallery/images/southHorizons/
and your thumb (100x100) in :
lyteboxTest/gallery/images/southHorizons/thumb/

no edit needed for pictures list , the php page should generate it.
but picture and its related thumb should have the same name !

ex :
lyteboxTest/gallery/images/southHorizons/pic1.jpg
lyteboxTest/gallery/images/southHorizons/thumb/pc1.jpg

thanks in advance for your help.

[jscheuer1]

I actually don't have access to a PHP enabled server for as extensive of a test as this would be. Additionally, our approach should be to debug the javascript side of things first and by itself.

Have you even tried to set this up as ordinary HTML and javascript? If so, were you successful?

If the PHP part of your scheme has no errors, a link to your page would be sufficient to debug the javascript side of things. But it would really be better to skip PHP altogether until you get the script working without PHP (that is if you haven't done so already).

I might add that lytebox's functionality with frames is generally (has been) limited to iframe, not for use with framesets. This is regardless of if you are using it in an iframe in a frame of a frameset to dominate just that one frame, or attempting to dominate the frameset with it from a page in the frameset. I believe that at one point I was able to tweak an earlier version of lytebox to work inside a frameset, but it was tricky, and since lytebox has been updated, those modifications may longer be valid, but I will look for the thread.

1. I'm looking over your files, you have two each of the folders css, img, and js. There is some duplication and so potential for consolidation, not to mention confusion unless this is streamlined.

2. Here's the link to that other thread I mentioned:

http://www.dynamicdrive.com/forums/showthread.php?t=12115

As I was looking through it, I was reminded of another useful approach, which would be to abandon frames and iframes altogether. With both PHP at your disposal and some creative layout, you can get the same sort of functionality that framesets and/or iframes would afford, without using them at all.

[sfchun]

I found the solution to my problem.

first by reading different things about iFrame, i realized that what i call iFrame, is not really what i'm using... i am using CSS frame (a difened DIV).
in fact it makes the problem worst about using any code like lytebox using which use onload event !

Once the page is loaded lytebox is parsing the page content, to find if there is anything for him, and then he will put an onclick event in href links !
In my case, the generated code (or static code) is sent using ajax to the DIV container AFTER the page had been loaded, so Lytebox never parse the page !

My solution :
I call the parsing function by hand just after i inject my code in the DIV.
(for me has my code is generated by a php page, the following code had also to be generated).


<script type=text/javascript>
myLitebox.updateLiteboxItems();
<script>



and it works !