Latest tutorial: Making a Movieclip face another Movieclip or point on the stage | Ask Tutorial5!
 

Creating a JavaScript photo gallery which automatically change
(55 votes)
Written by AnaS   

This tutorial explains the manner you can create a JavaScript photo gallery which automatically change.
Prepare 5 images for introducing them in the JavaScript gallery.

Create a HTML file and introduce one of the images selected with the "photo-gallery" id (set the src, width and height attributes corresponding to your own images):

<img src="photos/pic1.jpg" id="photo-gallery" width="420" height="260">

Now let's create a JavaScript function that will automatically unroll the images at one second interval.
Put this code in the head section of your HTML document:

<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%5==0){
document.getElementById('photo-gallery').src = "photos/pic1.jpg";
}
if (c%5==1){
document.getElementById('photo-gallery').src = "photos/pic2.jpg";
}
if (c%5==2){
document.getElementById('photo-gallery').src = "photos/pic3.jpg";
}
if (c%5==3){
document.getElementById('photo-gallery').src = "photos/pic4.jpg";
}
if (c%5==4){
document.getElementById('photo-gallery').src = "photos/pic5.jpg";
}
c=c+1
s=setTimeout("photoGallery()",1000)
}
</script>

We use here the c (initially having 0 value) variable which is incremented every one second. We use the getElementById method (which returns the object with the "photo-gallery" id ) of the document object (that represents the entire HTML page).
Depending of the division remainder ( JavaScript modulus operator: c%5) it is chosen the picture to be displayed.

In the last line of the script it is used the setTimeout() method for calling the photoGallery() function each 1000 miliseconds (that means 1 second).

Now just use the onLoad Event Handler and call the photoGallery() function from the body.

<body onLoad="photoGallery()">

You can also launch application with JavaScrip .

Great job! The result should look like this PHOTO GALLERY.



Subscribe now via RSS feed and get all the new tutorials

written by Chris , September 14, 2007

How can you get this work with master pages/
written by Giji , October 24, 2007

Thanks for your great help
written by vijju , October 29, 2007

how can we use it in flash (i want the images attach with database). If we can add new images, the new images also display in the slide show.
written by Ruaan , November 15, 2007

Good day,

I want to know, I want to coundown the days to christmas via pictures but have them change every day, can you help me??

thank you,
written by AnaSt , November 19, 2007

Hi Ruaan! You may create a gallery that shows a picture depend on current date.

For example you have the currentDate variable that holds the current date of the month:

var datetime=new Date();
var d=currentDate.getDate();

Having the above example you can do as it follows:

if (d==1){
document.getElementById('photo-gallery').src = "photos/pic1.jpg";
}

and so on.

written by Joseph Srisuk , November 25, 2007

I like this!"Creating a JavaScript photo gallery which automatically change", but I'm working on improve my site at coolpage.biz. In my gallery I like to have small thumb at left and display on the right in flae = x: 291, y: 447
Could you advice on how to program it to: when click on thumb on left, this will call the enlarge size to display panel on the right, in place of the initial displaying animated MC.??
Hoped that you could help out,
Thanks
written by Rathi , November 30, 2007

hai

how to change the document in weekly once automatically

give me a soution
written by AnaSt , December 10, 2007

Rathi, see the line:
s=setTimeout("photoGallery()",1000)

1000 represents the interval the function is called (in my example 1 second). So calculate how may milisecond a week has and replace the value 1000 with the new value.

That is all!
written by sweden , December 12, 2007

Thankss
written by Rupali Patil.. , January 15, 2008

It's really fine...!
written by Abbas , January 22, 2008

This is exactly what I was looking for, thanks for the tutorial
written by Adept Infotech , January 27, 2008

I want to take all images from a folder to show website designing portfolio.
written by nick chau , June 18, 2008

Excellent instructions. Thanks a lot. My Web site is looking so much better.
written by Zzypty Zzyp , July 23, 2008

Hi! The code works perfectly! But, I've a couple of question -

1) If I have more than five images, say around 100 or so, is there any way to write the code? As per your present mode of writing code, the 100-image gallery code will extend to 300 lines.

2) The code changes images automatically every 1 second. Is there any way to change he image when a person clicks on button or clicks on the image?

Thanks
Zzypty
written by gigi , October 10, 2008

im sort of new to this just have a question on where do i put the last tag for the body? before each img src or ?

im confused thanks
written by Edwin , October 30, 2008

can any one please give me the javascript code for html mouse over zoom effect . ( For exampel clip.jpg image was in left side the same clip.jpg image should be in right side ,The right side should be in zoom( ) effect if i keep mouse on left side of clip.jpg )



written by dangot , November 01, 2008

Hi: How can I have the fotoalbun to change when the people click over the picture they choose to see larger?

How can I do for showing that picture with a short explainig text?

Thanks.
written by http://freetriptojapan.blogspot.com , November 06, 2008

nice but you should to put examples here, so we can see how it works..
written by Bogs , November 25, 2008

Hi. Is it possible for the images to contain links to other pages on the site?
Thanks
written by boja , November 26, 2008

hi,
nice work!
how to modify this to stop changing loop when mouse out?(need only to change(auto) images only on mouse over)

any ideas?

thanks,

Do you need more help? Ask now!
 

busy
Last Updated ( Sunday, 22 April 2007 )