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

savavoom
savavoom used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
The shadow box page itself has a example of doing this, the window is opened via javascript using the shadowbox javasscript interface.

Put your URL in the content part - instead of the html div etc.

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<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:    '<div id="welcome-msg">Welcome to my website!</div>',
        player:     "html",
        title:      "Welcome",
        height:     350,
        width:      350
    });

};
</script>

Author

Commented:
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!

Commented:
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"><!-- 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>



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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial