| OR |
« Creating Product Catalog With jQuery Zoom-In | An All-Purpose Free Versatile Photo Gallery You’ll Love »
|
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 below 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. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
Hello
I am web designer part time and reciently went back to the Art institute online for my assoc. in web design. I reciently have been doing a project needing a picture gallery. I fell apone your blog and found it very usefull. I have a website that is very narrow. do you have a picture galley design or tips to chage the gallery to post the small pictures on the left and right? Any help would be appreciated.
Joel K
Thanks Joel. For more articles and tips on creating picture galleries, just search the blog for the term ‘gallery’. I’ve at least 7 articles on the topic. Best.
Joel,
Do I need to have an image folder as well to get a slideshow such as this on my Website or am I missining something here?.
Basicly I want to achieve what you have above, what do I need in the way of files/folders as I will be using approx 20 to 30 images in the slideshow.
@Chris,
It matters less as to whether you’ve an image folder as long as the path to the image file is mentioned rightly in the URL. Yes, you can have 20 to 30 images for the slideshow. Please check out the HTML code given above.
Best.
Awesome.. With alittle CSS was able to tweak its presentation.. I had to expand the frame to set a slide scroll of 10 but the “slideshow” frame image was stuck in at the left, tried CSS to get it centered within the box but could not.. Have any suggestions?
Good Day. Is there a code which makes the photos slide automatically?
@Jesutimi,
Check out my article on versatile photo gallery:
http://www.2webvideo.com/video-production/all-purpose-free-photo-gallery
Thank you so much for posting this useful code and share with us. It works perfectly.
Quick question here , do you have HTML code that the thumbnails picture is on right side instead of on the bottom.
Again, thanks for sharing this code with us
@Ellen, in the html code above change the table structure to display the thumbnails on the right..
Cheers!
Thank you sooo much !
Another question here is the website that I use does not allow iframe code. Do you have this code in html code? Again, thank you sooooo much for your help.
Partha, again, THANK YOU SOOOOOO much. It works now.
Last question, not sure if you can help to provide html code with thumbnails on the right as I am new on HTML code. Truly appreciate it.