1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

image gallery

build an image gallery

         

dupalo

10:33 pm on May 18, 2011 (gmt 0)

10+ Year Member



Hi there,
I am trying to build a script that will take some pictures (as a test 3) and display them in turn on my homepage. Ideally I will want to add some jquery eventually to get a fading effect so that when a picture replace the other it kind of fades away. But let's start with order, and first, a script that loops through images. Now, I am new to javascript, so my code might be a bit clunky and i might say things that to you are utterly nonsense, so sorry for that in advance. this is my home page [antobbo.webspace.virginmedia.com ] with the script on it that, needless to say, doesn't work.
the script on my home page goes: 

...
<script type="text/javascript">
<!--
var myImages = new Array("images/test1.jpg", "images/test2.jpg", "images/test3.jpg");
randomImage = Math.floor(Math.random()*myImages.length);
function displayImages()
{
document.write('<img src="'+myImages[randomImage]+'">');
if (randomImage < 3)
randomImage++;
else
randomImage=0;
}

//call function "displayImages()" every 2.5 seconds
setTimeout("displayImages()",2500)
}
//-->
</script>

</head>

<body id="page_body" onload="displayImages()">
...

So, what I have done here was to create a variable to initialize the array, then use the 
Math.floor(Math.random()*myImages.length);
to calculate a random number from 0 to <3 and copy it into a variable and then the function will display the images and if the index of the array is <3 then I increment it otherwise it starts from 0 again. then the 
setTImeout()
will call the function every2.5 secs.
It might be worth noting that my images are in a folder "images" and my css in a folder called "stylesheets".
Could anybody give me a hint on how to make sure this script works? I would like to do it this way because I don't want to simply copy and paste a script for the net, I would like to learn a bit of javascript and be able to write my own, small, scripts
thanks

birdbrain

12:13 am on May 19, 2011 (gmt 0)



Hi there dupalo,

and a warm welcome to these forums. ;)

Try this modified page... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<base href="http://www.antobbo.webspace.virginmedia.com/photography/moretesting/"> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<meta http-equiv="Content-Language" content="en"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
 
<title>Photography Home</title> 
 
<link rel="stylesheet" type="text/css" href="stylesheets/containers.css"> 
<link rel="stylesheet" type="text/css" href="stylesheets/navigations.css"> 
 
<style type="text/css"> 
.picture_box_home { 
 width:708px; 
 min-height:inherit; 
 padding:4px; 
 background-color:#fff; 
 } 
#pic { 
 display:block; 
 width:700px; 
 height:525px; 
 border:4px solid #7d003a; 
 } 
</style> 
 
<script type="text/javascript"> 
 
 var myImages=['images/test1.jpg','images/test2.jpg','images/test3.jpg']; 
 var delay=2500; //call function "displayImages()" every 2.5 seconds 
 var temp; 
 
function displayImages() { 
 var randomNumber=Math.floor(Math.random()*myImages.length); 
if(randomNumber==temp) { 
 return displayImages(); 
 } 
 temp=randomNumber; 
 
 document.getElementById('pic').src=myImages[randomNumber]; 
 
 setTimeout(function(){displayImages()},delay) 
 } 
 window.addEventListener? 
 window.addEventListener('load',displayImages,false): 
 window.attachEvent('onload',displayImages); 
</script> 
 
</head> 
<body id="page_body"> 
 
<div class="wrapper"> <!-- MAIN CONTAINER --> 
 
<div class="wrap_content"> <!-- BOX FOR CONTENT--> 
<div class="banner"> <!--BOX FOR BANNER --> 
</div> <!--END OF BOX FOR BANNER --> 
 
<h1>AB Photography</h1> 
 
<div class="navigation_menu"> <!-- TOP NAVIGATION BOX--> 
 
<ul> 
 <li class="button1"><a href="#">Test1</a></li> 
 <li class="button2"><a href="#">Test2</a></li> 
 <li class="button3"><a href="#">Test3</a></li> 
 <li class="button4"><a href="#">Test4</a></li> 
</ul> 
 
</div><!-- END OF TOP NAVIGATION BOX--> 
 
