Jump to content

some URGENT assistance debugging this imageloader please!

Greywacke

By Greywacke
in JavaScript

Recommended Posts

Greywacke Invested Member

Greywacke

Posted
Posted

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? :)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...