Image Slideshow

Main >> Tutorials >> HTML >> Image Slideshow

Image slideshows looks really cool. And it is very easy to do. Here's an example on how the code works:

Step 1: Start by copy the code under and paste it on the page you want to have the slideshow.
<script type='text/javascript'> // set slideshow speed in seconds var speed = 2; // set transition duration in seconds (only for ie 5.5+) var duration = 1; // set transition effect (only for ie 5.5+) var transition = 'progid:DXImageTransform.Microsoft.Fade(Duration='+duration+')'; set=setTimeout; var images = new Array(); // url to your images images[0] = 'URLHERE'; images[1] = 'URLHERE'; images[2] = 'URLHERE'; images[3] = 'URLHERE'; // do not edit anything below this line var preload = new Image(); for (var i = 0; i < images.length; i++) { preload[i] = new Image(); preload[i].src = images[i]; } document.write('<img src='+preload[0].src+' name="slideShow">'); var j = 0; function run() { if (document.all) { document.images.slideShow.style.filter=transition; document.images.slideShow.filters[0].Apply(); } document.images.slideShow.src = preload[j++].src; if (document.all) { document.images.slideShow.filters[0].Play(); } if (j == images.length) { j = 0; } set('run()', speed * 1000); } </script> <body onload='run()'>

Step 2: Now you have to find the URL of the pictures you want to have in the slideshow. Paste the URL where it says URLHERE. There are four places you can paste the URL adresses to the pictures.

Step 3: If you want more pictures in the slideshow just copy the last part: images[3] = 'URLHERE';. But change the number to 4, and so on if you want more.

Copyright (C) 2007-2008 vejc-design.com. All rights reserved.
WP | ONE | GA | PB | CC

Advertising

Want to be here?

Top Affiliates

Jessica Jabed

Fatima Vicky

Gunnstein Kristin

Anna Jack

Lise Tori

MORE?

the owner

Vibeke. 20 years old. February 23. Norway. Asker. green eyes. brown hair. soccer player.
Loves: Jan Christopher. kebab. friends. Dolly+Ferdinand. Kumsen. money. pizza. snowboard. my green car. surprises. candy. coca cola. LOST. Prison Break. Ugly Betty. sun. Nickelback.
Hates: arrogant/fake people. school. toes. rain. stealers/copiers. homework. teachers.

MORE?

Calendar

October 2008

M T W T F S S

« Sep

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29 30 31

Domain

Owner: Vibeke
Host: one
Site name: vejc-design.com
Online since: 4. October '07
Hits:
Online: Online
Last updated: 7. October '08

MORE?

Layout

Layout up since October 1. It was made by Vibeke in Paint Shop Pro 9. Featuring Vibeke & Jan Christopher. Fonts used: Ambrosia. Texture from here.

link me

MORE?

Updates

October 7

1 coded layout
Changed "the owner" section

October 6

Layout challenge #5

11 PNGs

October 5

1 tutorial

7 textures

Ad challenge starts

9 PNGs

October 2

8 PNGs

Ads

Ad challenge

This list does not show the top referers, it only shows the last hits I have received. I will keep it a secret who wins untill October 26. Good luck everyone:)