<div class="picture_box_home"><!-- PICTURE BOX--> 
 
 <img id="pic" src="images/test1.jpg" alt=""> 
 
</div><!-- END OF PICTURE BOX--> 
 
<p><br><br></p> 
 
</div> <!-- END OF BOX FOR CONTENT--> 
 
</div><!-- END OF MAIN CONTAINER "WRAPPER"--> 
 
</body> 
</html>

Note:-
you can remove this...
<base href="http://www.antobbo.webspace.virginmedia.com/photography/moretesting/">

...from the code, it is only there for my testing.:)

birdbrain

dupalo

11:03 am on May 19, 2011 (gmt 0)

10+ Year Member



Thanks birdbrain,
that works a treat. The thing is that I am not quite sure I understand all that code, would you be able, if it is not too much trouble, to explain what it does?
Like, starting from the new style rule you added, how does that do? 
<style type="text/css"> 
.picture_box_home { 
 width:708px; 
 min-height:inherit; 
 padding:4px; 
 background-color:#fff; 
 } 
#pic { 
 display:block; 
 width:700px; 
 height:525px; 
 border:4px solid #7d003a; 
 } 
</style>


For the script: 

 var myImages=['images/test1.jpg','images/test2.jpg','images/test3.jpg'];

Does it mean that we are assigning 3 values to the variable? it doesn't look like an array... 
function displayImages() { 
 var randomNumber=Math.floor(Math.random()*myImages.length); 
if(randomNumber==temp) { 
 return displayImages(); 
 }

Here we assign the the "math" function to a variable "randomNumber" then if the varialbe is = to temp (how can that be if "temp" has got no value yet?) you return the value of the function. 

document.getElementById('pic').src=myImages[randomNumber];

Now, does this mean that we pick up all the images (src) with id "pic" and we assign to it, somehow in turn, the value of 0,1,2? 

 setTimeout(function(){displayImages()},delay) 
 } 
 window.addEventListener? 
 window.addEventListener('load',displayImages,false): 
 window.attachEvent('onload',displayImages);

this...uhm, I am a bit lost...sorry

birdbrain

12:46 pm on May 19, 2011 (gmt 0)



Hi there dupalo,

here are my answers to your questions, but bear in mind that, as javascript is not my forte,
they may be technically lacking. ;)

1. This... 


.picture_box_home { 
 width:708px; 
 min-height:inherit; 
 padding:4px; 
 background-color:#fff; 
 }

...is there to reconfigure this in your style sheet... 


.picture_box_home { 
 clear:both;  
 border:7px solid #7d003a; 
 width:716px; 
 min-height:541px; 
 margin:5px auto; 
 position:relative; 
 }

The final result of this reconfiguration would be this... 


.picture_box_home { 
 clear:both;  
 border:7px solid #7d003a; 
 width:708px; 
 padding:4px;  
 margin:5px auto; 
 background-color:#fff;  
 }

2. This... 


#pic { 
 display:block; 
 width:700px; 
 height:525px; 
 border:4px solid #7d003a; 
}

...styles the "gallery" images.

3. This.. 


 var myImages=['images/test1.jpg','images/test2.jpg','images/test3.jpg'];

...may not look like an array to you, but it is.

Further reading:-
javascript Arrays using Literal Notation [google.com]

4. This... 


 var randomNumber=Math.floor(Math.random()*myImages.length);  
if(randomNumber==temp) {  
 return displayImages();  
 }  
 temp=randomNumber;

...stops images from repeating.

Initially "temp" has no value, so on the first run of the script "temp" will be set to the
first generated random number. On subsequent runs of the script the random number is then
compared to "temp" and if it is the same goes back to the start and generates another random
number. This procedure is repeated until the random number does not equal "temp" and the rest
of the script is then run. The "temp" value takes the new random number value.

5. This... 


 document.getElementById('pic').src=myImages[randomNumber];

...changes the img src here... 


<div class="picture_box_home"><!-- PICTURE BOX-->  
  
 <img id="pic" src="images/test1.jpg" alt="">  
  
</div><!-- END OF PICTURE BOX-->


6. This... 


 window.addEventListener? 
 window.addEventListener('load',displayImages,false): 
 window.attachEvent('onload',displayImages);

