You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

opening flowplayer overlay with an image Created Oct 14, 2009

This thread is solved

Views: 5146     Replies: 17     Last reply Aug 8, 2011  
You must login first before you can use this feature

nickweb

Posts: 4

Registered:
May 7, 2009

opening flowplayer overlay with an image

Posted: Oct 14, 2009

hey there, firstly id like to say that the flowplayer is awesome, secondly, I'm having a small issue implementing the overlay in my webpages.

I've been following this tutorial:http://flowplayer.org/demos/tools/overlay.html and got it working perfectly from a button link.

The issue I'm having is calling the overlay from an image. this is to say that I want to load the overlay via clicking on an image, not a button. I've tried calling the rel link in a href tag, but it wont load the overlay. I figured it would given the rel link works for a button.

I've looked all over the place trying to find a fix for this, but seem to have hit a dead end.

any help would be greatly appreciated, thanks guys

nick

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» opening flowplayer overlay with an image

Posted: Oct 14, 2009

Reply to: opening flowplayer overlay with an image, from nickweb
I think this is what you want? I am using multiple players on the page so I don't know if this is overkill, I am including one player for the example.



<a rel="#overlay1" href="#" ><img src="/img/video.gif" height="145" width="107" alt="" border="0" /></a>

<!-- overlays for videos -->
<div class="overlay" id="overlay1">
	<a class="player" href="/Video/DataEntry.flv">
		nbsp;
	</a>
</div>

Here is my javascript code, I don't know if it's outdated, I copied it from somewhere on the site:

// JScript File

$(function() {

	// setup overlay actions to buttons
	$("a[rel]").overlay({

		// setup exposing (optional operation);
		onBeforeLoad: function() {
			this.getBackgroundImage().expose({api: true}).load();	
		},
						      
		onLoad: function(content) {
			// find the player contained inside this overlay and load it
			this.getContent().find("a.player").flowplayer(0).load();
		},
		
		onClose: function(content) {
			$f().unload();
			
			// close exposing
			this.getBackgroundImage().expose().close();
		}
	});				
	
	// install flowplayers
	$("a.player").flowplayer("../swf/flowplayer.commercial-3.1.4.swf",{ 
    // product key from your account 
    key: 'xxxxxxxxxxxxxxx'
    
    }); 
});

Here is the css I used that pertains to the overlay, you will have to tweak it:

a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}
div.overlay {
	background:url(../img/white.png) no-repeat;
	padding:40px;	
	width:576px;  
	display:none;
}

div.overlay div.close {
	background:url(../img/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px; 
	width:35px;
	height:35px;
	cursor:pointer;
}

a.player { 		
	display:block;
	height:450px;			
}

nickweb

Posts: 4

Registered:
May 7, 2009

» » opening flowplayer overlay with an image

Posted: Oct 14, 2009

Reply to: » opening flowplayer overlay with an image, from cambrosi
hey thanks for the reply.
I tried using the html code above but it still wont open the overlay when I click on the image

<a rel="#overlay1" href="#" ><img src="/img/video.gif" height="145" width="107" alt="" border="0" /></a>
I have all the js and other codes loaded into the page, as when i have a button calling the overlay, it works perfectly.

The result with the above code is that the image is clickable, yet does nothing

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» » » opening flowplayer overlay with an image

Posted: Oct 14, 2009

Reply to: » » opening flowplayer overlay with an image, from nickweb
OK, it looks like the code for the overlay has been updated from what I posted earlier:

I put the javascript below in a separate js file named video.js so you should have this in your HTML page <head> section:

Make sure all the paths are correct.


<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script src="js/video.js"></script>



$(function() {

	// setup overlay actions to a href
	$("a[rel]").overlay({

		// use the Apple effect for overlay
		effect: 'apple',		
		
		expose: '#789',				
		
		onLoad: function(content) {
			// find the player contained inside this overlay and load it
			this.getOverlay().find("a.player").flowplayer(0).load();
		},
		
		onClose: function(content) {
			$f().unload();
		}
	});				
	
	// install flowplayers
	$("a.player").flowplayer("/swf/flowplayer-3.1.4.swf"); 
});

Then in the HTML body section:

<a rel="#overlay1" href="#" ><img src="img/video.gif" height="145" width="107" alt="" border="0" /></a>

<!-- overlays for videos -->
<div class="overlay" id="overlay1">
	<a class="player" href="1AnalyzerCartridge.flv">
		nbsp; (don't forget the non-breaking space here, the & doesn't show up)
		</a>
		</div>

And then don't forget also to tweak your CSS. Make sure that your ids correspond, i.e. the id of the div is "overlay1" with a class of "overlay". If you wanted to have multiple players, you would create a new div with id "overlay2", and reference it with a rel="#overlay2", etc.

If you're still having problems, let me know and I'll throw up a simple page for you.

nickweb

Posts: 4

Registered:
May 7, 2009

» » » » opening flowplayer overlay with an image

Posted: Oct 14, 2009

Reply to: » » » opening flowplayer overlay with an image, from cambrosi
I rarely shout in caps at people online but i'm going to here...YOU'RE A FLIPPIN' BEAUTY!!

Thank you so much for that js code, it now works a charm, I can load the overlay by clicking on an image now, truely thank you so much!.

on a side note, this fix might well benefit the overlay example page, because I know if cambrosi hadn't have responded to my post I'd still be stuck.

Once again, thank you so much for that fix, BRILLIANT!

-nick :)

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» » » » » opening flowplayer overlay with an image

