Member Avatar for Violet_82

Hi there, I am trying to create an image gallery on my home page http://www.antobbo.webspace.virginmedia.com/photography/home.htm
which gets displayed in the canvas. Ideally I would like to add some jquery to have a smooth transition between the images but I am getting a bit lost.
First of all I want to make sure that the images alternate, no matter the jquery for the time being, but I am having problems with that too
Here's the relevant code:
-the canvas(created in the containers.css) is:

.picture_box_home
{
clear:both; /* need to add this to make sure the navigation doesn't overlap it. Strangely, this doesn't happen in IE*/
/*background-color:red;*/
border:7px solid #7d003a;
width:716px;
min-height:541px;
margin:0 auto;
position:relative;

/*background: #000000 url(../images/test1.jpg) no-repeat;*/
}

.in_pic
{
border:4px solid white;
width:708px;
min-height:533px;
margin:0 auto;
position:absolute;

}

.in_pic1
{
border:4px solid #7d003a;
width:700px;
min-height:525px;
margin:0 auto;
position:absolute;
/*background: #000000 url(../images/test1.jpg) no-repeat;*/

}

In my html page (in the <body></body> )I have the script:

<script type="text/javascript">

function swapImages()
{
var myImages = new Array("images/test1.jpg", "images/test2.jpg", "images/test3.jpg");
randomImage = Math.floor(Math.random()*myImages.length);

	document.write(myImages[randomImage]);
	

}
</script>

Now, the images are not displaying, is it because I got the script wrong and because I have that "funny" situation with boxed layered up in the css?

any help much appreciated
thanks

  • 1 Contributor
  • 1 Reply
  • 109 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for Violet_82

Ok I run a quick test to try to get this image thingy to work, but still no luck at all.
I attach the code, sure my javascript is dodgy...
test.htm page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">



<script type="text/javascript">
<!--
function swapImages()
{
var myImages = new Array("test1.jpg","test2.jpg","test3.jpg");



for (randomImage = Math.floor(Math.random()*myImages.length); randomImages<3; randomImages++)
{
document.write(myImages[randomImage]);
}
}
//-->
</script>

<title>Photography Home</title>

<link rel="stylesheet" type="text/css" href="containers.css">

</head>

<body id="page_body" onload="swapImages()">


<div class="wrapper"> <!-- MAIN CONTAINER -->

</div>




</body>

</html>

CSS containers.css:

@charset "utf-8";
* /* overall settings*/
{
margin:0;
padding:0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.wrapper /* main container */
{
width:900px;
min-height:600px;
/*background: #000000 url(test1.jpg) no-repeat;*/
}

Images attached, everything is the same folder
in my javascript I attempted to load a different image everytime the page is refreshed (now this is not what I eventually have but I suppose it is a good starting point, at least I try to understand a bit more about JS. Eventually I would like to add some jquery so that I can have a sort of slideshow, with images gradually disappearing evry 5-10 secs).
So I created a function swapImages() , copied the array elements in a variable, then the for loop should loop through the images and the document.write(myImages[randomImage]); should ideally display the images...but obviously that doesn't happen, anybody can give me a hand please?
thanks

test1.jpg 293.73 KB test2.jpg 354.76 KB test3.jpg 402.12 KB
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.