Welcome to AjaxDaddy.com
A large collection of nifty web 2.0 demos
Home
Demos
Send me a message
Ajax Books
Next
Prev
Image Gallery
Read more and download "Image Gallery"
This is an image gallery that automatically scales down other images on the page when you click one, ensuring that only one is maximized at a time
Visit PhpDaddy.com
Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.
<html> <head> <base href="http://www.ajaxdaddy.com/web20/gallery-zoom/"> <style type="text/css"> body {color: white;background: #52616F;} a { color: white; } </style><title>Live Thumbnail Demo</title> <link href="css/gallery-zoom.css" rel="stylesheet" type="text/css"/> </head><body> <center> <h1>Image gallery</h1> <p class="images"> <a href="http://diverged.org/thumbnail/koning/image1.jpg" class="livethumbnail"><img src="images/image1-small.jpg" largewidth="480" largeheight="360" height="120" width="160"></a> <a href="http://diverged.org/thumbnail/koning/image2.jpg" class="livethumbnail"><img src="images/image2-small.jpg" largewidth="360" largeheight="480" height="160" width="120"></a> <a href="http://diverged.org/thumbnail/koning/image3.jpg" class="livethumbnail"><img src="images/image3-small.jpg" largewidth="480" largeheight="360" height="120" width="160"></a> </p> <p class="footer"> This footer slides downward to accomodate the pictures as they grow and shrink. Kind of nifty, eh? </p> </center> <script type="text/javascript" src="javascript/gallery-zoom.js"></script> </body></html>
Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.
Comment on this example
Name
Url
Comment
Captcha
1
Oaki
2007-09-11 02:14:22
exactly, not useful
2
Piccolosocrate
2007-06-28 18:18:13
not useful as smooth gallery demo!
