Jump to content

some URGENT assistance debugging this imageloader please!


Greywacke
 Share

Recommended Posts

hi there,i've built this imageloader script to be plugged into webpages with the purpose of being used for image galleries (for the likes of photographers who choose to have a static webpage).the page designed by a tertiary party, is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- Generated by Avanquest Technology v:6.0. For information please visit: [url="http://www.v-com.com"]http://www.v-com.com[/url] --><html lang="en"><head>	<title> Commitment </title>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<meta http-equiv="Content-Style-Type" content="text/css;">	<link rel="stylesheet" href="lizelle_g.css" type="text/css" media="screen,projection">	<!--// Document Style //-->	<link rel="stylesheet" href="lizelle_003_p.css" type="text/css" media="screen,projection">	<!--// Page Style //-->	<script src="lizelle_g.js" type="text/javascript" language="JavaScript1.2"></script>		<!--// Document Script //-->	<script src="gw_imageloader_003.js" type="text/javascript" language="javascript"></script>	<!--// Imageloader Script //--></head><body id="page">	<div id="t0"><div id="t999"> </div></div>	<div id="e7" class="cc08">		<a href="index.htm">		Home</a>	</div>	<div id="e6" class="cc08">		<a href="lizelle_002.htm">		Portfolio</a>	</div>	<div id="e5" class="cc08">		<a href="lizelle_011.htm">		Recent Work</a>	</div>	<div id="e4" class="cc08">		<a href="lizelle_012.htm">		Contact Us</a>	</div>	<div id="e3" class="cc09"> Commitment </div>	<span id="e2" class="cc10"></span><span id="e1" class="cc10"></span><a href="java script:void(0);"><div id="t1"></div></a><a href="java script:void(0);"><div id="t2"></div></a><a href="java script:void(0);"><div id="t3"></div></a><a href="java script:void(0);"><div id="t4"></div></a><a href="java script:void(0);"><div id="t5"></div></a><a href="java script:void(0);"><div id="t6"></div></a><a href="java script:void(0);"><div id="t7"></div></a><a href="java script:void(0);"><div id="t8"></div></a><a href="java script:void(0);"><div id="t9"></div></a><a href="java script:void(0);"><div id="t10"></div></a><a href="java script:void(0);"><div id="t11"></div></a><a href="java script:void(0);"><div id="t12"></div></a></body></html>

and the script i wrote overnight, as follows:

// JavaScript Documentvar page = "commitment";var count = 60;var limit = 12;var loaded = false;var timeout = null;var thumbs = new Array();var rnd = new Array(limit);var pg = null;for (var i = 1; i < limit + 1; i++) {	rnd[i] = -1;}var img = new Array(count);for (var i = 0; i < count; i++) {	img[i] = new Image();	img[i].src = "thumbs/" + page + "/" + pad(i, 4) + ".jpg";}function preload(number) {	pg.style.visibility = "visible";	var ret = false;	var container = document.getElementById("e1");	ret = setthumbs(number);	if (!ret) alert("function \"setthumbs();\" failed."); pg.style.visibility = "hidden"; return ret;	var file = "images/" + page + "/image_" + pad(rnd[number], 4) + ".jpg";	var pht = new Image();	ret = (pht.src = file);	if (!ret) alert("loading \"" + file + "\" failed."); pg.style.visibility = "hidden"; return ret;	ret = (container.style.backgroundImage = pht.src);	pg.style.visibility = "hidden";	return ret;}function setthumbs(number) {	var ret = false;	// get distinct random set	for (var i = 1; i < limit + 1; i++) {		if (i != number && i < count) {			var rnd = getrandom(count-1);			var tdiv = document.getElementById("t"+i);			ret = (tdiv.style.backgroundImage = img[i].src);			if (!ret) return ret;			ret = (rnd[i] = rnd);			if (!ret) return ret;		}	}	return true;}function pad(number, padding) {	var ret = String(number);	for (var i = 0; i < padding - number.length; i++) {		ret = "0" + ret;	}	return ret;}function getrandom(limit) {	var rnd = Math.round(Math.random()*count)-1;	for (var i = 1; i < limit + 1; i++) {		while (rnd[i] == -1 || rnd[i] == rnd && i < count) {			var rnd = Math.round(Math.random()*count)-1;		}	}	return rnd;}window.onload = function () {	var ret = false;	pg = document.getElementById("t0");	if (pg != null) {		ret = setthumbs(0);		if (ret) {			loaded = true;			clearTimeout(timeout);			pg.style.visibility = "hidden";		} else {			if (confirm("thumbnail loading failed."))	{				timeout = window.setTimeout("window.onload();", 5000);			} else {				loaded = true;				clearTimeout(timeout);				pg.style.visibility = "hidden";			}		}	} else {		alert("pg = null!");		timeout = window.setTimeout("window.onload();", 5000);	}	return ret;}if (pg != null) pg.style.visibility = "visible";