...is the modern replacement for this... 


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


birdbrain

dupalo

9:02 pm on May 19, 2011 (gmt 0)

10+ Year Member



birdbrain,
thanks ever so much for that, it is much better now : - ).
One thing though, is still puzzling me a bit. You know when you inserted your inline css to reconfigure my rule in the external css, well you also removed 2 div boxes from my home page (respectively called "in_pic" and "in_pic1"), so how is possible that the frames they are supposed to represent are still coming up in the browser? Or does that "inherit" in your style sheet makes that possible?

on a different note, if you remember in my original post I said I wanted to add some jquery (if you think it is better to start a separate post I will do it no prob)to the page, which I have done (I also modified slightly the changes you made) so I ended up with the following: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.antobbo.webspace.virginmedia.com/photography/moretesting/">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Photography Home</title>

<link rel="stylesheet" type="text/css" href="stylesheets/containers.css">
<link rel="stylesheet" type="text/css" href="stylesheets/navigations.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
.picture_box_home {
 width:708px;
 min-height:inherit;
 padding:4px;
 background-color:#fff;
 }
#pic {
 display:block;
 width:700px;
 height:525px;
 border:4px solid #7d003a;
 }
</style>

<script type="text/javascript">

 var myImages=['images/test1.jpg','images/test2.jpg','images/test3.jpg'];
 var delay=4000; //call function "displayImages()" every seconds
 var temp;

function displayImages() {
 var randomNumber=Math.floor(Math.random()*myImages.length);
if(randomNumber==temp) {
 return displayImages();
 }
 temp=randomNumber;
$("#pic").fadeOut(4000);
 document.getElementById('pic').src=myImages[randomNumber];
$("#pic").fadeIn(4000);


 setTimeout("displayImages()",delay)
 }

</script>

</head>
<body id="page_body" onload="displayImages()">

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

<div class="wrap_content"> <!-- BOX FOR CONTENT-->
<div class="banner"> <!--BOX FOR BANNER -->
</div> <!--END OF BOX FOR BANNER -->

<h1>AB Photography</h1>

<div class="navigation_menu"> <!-- TOP NAVIGATION BOX-->

<ul>
 <li class="button1"><a href="#">Test1</a></li>
 <li class="button2"><a href="#">Test2</a></li>
 <li class="button3"><a href="#">Test3</a></li>
 <li class="button4"><a href="#">Test4</a></li>
</ul>

</div><!-- END OF TOP NAVIGATION BOX-->

<div class="picture_box_home"><!-- PICTURE BOX-->

 <img id="pic" src="images/test1.jpg" alt="">

</div><!-- END OF PICTURE BOX-->

<p><br><br></p>

</div> <!-- END OF BOX FOR CONTENT-->

</div><!-- END OF MAIN CONTAINER "WRAPPER"-->

</body>
</html>

The good news is that it kinda works, the bad news is that it works in a funny way, as in sometime the next picture is overlapping the fading effect or the fading effect doesn't happen with all the pix....and I wonder why. I had a look in various places and also the w3c schools, but I am not sure if there is anything wrong with the way I positioned the 2 jqueriy bits...here's the link to the new page, so you can see what I mean: [antobbo.webspace.virginmedia.com ]

thanks

birdbrain

1:17 am on May 20, 2011 (gmt 0)



Hi there dupalo,

so how is possible that the frames they are supposed to represent are still coming up in the browser?

The identical effect of the three divs is created by having a red border an white padding for the ".picture_box_home" div and a red border for the image. ;)

If you are going to use JQuery for fading effects, would it not make sense to use it for the image swapping also?

To get it to work with "Jquery", about which, I know nothing requires a little more tinkering with the code... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.antobbo.webspace.virginmedia.com/photography/moretesting/">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Photography Home</title>

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

<style type="text/css">
.picture_box_home {
  width:708px;
  min-height:inherit;
  height:533px;
  padding:4px;
  background-color:#fff;
 }
#pic {
  display:block;
  width:700px;
  height:525px;
  border:4px solid #7d003a;
 }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

  var preloads=[];


