GoFuckYourself.com - Adult Webmaster Forum - View Single Post

Vendzilla · 07-24-2010, 02:11 PM

Here's the css, the position is already absolute

Code:

div.overlay {
background:url(white.png) no-repeat;

padding:40px;
width:600px;
display:none;
}

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

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

img {border:none;
}
/* the overlayed element */
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(http://flowplayer.org/img/overlay/close.png);
	position:absolute; right:1px; top:1px;
	cursor:pointer;
	height:35px;
	width:35px;
}

and here's the code for the html

Code:

<html>
<head>
<title>Briana Banks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script> 
<script src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"/></script>
<script type="text/javascript" src="js/flowplayer-3.2.2.min.js"/></script>
<link rel="stylesheet" type="text/css" href="http://brianabanksreloaded.com/js/overlay.css"/>
<style>
	
	/* black version of the overlay. simply uses a different background image */
	div.apple_overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
	}
	
	div.black h2 {
		color:#fff;
	}
	
	#triggers {
		margin-top:10px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	</style>
 
	
	
	<!--[if lt IE 7]>
	<style> 
	div.apple_overlay {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
		color:#fff;
	}
	
	/* default close button positioned on upper right corner */
	div.apple_overlay div.close {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
	
	}	
	</style>
	<![endif]-->

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script> 
$(function() {
 
	// setup overlay actions to buttons
	$("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("js/flowplayer-3.2.2.swf"); 
});	
</script> 
<!-- END FLOWPLAYER JAVASCRIPT -->

      <div align="center"><a href="#" rel="#overlay1" >Click Here</a></div>	
      <div id="triggers">
<img src="http://brianabanksreloaded.com/js/2.jpg" rel="#photo1"/>
<img src="http://brianabanksreloaded.com/js/1.jpg" rel="#photo2"/></div>

<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay" id="photo1">
	<img src="http://brianabanksreloaded.com/js/briana2.jpg" />

	<div class="details">

		<h2>Brianas phots</h2>

		<p>
			Briana is going to stay on a busy schedule of shooting for her fans,getting new photo sets, showing off all the hard work in the gym.
	  </p>
	</div>
</div>

<div class="apple_overlay" id="photo2">
	<img src="http://brianabanksreloaded.com/js/briana3.jpg" />

	<div class="details">
		<h2>Just Hanging with Briana</h2>

		<p>
			Briana is ready to hang out with you, she's tied to her work, her weekly webcam shows will leave you wet and worn
		</p>
	</div>
</div>


<!-- make all links with the 'rel' attribute open overlays -->

<script>


$(function() {
	$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>


<div class="overlay" id="overlay1" > 
	<a class="player" href="trailercut.flv" > 
		&nbsp;
	</a> 
</div>
 
 
</body>
</html>