Lightbox,VideoBox...whatever alternatives?

**whispers** · 12-05-2010, 11:47 AM

I dont have much exeprience with this..

so Im looking for some hand hold/help here..

on an EASY solution for this.

I need something like LIGHTBOX (or alternative)

A.) an OVERLAY

B.) that supports .flv/video playing..

C.) this NEEDS to be 'spawned' by Flash (I can pass whatever details/info/params I need)

I get the ideas of it.. I need to call some javascript function in the HTML/container page...

pass some vars to it.. then spawn the window..

however.. everything I found either does NOT support video/flv..

I couldnt get it working correctly (an overlay)..

or their 'solution' was just for embedding things into the page itself..

Im just looking for a bit of HELP here figuring it all out..

wheather its lightbox (or alternative) that uses the JW player..

I dont mind.. just needs to be 'easy to understand!..

Anybody got some suggestions? or what to use..and how THEY implemented it?

Thanks

**whispers** · 12-05-2010, 08:46 PM

36 views?

(you guys are lame!)

ANYBODY?

c'mon..this garbage,.. Lightbox non-sense has been around for years.. (as well as the variants... Bumpbox, Videobox, LightWindow...etc..etc..etc)

the missing KEY for me here is launching from my Flash movie:

I add this to my HTML page:
<script type="text/javascript" src="video/js/mootools.js"></script>
<script type="text/javascript" src="video/js/swfobject.js"></script>
<script type="text/javascript" src="video/js/videobox.js"></script>

<link type="text/css" rel="stylesheet" href="video/css/videobox.css" media="screen" />

if I add regular HTML links to the page:
<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">our video</a>
<BR>

<a href="http://www.youtube.com/watch?v=VhtIydTmOVU" rel="vidbox 800 600" title="caption2222">our video1111</a>

it works..

but I can NOT for the LOVE OF GOD.. launch it from inside of my Flash movie????

What gives?

to be more 'complete'

the project is loading some text from XML.. and displaying it in a TEXT HTML enabled text field..

the LINK from inside there is how I want my Videobox (or whatever) launched..

I have tried using an ASFUNCTION to just pass int he movie name/url... and then make a custom function to launch the Videobox thingy.

the asfunction works for passing in the name/url..

like so:
<a href="asfunction:getMovie,http://cdn.video-files.com/services/player/bcpid678787071001?bctid=679069838001">Arizona Media Coverage</a>

but I can NOT get any sort of javaScript call to work on loading the Videobox???

I have also tried to leave it default HTML link to call the Vidobox thing.

<a href="http://www.youtube.com/watch?v=VhtIydTmOVU" rel="vidbox" title="caption2222">our video1111</a>

Please someone jump in here and show me how retarded Im being??

Thanks

**Video Man** · 12-06-2010, 12:20 AM

So do you need a grayed out overlay of the entire screen?
and in the middle of this a video player?
full screen or just the regular size video?
and it is activated by a "click" or something in another Flash .swf?
do you have some example of stuff that does not work?
even screen shots would help.
Is this in a so called "Flash" website or is the main part of the page HTML?
AS2?
I'm sure I'm forgetting some questions...
Video Man

**Video Man** · 12-06-2010, 01:14 AM

You may have already solved this but anyway..
OK, let me think out loud here.
The methods you’ve mentioned are WAY over my head right now… been a long day. Still have a site to launch by noon tomorrow.. but I love a challenge!
Just a couple of ideas that pop into my head.
First, a <div> that will cover the entire screen. Make a 1px gray/transparent .png or whatever and style it like this:

Code:

#vid_box {
	background: url(images/gray.png) repeat center top;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 3;  
	top: 0px;
}

This will give you a <div> with an image background that covers the entire screen for any element with a z-index less than 3, absolutely positioned at 0,0.
Now to Hide/Show that <vid_box> how about using a .js show/hide connected to your .swf.

Code:

<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>

in the <head>

Code:

<h3 class="center_this"><a href="javascript:ReverseDisplay('mediaspace2')">DOUBLE CLICK HERE to Show/Hide Live Streaming Web Video Player</a></h3>

connected to your button. Use actionscript to call..
Place your video in #vid_box.
This is just a cobbled together version without any testing, etc. but maybe it will give you some ideas.
Best of luck on the project!

**whispers** · 12-06-2010, 08:15 AM

hi..

thanks for the reply..

I guess Im missing the solution here?

is this using lightbox? videobox? shadowbox? bumpbox?..etc.

I guess my questions is 'where' are you calling this modal window overlay jQuery stuff from..??

the problem is two fold

1.) needs to play/host a video or .flv
2.) needs to be launched form inside a Flash link/button.. NOT an HTML link.

**Video Man** · 12-06-2010, 11:41 AM

No lightbox, etc. just something I cobbled together in a hurry...
using getURL you can communicate with the javascript listed above

Code:

stop();
show_hide.onRelease = function(){
	getURL ("javascript:ReverseDisplay('mediaspace2')");
}

