Pin Me

Creating a Photo Slide Show in HTML

written by: Profacgillies•edited by: Michele McDonough•updated: 2/6/2010

Do you want to know how to make a photo slide show in HTML without using Flash or any fancy tools or technologies? This article shows one approach built around the CSS overflow property.

  • slide 1 of 3

    How to Make A Photo Slide Show in HTML Without Using Javascript, Flash or Other Tools

    There are lots of tools and applications – some free, some paid – which create photo side shows or photo galleries. Elsewhere I have shown how to create a photo gallery which uses the visible css property to provide a degree of animation and how to use use a low-cost application. Here, I will describe an approach that produces a slide show using only basic HTML and very simple CSS.

  • slide 2 of 3

    Using the CSS Overflow Property

    My earliest memory of photographic slides was my father's slide projector which operated on the simple principle that you fed a single slide in from the left and drew it across behind the lens and then pulled it out on the other side.

    This first solution uses the CSS overflow property to achieve a similar result in HTML.

    The slide show looks like this:

    Slide show 

    The html to create this page is shown below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

    <title>How to Make A Photo Slide Show in HTML</title>

    <meta name="created" content="Tue, 02 Feb 2010 17:39:27 GMT" />

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <meta name="description" content="" />

    <meta name="keywords" content="" />

    </head>

    <body bgcolor="blue">

    <div style="overflow:auto;width:1000px;height:680px;">

    <h1 style="color:white;font-family:Cambria, serif;font-size:18px;">A Photo Slide Show in HTML </h1>

    <table width="7500 height="600 border="1" bordercolor="gray" bgcolor="white">

    <tr height="600" valign="middle">

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art1.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art2.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art3.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art4.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art5.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art6.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art7.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art8.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art9.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    <td width="750" align="center" valign="middle">

    <img src="../../Pictures/prague/art10.jpg" style="color:white;" width="640" height="480" alt="Prague image" title="" border="10" align="middle" /></td>

    </tr>

    </table>

    </div>

    </body>

    </html>

    I have left the CSS information as inline tags to make them explicit. You should be able to copy and paste this HTML into a text file and view it with your browser, although you will need to find your own images!

    The key elements are:

    1. The <div>….</div> tags act as a container. The width is set to 1000 pixels. The overflow property means that the contents will scroll, allowing each picture to be seen by using the scroll bar.
    2. The overwide table is set to a width of 7500 pixels, or 10 times the cell width of 750 pixels.
    3. Within each cell, a picture is centered vertically and horizontally, each 750 x 600 cell contains an image at 640 x 480 pixels.
  • slide 3 of 3

    Possible refinements

    You can set the widths to match your image size and the table width to match the number of images you wish to see.

    You can set the background to a color of your choice or a texture if preferred.

    In a live site, I would move the CSS information into an external style sheet. This way, you could create a series of pages all linked to a contents page.