the "startup"or css to load, is as follows:

/*--- Avanquest WebEasy Page Style ---*/.cc08			   { /* Common */	font			: italic 16pt 'Vivaldi';	color		   : #c0c0c0;	}.cc09			   { /* Common */	font			: italic 48pt 'Vivaldi';	color		   : #ffffff;	}.cc10			   { /* Common */	border		  :   0.00pt solid #c0c0c0;	/* clip			: rect("0.00pt,681.00pt,0.75pt,0.00pt"); */	}div#e7			  { /* Home */	position		: absolute;	left			: 463.50pt;	top			 :  66.75pt;	width		   :  51.00pt;	height		  :  18.75pt;	}div#e6			  { /* Portfolio */	position		: absolute;	left			: 518.25pt;	top			 :  66.00pt;	width		   :  58.50pt;	height		  :  18.75pt;	}div#e5			  { /* Recent Work */	position		: absolute;	left			: 581.25pt;	top			 :  66.75pt;	width		   :  87.75pt;	height		  :  18.75pt;	}div#e4			  { /* Contact Us */	position		: absolute;	left			: 672.00pt;	top			 :  67.50pt;	width		   :  73.50pt;	height		  :  21.75pt;	}div#e3			  { /* Commitment */	position		: absolute;	left			:  41.25pt;	top			 :  34.50pt;	width		   : 277.50pt;	height		  :  71.25pt;	}span#e2			 { /* lizelle003002.gif */	background	  : transparent url("lizelle003002.gif") no-repeat center center;	position		: absolute;	left			:  45.00pt;	top			 : 102.00pt;	width		   : 681.00pt;	height		  :   0.75pt;	}span#e1			 { /* lizelle003002.gif */	position		: absolute;	left			: 27.75pt;	top			 : 117pt;	width			: 800px;	height			: 800px;	background	  : transparent url("lizelle003001.jpg") no-repeat top left;	}div#t999			{ /* AJAX Loader Animation */	width			: 100%;	height			: 100%;	background	  : transparent url("ajax_loader.gif") no-repeat center center;	visibility		: inherit;}div#t12				{ /* image_0007.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 460px;	left			: 812px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t11			 { /* image_0000.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 460px;	left			: 662px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t10			 { /* image_0017.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 460px;	left			: 512px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t9			 { /* image_0022.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 460px;	left			: 362px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t8			 { /* image_0007.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 310px;	left			: 812px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t7			 { /* image_0000.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 310px;	left			: 662px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t6			 { /* image_0017.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 310px;	left			: 512px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t5			 { /* image_0022.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 310px;	left			: 362px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t4			 { /* image_0007.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 160px;	left			: 812px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t3			 { /* image_0000.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 160px;	left			: 662px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t2			 { /* image_0017.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 160px;	left			: 512px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t1			 { /* image_0022.jpg */	position		: absolute;	width	   	: 100px;	height			: 100px;	top				: 160px;	left			: 362px;	z-index			: 10;	background		: transparent no-repeat center center;	}div#t0				{ /* Ajax Loader Background */	position		: fixed;	left			: 0px;	top			 : 0px;	width			: 100%;	height			: 100%;	background		: transparent url("ajax_loader.png") repeat top left;	z-index			: 999;}body#page		   { /* Page Body */	background-color: #000000;	}/*--- EndOfFile ---*/

i have chosen to load a random set of images from the onload event, and subsequently onclick for each thumbnail excepting the clicked thumbnails however.unfortunately i do not see why the setthumbs function keeps returning the following error - each time a thumbnail is attempted population for display.

Warning: Error in parsing value for 'background-image'. Declaration dropped.Line: 0
this is all a favour i am doing for a friend's photographer sister.any chance some other "guru" might be able to see what i do not? :) Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...