working example of simple flash button doing hide/show here, center of page:
http://www.hiesequim.com/education_center_test.html
Next instead of hide_show that mediaspace2 div, you hide_show the #div_box, to gray out the screen. Place your video player inside that <div>.
Hope this helps a little anyway... gotta go!
Best wishes,
Video Man

**whispers** · 12-06-2010, 11:47 AM

umm.ok thanks for the post?

I guess Im just having a disconnect as to what this has to do with my question/post?

Im trying to call some sort of modal overlay (pick anyone that supports .flv's)...

its the specific jQuery stuff I need help with... calling and loading the content in the overlay/modal window stuff.

but thanks. =)

**Video Man** · 12-06-2010, 12:01 PM

This is a "whatever alternatives" solution.
Instead of calling some special overlay/modal window stuff, just put your video player in a regular, good old <div>. No complex issues in getting the video player to display or work, or play flvs.
then just "Hide" that div until you want it displayed, video player and all. You can show/hide that video holding div from a button in another .swf... like you are trying to do. When you are done with video player, hide it again.
Anyway, best of luck to ya on your project.
Video Man

**Video Man** · 12-06-2010, 06:53 PM

Hey whispers,
With all due respect man, it seems like you just blew off my suggestion as some sort of stupid idea!
I'm only trying to suggest an alternate method of creating your own video box.

A.) an OVERLAY

B.) that supports .flv/video playing..

C.) this NEEDS to be 'spawned' by Flash (I can pass whatever details/info/params I need)

Using the simple js and CSS styling method I suggested earlier, here is a little more developed version, a full screen video lightbox that plays video.
http://www.hiesequim.com/education_center_test.html
It simply does a show/hide to a <div> styled to cover the entire screen. In that div is the video player.

Code:

#mediaspace2 {
	background: url(images/background.png) repeat center top;
	height: 1050px;
	width: 100%;
	position: absolute;	 
	top: 0px;
	padding-top: 150px;
	text-align:center;
	z-index: 300;
}

Big blue Flash button to show/hide.
To develop further would also need to close the stream so the audio stops when the window closes... but hey.. it's your project. I'm just trying to give you some ideas.
Best wishes,
Video Man

**rdoyle720** · 12-06-2010, 07:02 PM

Yeah, there seems to be some confusion here. Video Man's example was perfectly workable, with a little HTML/JS knowledge.

All the references to jQuery are confusing as well, as jQuery is a separate Javascript framework that has nothing to do with any of the above.

Back to your original example with Videobox...the reason why it works with a regular link and not with asfunction is because the javascript is scanning the page for all links with rel="vidbox", and setting them up so they call the proper functions. It can't see into your Flash file.

What you need to do instead (and it's listed on the Videobox page) is call Videobox.open directly.

Code:

import flash.events.MouseEvent;
import flash.external.ExternalInterface;

myBtn.addEventListener(MouseEvent.CLICK, doVideo);
function doVideo(e:MouseEvent):void {
	ExternalInterface.call("Videobox.open", "http://www.youtube.com/watch?v=uhi5x7V3WXE", "testCaption", "vidbox 800 600");

}

**whispers** · 12-06-2010, 07:05 PM

VideoMan-

Im sorry you took/take it that way. (and Im not sure how you even coudl have since I had said thanks, and left a smiley even?)

But I was already out of my element, and having the above posted method partially working (with just some syntax and string building changes need) to make the bridge from Flash to the JS/lightwindow stuff.

Also come to find out it needed to support more media content than JUST flv's

so to be clear that was never my intent.. nor would I behave like that unless, the poster/member was out of line and the post/thread needed moderating.

now so this post may provide some answers (outside of yours) to the original post/y attempt

the

missing key was this:

actionscript Code:

function makeLW(targetURL:String) {
    
    var lWidth:String = "800";  
    var lHeight:String = "600";
    var lTitle:String = "Some Title Goes Here";
    var lCaption:String = "Caption text";
    var lAuthor:String = "Author Name Here";
    
    var js:String = "Function(\"var win = new lightwindow();win.activateWindow({href: '"+targetURL+"', title: '"+lTitle+"', author: '"+lAuthor+"', height: '"+lHeight+"', width: '"+lWidth+"', caption: '"+lCaption+"'});\")";
    
    ExternalInterface.call(js);
}

I ended up using Lightwindow.

so there are now 2 solutions to be had.

thanks

**Video Man** · 12-06-2010, 08:20 PM

No problem whispers!
I enjoyed the challenge of coming up with a vid_box of my own....just may use it someday.
Best wishes,
Video Man

**whispers** · 12-06-2010, 08:24 PM

cool..

dont let my lack of knowledge, being 'dumb' be mistaken for being mean. =)

I just didnt know enough to make it work.

Thread: Lightbox,VideoBox...whatever alternatives?

Thread Tools

Display

Lightbox,VideoBox...whatever alternatives?

Posting Permissions