Slideshow

Project:
Create a slide show of images and present them on a web page with a slideshow format.

Slideshow

Collect your images in a separate folder like slideshow in your web:images folder.
They should be in one of these formats:
.png, .jpg or .gif

To save an image as a png when in Photoshop press +OPTION+SHIFT+S.

Save each image in a sequence:
img1.png, img2.png,img3.png,...
or
img1.jpg, img2.jpg,img3.jpg,...

If you are dragging them into your folder, you can change the name (DON'T change the extension) by clicking once to select the image and another click to select the name in the Finder window:
Create a new XHTML document. Open BBEdit and then press +CTRL+N.
- Make sure XHTML 1.0 Strict is selected
- Give your document a title (This is what appears on the top of your browser).
- Press OK
Save the document in your web folder as slideshow.html.

This is what you should see:

1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Your Title</title>
    <meta  name="generator" content="BBEdit 7.0.4" />
</head>
<body>
	
</body>
</html>

To change the background color of your page, open web safe colors from
window>palettes>web safe colors,
go to line 9 and replace <body> with:
```
<body style="background-color:______;">
```
Replace the underline with a color:
- Double-click on the underline
- Click on a color from the color palette
- Remove the quotation marks surrounding just the hex value of the color.
  Change this:
```
<body style="background-color:"#FF0033";">
```
  To this:
```
<body style="background-color:#FF0033;">
```
To get the Javascript to run when you load the document add the following to your <body> tag:
```
<body style="background-color:______;" onload="doIt();" >
```

Between the <body></body> tags add a pair of <div></div> tags

<div>
    <p style="text-align:center;">

    </p>
</div>

You want to place the first image inside the <p></p> tags. Click inside them and press +CTRL+I. Navigate to your images folder and select the first image. Remove the width and height name-value pairs.
Put your cursor inside the img tag:
Add the following to the tag:
```
id="image"
```
This line will allow you to address the image in Javascript.
Navigate to the <head></head> section (lines 4-8 in my document)
Add a Javascript declaration:
```
<script type="text/javascript">
    //
</script>
```
The second line of the declaration comments out the script. If you do not include these comments when your browser validates the document, it may see the script as invalid XHTML code.

Inside the javascript declaration add:

var count = 0;

//change this to how many images you want to loop over
var total=how_many_images;
var timerId;

      images = new Array();
      for(var i=0;i<total;i++){
      images[i] = new Image();
      
      //change  this to the proper folder and extension
      images[i].src = "images/folder/img"+(i+1)+".png_or_jpg";
      }
 
 
var d=document;
function next(){
  if( count < images.length - 1){
   count ++;
   }else{
   count= 0;

   }

  d.getElementById("image").src = images[count].src;
  fadeIn("image",0);
 doIt();
}

function fadeIn(objId,opacity){
  if (d.getElementById && opacity <= 100) {
    setOpacity(d.getElementById(objId),opacity);
    opacity += 10;
    window.setTimeout("fadeIn('" + objId + "'," + opacity + ")",50);
  }
}

function setOpacity(obj,opacity){
  opacity = (opacity == 100) ? 99.999 : opacity;

  obj.style.filter = "alpha(opacity:" + opacity + ")";
  obj.style.KHTMLOpacity = opacity/100;
  obj.style.MozOpacity = opacity/100;
  obj.style.opacity = opacity/100;
}
 function doIt(){
 
 //this is where you control time
    timerId = setTimeout("next()",5000);
 
}

How can you ever get board when you have a computer to play with?

/ /RESOURCES

Project: Create a slide show of images and present them on a web page with a slideshow format.

Slideshow

Project:
Create a slide show of images and present them on a web page with a slideshow format.