In earlier posts we’ve seen how to create slideshow of GIF images, and then a more sophisticated version with horizontal accordion JavaScript (more variations of it to come in future).
There is however an easy way of creating a slide show using iframe tag.
An <iframe> tag is an inline frame that contains another document.
In fact the demonstration of the slideshow below is done using iframe tag.
In this case the document contained within the iframe tag is the URL of the page where the slideshow actually resides.
The code that fetches the slideshow URL in this page is simple, and as given below:
<iframe marginheight=0 marginwidth=0 width="435" height="435" scrolling="no" frameborder="0" src="http://www.2webvideo.com/video-production/demo/iframe-slideshow/iframe-slideshow.html"></iframe>
iFrame For Slideshow
It may not be usually necessary to give a name to the iframe, but the ‘name’ attribute becomes handy while creating the slideshow. We will also use 2 more iframe attributes – marginheight and marginwidth – other than the usual ones like width, height, frameborder, scrolling, and of course the source, ‘src’.
The key to the slideshow is ‘naming the iframe’ as ‘slideshow’, and then making the thumbnails as hyperlinks that target ‘slideshow’ while opening respective images.
The html code is easy to understand. It’s given below. Remember that for each image you need to have 2 sizes, the thumbnail, and the large one.
<html><head>
<title>Create Slideshow With iFrame Tag</title>
</head>
<body style="padding:5px;margin:0;background:#A8D672;">
<table style="border:1px dashed #020;" border=0 cellpadding=5 cellspacing=5 width=415>
<tr>
<td align=center valign=top>
<iframe marginheight=0 marginwidth=0 name="slideshow" src="1-big.jpg"
width="400" height="300"
scrolling="no"
frameborder="no"
style="padding:1px; border:1px solid #425E20;">
</iframe>
</td>
</tr><tr>
<td align=center valign=middle>
<a href="1-big.jpg" title="Image 1" target="slideshow"><img style="margin:0 12px 0 0;" border=0 src="1-small.jpg" /></a><a href="2-big.jpg" title="Image 2" target="slideshow"><img style="margin:0 13px 0 0;" border=0 src="2-small.jpg" /></a><a href="4-big.jpg" title="Image 4" target="slideshow"><img style="margin:0 12px 0 0;" border=0 src="4-small.jpg" /></a><a href="5-big.jpg" title="Image 5" target="slideshow"><img style="margin:0 13px 0 0;" border=0 src="5-small.jpg" /></a><a href="6-big.jpg" title="Image 6" target="slideshow"><img border=0 src="6-small.jpg" /></a>
</td>
</tr><tr>
<td align=center valign=middle>
<span style="font:normal 16px verdana; color:#020; letter-spacing:1px;">
<< Click thumbnails to view the slideshow >></span>
</td>
</tr></table>
</body>
</html> This article of August 20th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
