|
Slide Show with Different Size Images
By Stephen Bucaro
An important requirement for a webpage slide show is that it be able to display different
size images without your webpage expanding and shrinking. The easiest way to prevent
your webpage from expanding and shrinking as different slides are displayed is to make
all your images the same size. But what if you need to display images with different sizes?
In a previous article about how to code a slide show, in order to simplify the code,
I left out the part about how to display images of different sizes. It's not difficult,
but it does more than double the amount of code, and the code that it adds contains lots
of nasty single and double quotes and if you get one wrong it don't work.
In this article, I'll explain how to code a slide show with linked slides (in other words,
the user can click on a slide to go to a webpage containing information about that image),
that can display different size images without growing and shrinking your web page.
I'll explain it in detail so that you can understand and feel comfortable using the code,
then you can cut and paste the code into your webpage and modify it for your purposes.
Shown below is the html code to paste into the <body> section of your webpage.
This code creates a div with id="show" which will display the slides.
This div is nested inside another div with id="container" which
also contains the buttons that let the user control the slide show.
<div id="container">
<div id="show"></div>
<p align="center"><input type="button" value="Stop" onclick="stopShow()">
<input type="button" value="Prev" onclick="prevSlide()">
<input type="button" value="Next" onclick="nextSlide()">
<input type="button" value="Start" onclick="runShow()"></p>
</div>
Shown below is the style code for the divs, to paste into the <head> section
of your webpage. Note that the style rules for the show div set the background
color to light blue using hexadecimal notation. They also set the style for the border
and they set the width of the div to the width of the image with the largest width,
and set the height of the div to the height of the image with the largest height.
<style type="text/css">
#container
{
width:400px;
display:inline;
}
#show
{
background-color:#8080ff;
border-style:solid;
border-width:1px;
width:400px;
height:400px;
}
</style>
The style rules for the container div set its width to the same width
as the show div, and set the display property to inline. This
allows the slide show element to flow into place on your webpage along with the text and
other inline elements. If you want to locate the slide show element at a specific
position on your webpage, set the the style rules for the container div as
shown below, changing the values for top and left to your chosen location.
#container
{
position:absolute;
left:100px;
top:100px;
width:400px;
}
| 
Free Downloads
RSS Feed