In this article, I explain how to code a slide show 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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Code for Slide Show with Different Size Images

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;
}

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268