function preload(){


for(var i=0;i<arguments.length;i++) {
  preloads[preloads.length]=new Image();
  preloads[preloads.length-1].src=arguments[i];

  }

 }

preload('images/test1.jpg','images/test2.jpg','images/test3.jpg');

  var delay=4000; //call function "displayImages()" 4 every seconds
  var temp;
  var test=true;
  var randomNumber;

function displayImages() {

  test==true?(test=false,out()):(test=true,ink());

 }

function out(){
  setTimeout(function(){displayImages()},delay);
  $("#pic").fadeOut(delay)
 }

function ink(){
  randomNumber=Math.floor(Math.random()*preloads.length);
if(randomNumber==temp) {
  return ink();
 }
  temp=randomNumber;

  document.getElementById('pic').src=preloads[randomNumber].src;
  setTimeout(function(){displayImages()},delay);
  $("#pic").fadeIn(delay)
 }
  window.addEventListener? 
  window.addEventListener('load',displayImages,false): 
  window.attachEvent('onload',displayImages); 
</script>

</head>
<body id="page_body">

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

<div class="wrap_content"> <!-- BOX FOR CONTENT-->
<div class="banner"> <!--BOX FOR BANNER -->
</div> <!--END OF BOX FOR BANNER -->

<h1 id="foo">AB Photography</h1>

<div class="navigation_menu"> <!-- TOP NAVIGATION BOX-->

<ul>
 <li class="button1"><a href="#">Test1</a></li>
 <li class="button2"><a href="#">Test2</a></li>
 <li class="button3"><a href="#">Test3</a></li>
 <li class="button4"><a href="#">Test4</a></li>
</ul>

</div><!-- END OF TOP NAVIGATION BOX-->

<div class="picture_box_home"><!-- PICTURE BOX-->
 <img id="pic" src="images/test1.jpg" alt="">
</div><!-- END OF PICTURE BOX-->

<p><br><br></p>

</div> <!-- END OF BOX FOR CONTENT-->
</div><!-- END OF MAIN CONTAINER "WRAPPER"-->

</body>
</html>

birdbrain

dupalo

12:47 pm on May 20, 2011 (gmt 0)

10+ Year Member



Oh I see what you mean about the canvasses, it makes sense : - )

About the jquery thingy, at the first run of the script here's what happens (if I understand this correctly):
function 
function displayImages() {

 test==true?(test=false,out()):(test=true,ink());

 }


is the first thing that is called when he page loads (when does this 
 var preloads=[];


function preload(){


for(var i=0;i<arguments.length;i++) {
 preloads[preloads.length]=new Image();
 preloads[preloads.length-1].src=arguments[i];

 }

 }

preload('images/test1.jpg','images/test2.jpg','images/test3.jpg');

 var delay=4000; //call function "displayImages()" 4 every seconds
 var temp;
 var test=true;
 var randomNumber;
execute instead?) and since we said that 
test==true
then this 
function ink(){
 randomNumber=Math.floor(Math.random()*preloads.length);
if(randomNumber==temp) {
 return ink();
 }
 temp=randomNumber;

 document.getElementById('pic').src=preloads[randomNumber].src;
 setTimeout(function(){displayImages()},delay);
 $("#pic").fadeIn(delay)
 }

is executed...uhm sorry I am getting a little confused about what happens when...

birdbrain

10:21 pm on May 20, 2011 (gmt 0)



Hi there dupalo,

1.
The function preload() runs before the page loads.
I added it to the script to ensure smooth transition in the swapping of the images.


2.
This...



 test==true?(test=false,out()):(test=true,ink());

...is shorthand for...


if(test==true) {
 test=false;
 out();
 }
else {
if(test==false) {
 test=true;
 ink();
 }

...and alternates functions out() and ink() - this was originally in(), but "in"
appears to be a javascript reserved word, so I just added a random letter. ;)

birdbrain

dupalo

10:06 am on May 23, 2011 (gmt 0)

10+ Year Member



Birdbrain,
thanks ever so much for all your help and patience : - )
I am looking at some online tutorials, at the moment, need to learn javascript a bit better, no doubt I will post more questions soon.
thanks again

birdbrain

10:22 am on May 23, 2011 (gmt 0)



No problem, you're very welcome. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026