asked on

How to make a new window load up upon page load.

Hey,

I want to have a lightbox effect show up over a page that is to load on my site.

In the lightbox will be a video playing to introduce the software application the user is about to use.

I'm using wordpress and shadowbox which I can call using a link such as:

<a href="http://www.discopixels.com/helpvideo.html" rel="shadowbox;height=360;width=640"></a>

That will produce a lightbox and play the video inside it and make the lightbox that exact size.

I've tried using body onload to load the video but can't seem to get anything to happen.

How can I do this so that the page loads and then so does this lightbox with the intro video?

I've attached the code for the header of the page where the lightbox must appear.

Help would be great!

Thanks

Code to make the lightbox effect:

<a href="http://www.discopixels.com/helpvideo.html" rel="shadowbox;height=360;width=640"></a>

Header code 

-----------------------------

<?php  global $pagepress;?>
<!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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>Canvas Builder | Disco Pixels - Professional Canvas Printing</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="<?php echo CSS_FOLDER.'/960.css';?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo CSS_FOLDER.'/reset.css';?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo CSS_FOLDER.'/trans.css';?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo CSS_FOLDER.'/wp.css';?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo ROOT.'/style.css';?>" type="text/css" media="screen" />



<?php if($pagepress->favicon):?><link rel="shortcut icon" href="<?php echo $pagepress->favicon;?>" type="image/x-icon" /><?php endif;?>
<?php if($pagepress->touchicon):?><link rel="apple-touch-icon" href="<?php echo $pagepress->touchicon;?>" /><?php endif;?>


	<script type="text/javascript" src="<?php echo JS_FOLDER;?>/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="<?php echo JS_FOLDER;?>/jquery-ui-1.7.2.custom.min.js"></script>
	
	<script type="text/javascript" src="<?php echo JS_FOLDER;?>/jquery.cycle.all.js"></script>

	<?php// if(is_page_template('page-carousel.php')) include (CAROUSEL.'/carouselhead.php');?>

<!-- Javascript -->

<script type="text/javascript">

	$(function() {
		<?php if(pagepress('accordionjs')):?>
		$("#accordion").accordion({ 
			<?php if(pagepress('accordion_active')):?>active: <?php echo pagepress('accordion_active'); ?>,<?php endif;?>
			<?php if(pagepress('accordion_autoheight')):?>autoHeight: true<?php else:?>autoHeight: false<?php endif;?>
		});
		<?php endif;?>
		
		$("#drag_drop_sidebar").sortable();
		$("#drag_drop_sidebar").disableSelection();
		
		$('#cycle').cycle({ 
		    fx:    'fade', 
			timeout: <?php if(pagepress('timeout')):?><?php echo pagepress('timeout');?><?php else:?>0<?php endif;?>,
		    speed:  <?php if(pagepress('fspeed')):?><?php echo pagepress('fspeed');?><?php else:?>1500<?php endif;?>, 
			pager:  '#featurenav'
		 });
	});	
</script>


	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
	<![endif]-->
	<!--[if IE 6]>
		<script src="<?php echo JS_FOLDER;?>/belatedpng.js"></script>
		<script>
		  DD_belatedPNG.fix('.pngbg,#nav, .searchform, .fbox img, #nav,#respond h3,a.pagelines,.post .date, .headerimage');
		 </script>	
		<style>
			#header #blogtitle .sheen {display: none;height: 1px;}
		</style>
	<![endif]-->

<!-- Wordpress Stuff -->
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_single() ) wp_enqueue_script( 'comment-reply' ); ?> <!-- This makes the comment box appear where the ‘reply to this comment’ link is -->
<?php wp_head(); ?>
<!-- End of Wordpress stuff -->


<?php include (TEMPLATEPATH.'/_customcss.php'); ?>

<?php if (pagepress('headerscripts')) echo pagepress('headerscripts');?>

</head>
<body <?php body_class(); ?>>

<div class="preload" style="display:none;text-indent:-300em;">
	<img style="display:none;" src="<?php echo IMAGE_FOLDER; ?>/nav-hover.png" alt="preload" />
	<img style="display:none;" src="<?php echo IMAGE_FOLDER; ?>/nav-action.png" alt="preload" />
	<img style="display:none;" src="<?php echo IMAGE_FOLDER; ?>/graddark.gif" alt="preload" />
	<img style="display:none;" src="<?php echo IMAGE_FOLDER; ?>/gradlight.gif" alt="preload" />
</div>
	
