I am posting a script which has an interesting image gallery with good effect.
To veiw the image click on the thumbnail, it shows up and when you click back it goes back to its position.
The interesting thing about this gallery is that you can drap the zoomed pictures to any where in your web page and you view the other pcitures at the same time.
The loding time is good. Hope you guys will like it.
copy the below code and paste it in the notepad and save it as gallery.html
download this file gallery.jswww.arun.orgfree.com/gallery.js
i have zipped 4 images if you would like to download do so,
or you can also have you own images by titles 1,2,3 and 4. put everthing in one folder and enjoy the cool gallerywww.arun.orgfree.com/images.zip
To veiw the image click on the thumbnail, it shows up and when you click back it goes back to its position.
The interesting thing about this gallery is that you can drap the zoomed pictures to any where in your web page and you view the other pcitures at the same time.
The loding time is good. Hope you guys will like it.
copy the below code and paste it in the notepad and save it as gallery.html
| Code: |
| <script type="text/javascript" src="gallery.js"></script>
<script type="text/javascript"> hs.graphicsDir = ''; hs.outlineType = null; window.onload = function() { hs.preloadImages(); } </script> <style type="text/css"> * { font-family: Verdana, Helvetica; font-size: 10pt; } body { background-color: #f4f4f4; } .highslide { outline: none; } .highslide img { border: 0px solid gray; } .highslide:hover img { border: 1px solid white; } .highslide-image { border: 2px solid white; } .highslide-image-blur { } .highslide-caption { display: none; border: 2px solid white; border-top: none; font-family: Verdana, Helvetica; font-size: 10pt; padding: 5px; background-color: white; } .highslide-loading { display: block; color: white; font-style: 'MS Sans Serif'; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 3px; border-top: 1px solid white; border-bottom: 1px solid white; background-color: black; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-display-block { display: block; } .highslide-display-none { display: none; } </style> </head> <body> <div> <!-- 4) This is how you mark up the thumbnail image with an anchor tag around it. The anchor's href attribute defines the URL of the full-size image. --> <a id="thumb1" href="1.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"> <img src="1.jpg" alt="pic1" title="Click to enlarge" height="90" width="120" /></a> <a id="thumb1" href="2.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption2'})"> <img src="2.jpg" alt="pic2" title="Click to enlarge" height="90" width="120" /></a> <a id="thumb1" href="3.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption3'})"> <img src="3.jpg" alt="pic3" title="Click to enlarge" height="90" width="120" /></a> <a id="thumb1" href="4.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption4'})"> <img src="4.jpg" alt="pic4" title="Click to enlarge" height="90" width="120" /></a> <!-- 5 (optional). This is how you mark up the caption. The id contains is referenced to in the second argument of hs.expand above. --> <div class='highslide-caption' id='caption1'> pic 1</div> <div class='highslide-caption' id='caption2'> pic2</div> <div class='highslide-caption' id='caption3'> pic 3</div> <div class='highslide-caption' id='caption4'> pic 4</div> </div> |
download this file gallery.jswww.arun.orgfree.com/gallery.js
i have zipped 4 images if you would like to download do so,
or you can also have you own images by titles 1,2,3 and 4. put everthing in one folder and enjoy the cool gallerywww.arun.orgfree.com/images.zip
