Lightbox image viewer 2.03

[DaveX]

1) Script Title: Lightbox image viewer 2.03

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

3) Describe problem: Just wondering if you could use this for video or if there is something similar that could be used for video? I love this script for pictures and I think it would look nice if you could have a video pop up as well.

[jscheuer1]

I've been working on a script, still in beta, but it's stable (just trying to simplify the styles at this point):

http://home.comcast.net/~jscheuer1/side/mybox/

I've been updating it from time to time. So, check the above address periodically for updates. See the video demo link.

[DaveX]

That's what I'm looking for! Will it be ready soon?

[jscheuer1]

It's ready now, just not documented, and I'd like to simplify the style to make it more easily configurable, and perhaps tighten up the code a little. If you have questions on usage, just ask. The essential files are (in addition to the page which I linked to in my last post):

mybox.js

mybox.css

mybox_ie.css

and:

loading.gif

As set up on the demo page, the css files and the loading.gif go in the css directory and the script goes in the scripts directory.

Videos, owing to the way they are handled in the various browsers, must be shown via the iframe method. The syntax for which (from the demo page) is:

<a href="http://www.google.com/about.html" rel="iframe" rev="width::600::height::450::scrolling::auto::frameborder::1" title="About Google">

You can get any of the other files used by the demo (images may be copyrighted, use for testing only) simply by following the links or paths to them and downloading them. The video files:

http://home.comcast.net/~jscheuer1/s...stroll_01a.swf
http://home.comcast.net/~jscheuer1/s...stroll_01b.flv

are copyright, but you can use them for testing purposes, just do not distribute them. The video files go in the same directory as the demo page (index.htm).

[DaveX]

I'm playing around a bit with this but I'm only getting it to open into new tab or new page. I know I'm doing something goofy but I'm just not seeing it. I've basically copied and pasted everything except I'm using a different url for a test video... What's the first thing I should look for?

[jscheuer1]

The setup and use of this script is very easy, but I have yet to figure out the easiest way of explaining it. Sounds like you haven't installed the script itself properly, if at all. Can you get any content to show up in the box? In any case, a link to a page showing a demo of your problem will help me figure out what the trouble is.

Added Later:

I've just updated the files, and particularly the demo page - it now is much more instructive.

[DaveX]

John, I had a look and the new instructions look great. I'll play with it a bit more before I bother you with anything else. I'm wondering what the synatx would look like for a video (option #3 on your page) if I have a QT video on an html page as far as where the QT player info would lie in the line:

<embed src="http://www.mysite.com/mymovie.mov" width="480" height="286" autoplay="true" controller="true" type="video/quicktime" scale="tofit" pluginspage="http://www.apple.com/quicktime/download/"></td>

[jscheuer1]

Any sort of multimedia content like that needs to use the iframe option. You just set up an iframe link:

<a href="url_to_page" rel="iframe" rev="iframe_attributes" title="optional_caption">Link_Text_or_Image</a>

Then on the page referenced by the href attribute, that is where you put your object/embed tags. I would also recommend that you use some method of overcoming the 'click to activate' feature of IE and Opera for said tags. This should be done in an external script linked to the page with the object/embed tags on it. Get that page working by itself before worrying about using it with this script.

If you need help overcoming 'click to activate' see:

http://home.comcast.net/~jscheuer1/s...activate_w.htm

[DaveX]

Got this to work! I assume by playing with the CSS I can change the color of the box and such? Also, as my test, I pointed it to open a video on a page from another site I built. The video was way low in the box. After I opened the box up I could view it fine. Does the script assume the video is playing center/middle of the page? Also, is it possible to add 'next' and 'previous' arrows? this is a great script!

[jscheuer1]

Got this to work! I assume by playing with the CSS I can change the color of the box and such? Also, as my test, I pointed it to open a video on a page from another site I built. The video was way low in the box. After I opened the box up I could view it fine. Does the script assume the video is playing center/middle of the page? Also, is it possible to add 'next' and 'previous' arrows? this is a great script!

Great! I've been upgrading the script and the demo page, make sure you have the latest files. Once the script appears in the submissions section, it will no longer be updated so often as it currently is being.

Yes, you can change the css to change the box's appearance. The latest css (which you may or may not already have, and which is meant for use with the latest script, which I just uploaded) is better commented (but can and will be even better commented in the future) and is simplified from the version when we first started talking about this. Make sure to grab both latest mybox.css and mybox_ie.css files at the same time as the latest mybox.js script file.

There are two basic approaches to videos that seem to work well so far:

1. Put the video in the upper left corner of a page with its body element's style set:
   
   

   body {
   margin:0;
   padding:0;
   }

   Then in your rel="iframe" link to it, set the size of the iframe to the size of the video. This is the method currently used by the demo.
   
   
2. Center the video on a page with whatever other content you like. Set your rel="iframe" link's size to an adequate size to show all this content, including the video. This is the method that I was using at first with the demo.
   

You can add next and previous arrows by using the syntax eplained on the demo page:

Once you have set up your page, the various 'boxes' are numbered 0 to whatever and can be recalled using (in a link or button):
onclick="return mybox.show(#);"
where # is the number 0 through whatever in the order you originally made them on that page. Except for Ajax content. That may be recalled:
onclick="return mybox.show('url_to_page', 'optional_caption');"

However, since these would go best on the page featuring the videos, which would be in an iframe, they would need to be:

onclick="return parent.mybox.show(#);"

And, though I am not certain, the page(s) in the iframe would probably need to be on the same domain as the page using the script for these to work.