Posted: Oct 14, 2009

Reply to: » » » » opening flowplayer overlay with an image, from nickweb
Great, glad it helped! Most of my code I have stolen, borrowed and tweaked, I could never figure this stuff out on my own.

davo111

Posts: 5

Registered:
Mar 9, 2010

this doesnt work at all

Posted: Mar 24, 2010

Reply to: » » » » » opening flowplayer overlay with an image, from cambrosi
I tried this method and I have had no luck at all. My image will display on the page and when clicked on the rel background images load, but no player or video (flv) loads....I also get (don't forget the non-breaking space here, the & doesn't show up) in the player area as a text link. When I load the script server side <script src=http://mysite.com/js/video.js"></script> I get a js run time error (object not defined) which is why it is inline.
Also my player and flv work perfectly in the link example from above, so I know thats not a problem.

Here is my test page maybe someone can see whats wrong. Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<head>
<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.1.4.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 
<style type="text/css">

div.overlay {
background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);
padding:40px;    
width:576px;  
display:none;
}
div.overlay div.close {
background:url(http://static.flowplayer.org/tools/img/overlay/close.png) no-repeat;
position:absolute;
top:2px;
right:5px; 
width:35px;
height:35px;
cursor:pointer;
}
a:active { 
  outline:none; 
} 
:focus { 
  -moz-outline-style:none; 
} 
a.player {          
    display:block; 
    height:450px;             
} 
</style>
<script>
$(function() { 
 
    // setup overlay actions to a href 
    $("a[rel]").overlay({ 
 
        // use the Apple effect for overlay 
        effect: 'apple',         
         
        expose: '#789',                 
         
        onLoad: function(content) { 
            // find the player contained inside this overlay and load it 
            this.getOverlay().find("a.player").flowplayer(0).load(); 
        }, 
         
        onClose: function(content) { 
            $f().unload(); 
        } 
    });                 
     
    // install flowplayers 
    $("a.player").flowplayer("http://mysite.com/flowplayer/flowplayer-3.1.5.swf");  
});

</script>     
</head>

<body>

<a rel="#overlay1" href="#" ><img src="http://mysite.com/images/myimage.png" height="120" width="160" border="0" /></a>

<!-- overlays for videos -->
<div class="overlay" id="overlay1">
<a class="player" href="http://mysite.com/images/some.flv"></a>
 nbsp; (don't forget the non-breaking space here, the & doesn't show up)
</a>
</div>

</body>
</html>

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» this doesnt work at all

Posted: Mar 24, 2010

Reply to: this doesnt work at all, from davo111 

<!-- overlays for videos --> 
<div class="overlay" id="overlay1"> 
<a class="player" href="http://mysite.com/images/some.flv">
 nbsp;  
</a> 
</div>

You have an extra closing tag for the a href before the non-breaking space. I removed it in the snippet above. See if that helps.

Also, I don't know if this makes a difference, but you're missing the <html xmlns=http://www.w3.org/1999/xhtml"> after doctype. And I would stick in the title tags just to be safe.

davo111

Posts: 5

Registered:
Mar 9, 2010

still no luck

Posted: Mar 24, 2010

Reply to: » this doesnt work at all, from cambrosi
I tried your suggestion and still no luck.

The XHTML 1.0 doesn't validate....the a tag doesn't fit the doc type, so I tried HTML 4.01 which validates but still doesn't work. I also tried <br> instead of nonbreaking space. I made a new test page with flow player refs and again no luck..maybe you could try a test page and see what isn't working. I really appreciate all your help.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>sometitle</title>
	<meta http-equiv="content-type" 
content="text/html;charset=utf-8">

<style type="text/css">
 
div.overlay { 
background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png); 
padding:40px;     
width:576px;   
display:none; 
} 
div.overlay div.close { 
background:url(http://static.flowplayer.org/tools/img/overlay/close.png) no-repeat; 
position:absolute; 
top:2px; 
right:5px;  
width:35px; 
height:35px; 
cursor:pointer; 
} 
a:active {  
  outline:none;  
}  
:focus {  
  -moz-outline-style:none;  
}  
a.player {           
    display:block;  
    height:450px;              
}  
</style>
<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.1.4.min.js"></script> 
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 
  
<script type="text/javascript">
$(function() {  
  
    // setup overlay actions to a href  
    $("a[rel]").overlay({  
  
        // use the Apple effect for overlay  
        effect: 'apple',          
          
        expose: '#789',                  
          
        onLoad: function(content) {  
            // find the player contained inside this overlay and load it  
            this.getOverlay().find("a.player").flowplayer(0).load();  
        },  
          
        onClose: function(content) {  
            $f().unload();  
        }  
    });                  
      
    // install flowplayers  
    $("a.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf");   
}); 
 
</script>      
</head> 
 
<body> 
 
<a rel="#overlay1" href="#"><img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg"></a> 
 
<!-- overlays for videos -->  
<div class="overlay" id="overlay1">  
<a class="player" href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv"> 
<br>   
</a>  
</div>  
 
</body> 
</html>

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» still no luck

Posted: Mar 25, 2010

Reply to: still no luck, from davo111
This test page worked for me. The code changed again from what I had posted back in October. All I did was take their demo page and work backward. Don't forget the nbsp; which is showing up as an "?"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.1.4.min.js"></script>
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>	
<style>
div.overlay {  
background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);  
padding:40px;      
width:576px;    
display:none;  
}  
div.overlay div.close {  
background:url(http://static.flowplayer.org/tools/img/overlay/close.png) no-repeat;  
position:absolute;  
top:2px;  
right:5px;   
width:35px;  
height:35px;  
cursor:pointer;  
}  

div.overlay a {
	height:450px;
	display:block;
}
</style>

</head>
<body>
<!-- button that opens up overlay -->

<a rel="#overlay1" href="#"><img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" /></a>  
  
<!-- overlays for videos -->   
<div class="overlay" id="overlay1">   
<a id="player" href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv">  
 
</a>   
</div>   

<script type="text/javascript" >

$(function() {

	// install flowplayer into flowplayer container
	var player = $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf");
	
	// setup button action. it will fire our overlay 
	$("a[rel]").overlay({
		
		// use the Apple effect for overlay
		effect: 'apple',
		
		// when overlay is opened, load our player
		onLoad: function() {
			player.load();
		},
		
		// when overlay is closed, unload our player
		onClose: function() {
			player.unload();
		}
	});
			
});
</script>

</body>
</html>

davo111

Posts: 5

Registered:
Mar 9, 2010

Thanks Cambrosi

Posted: Mar 30, 2010

Reply to: » still no luck, from cambrosi
I would like to thank you for all your time and help with this problem. I tried your new code and it worked great. Now I am trying to get rid of one last glitch. When I apply a div around the code to position the clickable image it kicks the player 748px to the right (width of player + padding) but the background image still centers on the page.

<div id="imagebox1">
<a rel="#overlay1" href="#"><img src="http://mysite.com/images/clickimage.png" /></a>   
<!-- overlays for videos -->    
<div class="overlay" id="overlay1">    
<a id="player" href="http://mysite.com/images/myvid.flv">   
   
</a>    
</div></div>

The div.overlay div.close button can be moved with css positioning as well as the player (#player) but the <div class="overlay" id="overlay1"> "box" still creates an artificial 748px margin to the right of the page. I have tried negative margins, 0 margins and every align and centering trick I know to get rid of it.


div.overlay {
background-image:url(http://mysite.com/flowplayer/bktransparent.png);
padding:24px;
margin: 0px 0px 0px 0px;
width: 700px;
display: none;
}

Maybe you have some thoughs on why this is happening. Thanks again.

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» Thanks Cambrosi

Posted: Mar 31, 2010

Reply to: Thanks Cambrosi, from davo111
Could you send me the code for the whole page like you did last time so I can play with it on a test page? That's the only way I can figure anything out.

calculatedstepz

Posts: 2

Registered:
Mar 26, 2009

» » still no luck

Posted: Jun 9, 2010

Reply to: » still no luck, from cambrosi
Hey cambrosi,

First of all thanks for this coding!

I would like to say this helped me greatly however I am having a problem with the overlay when I close it. Everything seems fine until you try to click on the image again to view the overlay. Once you click the image for a second time, nothing happens. Any ideas why this is happening?

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» » » still no luck

Posted: Jun 10, 2010

Reply to: » » still no luck, from calculatedstepz
I will be glad to help. If you could send me the code I can try to figure it out.

calculatedstepz

Posts: 2

Registered:
Mar 26, 2009

» » » » still no luck

Posted: Jun 10, 2010

Reply to: » » » still no luck, from cambrosi
Here is the page...

http://gwosouth.com.previewdns.com/index.html

cambrosi

Posts: 12

Registered:
Oct 14, 2009

» » » » » still no luck

Posted: Jun 10, 2010

Reply to: » » » » still no luck, from calculatedstepz
This test page below worked for me, which is your code anyway. I guess there is some kind of conflict with the other stuff you have on the page. Also, I would change:

<div class="overlay" style="background-image:url('white.png')">
to 

<div class="overlay">
because the background image is already in the css.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
        <script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://gwosouth.com.previewdns.com/flowplayer-3.2.0.min.js"></script>

<style type="text/css"> 
div.overlay {
	padding:40px;	
	width:576px;  
	display:none;
	background-image:url(http://gwosouth.com.previewdns.com/white.png);	
}

div.overlay div.close {
	background:url(http://gwosouth.com.previewdns.com/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px; 
	width:35px;
	height:35px;
	cursor:pointer;
}

div.overlay a {
	height:450px;
	display:block;
}

</style>
<script type="text/javascript">

$(function() {

	// install flowplayer into flowplayer container
	var player = $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.2.swf");
	
	// setup button action. it will fire our overlay 
	$("a[rel]").overlay({
		
		// use the Apple effect for overlay
		effect: 'apple',
		
		// when overlay is opened, load our player
		onLoad: function() {
			player.load();
		},
		
		// when overlay is closed, unload our player
		onClose: function() {
			player.unload();
		}
	});
			
});

</script>
</head>
<body>
<p>
	<a rel="div.overlay" href="#" ><img src="http://gwosouth.com.previewdns.com/images/banner.jpg" height="267" width="286" alt="" border="0" /></a>

</p>

<!-- element that is overlayed, visuals are done with external CSS -->
<div class="overlay">

	<!-- flowplayer container -->
	<a id="player" href="http://gwosouth.com.previewdns.com/GWO2-0610.mov.FLV">
	
		<!-- some initial content so that player is not loaded upon page load -->

		nbsp;
	</a>
</div>

</body>
</html>