<p><a href="http://img184.imageshack.us/img184/1159/castleyi6.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a></p>
<p><a href="http://img201.imageshack.us/img201/6923/countryxb6.gif"" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" /></a></p>
Show pictures in the form of slidshow in your blog or website with automatic and manual. That certainly it can be played and also stopped by the user! Simple control and display a photo gallery with rotating displays memudar the first, with navigation controls that appear when mouse tumbled Gallery. Let us see the script's set of features:
- Displays images either as an automatic or manual slideshow, with the image faded into view over the previous. A Navigational Panel slides up when the mouse rolls over the gallery to play, pause, or step through to a specific image within the gallery.
- In automatic mode, set the number of cycles before the script stops rotating.
- Each slide consists of an image that can be hyperlinked.
- Each slide can have a description associated with it. When defined, a Description Panel slides down from the top of the gallery showing the description.
- The gallery supports persistence of the last viewed image via session cookies, so going away then coming back to the gallery calls up the last viewed image within a browser session.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAby0IgcHR4RvDM9jbIqh37cV6fsxVOq1HNJBaADVPgER2WzTR6FqMps8O8s40nZDdEtQb1Z6JrZDY-J9OKT8Ix2RmtIv8Sl0J2wD6ZfwAKOHmdsL0yLKaqY-hFbKufdO8ZZodZEsWqY/s912/slide.jpg"" rel="thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAby0IgcHR4RvDM9jbIqh37cV6fsxVOq1HNJBaADVPgER2WzTR6FqMps8O8s40nZDdEtQb1Z6JrZDY-J9OKT8Ix2RmtIv8Sl0J2wD6ZfwAKOHmdsL0yLKaqY-hFbKufdO8ZZodZEsWqY/s912/slide.jpg" style="width: 400px; height: 120px" /></a>
/***********************************************
* Image Thumbnail Viewer Script code
***********************************************/
<p><a href="http://img184.imageshack.us/img184/1159/castleyi6.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAby0IgcHR4RvDM9jbIqh37cV6fsxVOq1HNJBaADVPgER2WzTR6FqMps8O8s40nZDdEtQb1Z6JrZDY-J9OKT8Ix2RmtIv8Sl0J2wD6ZfwAKOHmdsL0yLKaqY-hFbKufdO8ZZodZEsWqY/s912/slide.jpg"" rel="thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAby0IgcHR4RvDM9jbIqh37cV6fsxVOq1HNJBaADVPgER2WzTR6FqMps8O8s40nZDdEtQb1Z6JrZDY-J9OKT8Ix2RmtIv8Sl0J2wD6ZfwAKOHmdsL0yLKaqY-hFbKufdO8ZZodZEsWqY/s912/slide.jpg" style="width: 400px; height: 120px" /></a></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAby0IgcHR4RvDM9jbIqh37cV6fsxVOq1HNJBaADVPgER2WzTR6FqMps8O8s40nZDdEtQb1Z6JrZDY-J9OKT8Ix2RmtIv8Sl0J2wD6ZfwAKOHmdsL0yLKaqY-hFbKufdO8ZZodZEsWqY/s912/slide.jpg"" rel="test image ini"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAby0IgcHR4RvDM9jbIqh37cV6fsxVOq1HNJBaADVPgER2WzTR6FqMps8O8s40nZDdEtQb1Z6JrZDY-J9OKT8Ix2RmtIv8Sl0J2wD6ZfwAKOHmdsL0yLKaqY-hFbKufdO8ZZodZEsWqY/s912/slide.jpg" style="width: 50px; height: 50px" /></a></p>
/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive
***********************************************/
<p><a href="http://img184.imageshack.us/img184/1159/castleyi6.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a></p>
<p><a href="http://img201.imageshack.us/img201/6923/countryxb6.gif"" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" /></a></p>
Author:
Image Thumbnail Viewer is a compact, unobtrusive image viewer that can be applied to any link on the page to load the desired image inside a sleek interface based on the link's "href" value. Simply give the link in question- be it a text link or image thumbnail link- a rel attribute of "thumbnail", and you're done.
This script will center the enlarged image on the page and optionally display a text description based on the activating link's "title" attribute. A fading effect can be turned on/off to bring the final image into view.
Demos:
Beautiful baby
Step 1: Add the following to the <head> section of your page:
<link rel="stylesheet" href="http://sites.google.com/site/warehackproject/thumbnailviewer.css" type="text/css" />
<script src="http://sites.google.com/site/warehackproject/thumbnailviewer.js" type="text/javascript"></script>
Step 2: Add the below sample HTML to your page, which shows setting up the script on a regular link and a thumbnail image link:
<p><a href="PASTE YOUR IMAGE LINK HERE" rel="thumbnail" title="YOUR DESCRIPTION">YOUR IMAGE TITLE</a></p>
<p><a href="PASTE YOUR IMAGE LINK HERE"" rel="thumbnail"><img src="PASTE YOUR IMAGE LINK HERE" style="width: 50px; height: 50px" /></a></p>
That's it for installation!
As mentioned in the intro, to use this script, just give the link on the page a rel="thumbnail" declaration, with the "href" pointing to the URL to the enlarged image. If the link contains a "title" attribute, its value will be used as the image's description:
<a href="castle.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a>
Now go show off your images!
ware hack project department
Subscribe to:
Posts (Atom)