ThumbView
ThumbView is a effortless way of viewing images on a web page. Requiring minimal keystrokes, mouse clicks and mouse movements. It is quick and easy to add to your web page.
How does it work?
See for yourself. Click on the images below:
Your page before ThumbView:
Your page using ThumbView:
I want ThumbView on my website!
Sure, to have ThumbView on your own page all you need to do is:
- Copy the ThumbView files onto your web server.
-
Add the following line of code between the <head> and </head> tags of your HTML:
<head>
...
<style type="text/css"> @import url(/thumbView/thumbView.css); </style>
...
</head> -
Add the following line to the bottom of your HTML close to the </body> tag:
<script type="text/javascript" language="javascript" src="/thumbView/thumbView.js"> </script>
</body> - Mark your thumbnail hyperlinks by setting the class or id attribute to:
- thumbView_img for image HREFs and
- thumbView_link for HTML HREFs, which will load in an IFrame,
<a class="thumbView_img" href="image.jpg"> <img ... /> </a>
...
<a class="thumbView_iframe" href="page.html"> <img ... /> </a>
- You can also optionally add captions to your image by adding a title attribute to your hyperlinks:
- Hey presto the next time you reload your page ThumbView will be up and running.
The colours and images of ThumbView are easily customised to fit your site using the CSS style sheet mentioned in step 2 above.
Download ThumbView now
If you like the usability improvement that ThumbView adds to your website, you are most welcome to make me a donation.
Anyone who makes a donation of £5 (€7, $10) or more will be sent the extended version of ThumbView which includes the Next, Previous and Slide Show buttons shown in the demo above.
Frequently Asked Questions
I want to change the ThumbView background colour?
No problem at all. The colours, sizes and images used in ThumbView are configurable in the 'thumbView.css' file.
- Simply edit the '.thumbView_overlay' rule:
.thumbView_overlay {
z-index: 10;
background-color: #ccffcc;
opacity: 0.80;
filter: alpha(opacity=80);
}
- You can even add a background texture by adding a 'background: url("myTexture.gif") center repeat;' line to this rule;
How can I create thumbnails to use with ThumbView?
"Image Resizer" from Microsoft PowerToys is a quick and easy Windows XP plugin for resizing images:
- Download and install "Image Resizer" from Microsoft PowerToys.
- Make a new folder naming it e.g.: 'thumbnails'.
- Place a copy of your images into this folder. (If you're using drag and drop, hold down SHIFT when you drop or you will move the files rather than copy.)
- Select all these copied images and then right click on the selection.
- Choose 'Resize Pictures'. The 'Resize Pictures' dialog will pop up.
- Click 'Advanced >>' button.
- Select: 'Custom' size and enter '150' by '150' or '100' by '100' or a size in this region.
- Tick: 'Resize the original pictures (don't create copies)'.
- Confirm that you are really doing this on the copies in your new 'thumbnails' folder.
- Click 'Ok' and away she goes.
- Now edit your HTML files to include your thumbnails similar to this code:
<a class="thumbView_img" href="images/myPicture.jpg" title="My Caption">
<img src="images/thubnails/myPicture.jpg" />
</a>