Really pretty clueless on JS

cullinanweb · #1 (**permalink**) Oct 20th, 2006, 10:17

Hi there,

i am hoping for some urgent help. A page i have created www.giselewirral.co.uk/fashion_show.php for a client uses php to generate the gallery. However it also uses 'lightbox' to put it in pretty frames.

If the user clicks an image before all have loaded it just takes them to the location of the image, and the rest of the page stops loading.

I want to put a div (loadinga (not miss spelt)) that fills the screen with a loading image and text to explain what is happening to prevent the user clicking.

when the processing is finished i want the div to have display:none
Any ideas? The code of the gallery is included below:

FASHION_SHOW.PHP

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gisele Boutique, Heswall, Wirral</title>
<meta name="description" content="Giselle Boutique Heswall. the boutique with a difference. For Ladies clothing, footwear and accessories." />
<meta name="keywords" content="gisele,boutique,ladies clothing,different clothing,clothes, bags, handbags,shoes,high heels,accessories" />
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script></head>
<?php include ("includes/functions.php");?>
<body>
<div id="wrapper2">
<h1>Fashion Show Gallery </h1>
<p><strong>Usage:</strong></p>
<p>To view a larger version of any image simply click on it. To move to the next or previous image press N or P respectively, whilst in the larger view.</p>
<p><strong>To Purchase: </strong></p>
<p>To purchase any of the clothes shown please call in. <span class="float"><a href="index.php"><img src="images/logo.jpg" alt="Gisele" width="223" height="130" border="0" /><p>Return to Home</p></a></p></span>
<div id="gallery"><?php gallery() ?></div>
<div id="footer"><p>© Gisele 2006 | Designed by <a href="http://www.cullinanweb.co.uk">Cullinan Web Design</a></p>
</div>
</div>
</body>
</html>

FUNCTIONS.PHP

<?php
function gallery(){
$dh=opendir('/wamp/www/giselle/images/fashion');
while ($file = readdir($dh))
if ($file != "." AND $file != ".." AND $file !="Thumbs.db")
echo '<a title="Press P for the previous image and N for the next image" rel="lightbox[1]" href="images/fashion/'.$file.'"><img src="phpthumb/phpThumb.php?src=../images/fashion/'.$file.'&h=120&w=120" alt="'.$file.'" border="0" /></a>';
closedir($dh);
}
?>

ukgeoff · #2 (**permalink**) Oct 20th, 2006, 20:48

You could try having a div the width and height of your page with a z-index such that it sits above everything else.

Set its position: absolute and it s top and left attributes as required.

When the page is fully loaded, call a JavaScript function to change its display to none.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Pretty please review my site thank you!	computerpeople	Free Web Site Critique	10	May 19th, 2008 00:21
New and clueless	dhall	Introduce Yourself	8	Aug 21st, 2007 15:49
Textured backgrounds with pretty bits	wickedmoon	Web Page Design	2	Aug 19th, 2007 22:08
im pretty sure the answer to this question is no but....	heyo	Web Page Design	2	Mar 2nd, 2007 21:39
Hello I'm clueless!	sarahrobin	Introduce Yourself	4	Feb 15th, 2007 08:46

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Really pretty clueless on JS