<div id="page" class="fix" style="">
  <div id="wrapper" class="fix" >
	<div class="pagelinespos nav-icon"><a class="pagelines" href="<?php echo pagepress('credlink');?>"><?php echo pagepress('credtext');?></a></div>
    <div id="header" class="fix">
		<?php if($pagepress->custom_header):?>
			<a href="https://discopixels.com">
			<img class="headerimage" src="http://www.discopixels.com/images/discopixelslogo500px.png" alt="Disco Pixels - Professional Canvas Printing"/>
			</a>
		<?php else:?>
	      		<h1 id="blogtitle"><a href="<?php echo get_settings('home'); ?>"><span class="sheen"></span><?php bloginfo('name'); ?></a></h1>
	      		<div id="blogdescription"><?php bloginfo('description'); ?></div>
		<?php endif; ?>
		<?php include (TEMPLATEPATH.'/_iconlinks.php'); ?>
	</div><!-- /header -->
	<?php include (TEMPLATEPATH.'/_nav.php'); ?>


<div id="container" class="fix">
	
	<?php require(TEMPLATEPATH.'/_subnav.php');?>

Open in new window

ASKER CERTIFIED SOLUTION

Si_Hibbard

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

savavoom

ASKER

Thanks!

That worked great.

It should be noted for anyone else who wants to do this,

This bit goes in the Head:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>

Make sure you like directly to the files, so in my case I had to stick wp-content/plugins etc etc before the file name to make it work.

This bit goes in the body

<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true,
// include the html player because we want to display some html content
players: ["html"]
});

window.onload = function(){

// open a welcome message as soon as the window loads
Shadowbox.open({
content: 'Your Url', < --- Put your URL here - or content you want to show
player: "iframe", <----This makes the shadowbox load content from another site.
title: "Canvas Builder Help Video & Introduction",
height: 360,
width: 640
});

};
</script>

Thanks for that though - really helped me out!

vexer007

Hi,

I am having the same problem, being up all night trying to resolve it but unfortunately still no luck. I have followed the steps mentioned above but on my site, the grey lightbox screen shows up but my content doesn't appear. My content is definately on the sever as I can access it by browsing to it manually and play it on my browser BUT not on the onLoad fucntion. Please help.

Here is my header section...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music Video Production Company in London - Mediamind©</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

            
            <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
            <link href="css/typography.css" rel="stylesheet" type="text/css" media="screen" />
       <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
            
            <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
      
            <script type="text/javascript" src="scripts/jquery.flow.1.1.auto.js"></script>
            <script type="text/javascript" src="scripts/init_jflow_slider.js"></script>
            
            <script src="scripts/ui.core.js" type="text/javascript"></script>
<script src="scripts/ui.tabs.js" type="text/javascript"></script>
            <link rel="stylesheet" href="css/ui.tabs.css" type="text/css" media="screen" />
            
            <script type="text/javascript">
                  $(document).ready(function(){
                        $('#container-1 > ul').tabs(); /* news and events */
                  });
            </script>
      

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>

</head>

and here is my body section

<body>

<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true,
// include the html player because we want to display some html content
players: ["html"]
});

window.onload = function(){

// open a welcome message as soon as the window loads
Shadowbox.open({
content: 'Mediamindadvert.flv',
player: "iframe",
title: "Welcome to our website",
height: 360,
width: 640
});

};
</script>

Thank you for your help in advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- Uvi Orogun -->
<head>
<title>Music Video Production Company in London - Mediamind&copy;</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



		<!-- styles -->
		<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
		<link href="css/typography.css" rel="stylesheet" type="text/css" media="screen" />
	    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />	
		<!-- jquery -->
		<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>	
	<!-- initialize slider -->
		<script type="text/javascript" src="scripts/jquery.flow.1.1.auto.js"></script>
		<script type="text/javascript" src="scripts/init_jflow_slider.js"></script>
		<!-- tabs -->
		<script src="scripts/ui.core.js" type="text/javascript"></script>
        <script src="scripts/ui.tabs.js" type="text/javascript"></script>
		<link rel="stylesheet" href="css/ui.tabs.css" type="text/css" media="screen" />
		<!-- initialize tabs -->
		<script type="text/javascript">
			$(document).ready(function(){
				$('#container-1 > ul').tabs(); /* news and events */
			});
		</script>
	<!--[if IE 6]>
		<link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" />	
		<script src="scripts/dd_belated_png.js"></script>
		<script>
			DD_belatedPNG.fix('h2 span, #search-field, #search-button, #submit-button');
			DD_belatedPNG.fix('.bullet-list li, .header-description ul li, img, blockquote');
			DD_belatedPNG.fix('#left-shadow, #right-shadow, .tab-container, #footer-bottom, #footer-shadow');
		</script>
		<![endif]--> 


        
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script> 

        
</head>

Open in new window