Thumbnail Viewer plugin for WordPress is simply used to overlay images on a page, similar to Lightbox JS. The javascript is from the Image Thumbnail Viewer code from DynamicDrive. The javascript included in Thumbnail Viewer from DynamicDrive is much faster than Lightbox JS, although not as feature packed, which is the entire point.
Thumbnail Viewer works with the following image formats: png, gif, jpeg, jpg, bmp.
Current Version: 1.2
Download Thumbnail Viewer Plugin 1.2 (mirror)
Installation
- Extract thumbnail-viewer folder from downloaded file to wp-contents/plugins/.
- Go to Plugins section in WordPress dashboard and activate Thumbnail Viewer.
- That’s it!
- Now all you need to do is add rel=thumbnail to any link tag surrounding your thumbnail. You’ll do this when you’re editing a post or page, you can also use the quicktag button for auto-insertion goodness.
Please take a look at the FAQ before posting questions, your question is probably answered there. There’s also some screenshots for those interested, or you can just see the thing in action right here, just click one of the thumbnails below:
The effect you see above was created by this plugin by putting the following HTML in this page:
<a href="http://www.longren.org/images/corn.jpg" rel="thumbnail" title="Some Corn"><img src="http://www.longren.org/images/cornThumbnail.jpg" width="129" height="96" alt="Some Corn" /></a>
<a href="http://www.longren.org/images/crackerJacks.jpg" rel="thumbnail" title="Some Cracker Jacks!"><img src="http://www.longren.org/images/crackerJacksThumbnail.jpg" width="98" height="123" alt="Some Cracker Jacks" /></a>
<a href="http://www.longren.org/images/peas.jpg" rel="thumbnail" title="Some Peas In A Pod"><img src="http://www.longren.org/images/peasThumbnail.jpg" width="145" height="96" alt="Some Peas" /></a>
(30 votes, average: 4.57 out of 5) 
I have been trying to use this page on non wordpress platforms such as Joomla, Oscommerce or even Magento. It will be really good to see this on product pages of standard shopping cart websites. I have seen similar features on some other sites. Is it possible for someone to post a link to where we can get this feature as a standard PHP feature so it can be adapted to any platform.
See this link:
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
Is there an issue with this in Chrome? I thought it was just my site but then I tried popping up the pictures at the top of this article and it seems sometimes they load in chrome and sometimes it hangs and says “Loading Image.” Works great in firefox, ie, safari and opera.
No issues with Chrome that I know of. It works OK for me in Chrome, on Linux and Windows.
Sorry wrong URL before-
This plugin is great and we have used it rather than lightbox in many projects. However like a previous poster we think that it still employs the same simplicity that lightbox does!
Great work..!
This plugin is great and we have used it rather than lightbox in many projects. However like a previous poster we think that it still employs the same simplicity that lightbox does!
Great work..!
cheers, great little plugin
I will try this plugin on my site, thanks dude for this plugin
sorry it is a wordpress plugin, nice one ,
i used this in my web design site, looks not to bad, you should create this as a wordpress plugin , tho there is all ready a few out there ,
Thanks for this plug-in! It’s really great!
still using it today, fast and still a very good plugin. I’m a big fan of display and interaction sites! Thanks again!
well nice but problem to me
when i click did not show comlete image link url is here
http://jinahe.com/times/?p=49
Strange, but I don’t have such problem
Thanks for this nice plugin..
this is a great plugin thanks. Does anyone know where I ca find good bbpress plugins ?
Really nice,thanks.
hi master, i have a problem on this plugin. All my images link which host on imagewaste not on my hosting can not open, “loading image” then didn’t direct to imagewaste… And other images put on my hosting work well. May i know how to fix it?
Really nice plugin.
This is a great plug in – Thanks
@Martin: I use WP 2.8.4 and Thumbnail Viewer 1.2 for quite a while and it works fine; never had a problem. It must have to do with something else in your blog (set up). Did you try to deactivate all other plugins you use to check if this plugin still doesn’t work?
@missycola: Thank you for the reply.
I just tried disabling all other plugins, but it still won’t work. It seems I’m also having problems with the ‘Share This’ plugin.
Guess the only plugin that is working is ‘Recent Posts’ really.
Here’s a link to my blog if it’s of interest:
http://www.viitanen.se/wordpress/
(work in progress)
I can’t get this plugin to work.
I have tried installing Thumbnail Viewer (1.2) and Lightbox 2 both locally and on my server, running the lastest Wordpress (2.8.4).
I’m new to Wordpress but all other plugins are working fine, I don’t understand why it won’t work.
I followed the instructions carefully and even copied the code on this site to be fail-proof, but it’s still just linking to my image normally.
Thanks for this plugin
A great little plugin and easier to setup than Lightbox. The use of rel=”thumbnail” makes it very similar to Lightbox in how it works.
Please let me know how can i add buysell ads or google ads to the image thumbnail window
Thanks for good plugin. it’s very useful!
Perfect plugin!
It doesn’t work on WP 2.7.1, but 2.7.0
Works OK for me on 2.7.1, except I did notice the quicktag button is no longer there in WordPress 2.7.
You can still use the plugin though by adding rel=thumbnail to any anchor tag (link tag) that encloses an image.
thank you very muchh
i’ve yet to test this but this is what i wanted…
i tested the demo on this site, it’s fast and cool!
question that’s really got me here. I hope this is also the *most* cross-browser compatible. it would be cool if you could add a list of browsers you’ve tested on.
Thank you so much!
i have a little problem with this plugin.
when the image is at the same high that the chat, then the chat appear over image hidding part of this
how can i fix that, thanks
great plugin
Thanks,
I’ve been searching for something like this for a while. Here’s hoping this really cool plugin will be easy to install without too much trouble.
Thank you very much!
ikea
Your site does not correctly work in safari browser
exciting and communicative, but would be suffering with something more on this topic?
Thanks
can this plugin apply for blogspot??
Very Slick – Nice Plugin!
Cheers
very cool job, thanks team! very useful plugin!
FYI, the latest version of Thumbnail Viewer, 1.2, does work with WordPress 2.7.
Tyler, this plugin used to work under Wordpress 2.6, but I can’t get it to work for any new posts under 2.7. Previous posts still work, which is curious. Do you have any thoughts on this? I think the plugin is great — hate to lose it.
sorry, forget my last post, it is working
The first two pictures have the overlay effect like they are supposed to, but the next 11 pictures beneath them havent??
Why are the first 2 working and the others not?
#Only the vertical pictures, the horizontal ones aren’t linked.
I’ve got the plugin working but the problem I now have is that it won’t overlay my embedded videos… the videos stay on top of the picture… how do I fix this?
Thanx
Hello,
The plugin does not work for my site. I’ve add the tag thumbnail as you can see in the code:
Why ?
Tyler, any luck figuring out why the “rel=thumbnail” gets added automatically before all thumbnails on at least two of my WordPress 2.5 installations? Here’s an example: http://solari-home.com/wp/. The author would not even know HOW to add the rel=thumbnail statement, yet your thumbnail plugin “just works”. Unfortunately, this behavior is NOT what I want for my other blogs.
Thanks for an otherwise very nice plugin!
Great tool easy quick love it.
Great plugin so far…however, my only question is this: How do I move the viewer more towards the center of the page. As it stands, I have a flash video slightly above the photo area, but I doubt that would be the cause (although, with WP, anything is possible).
Absolute URL to this problem is: http://centralusadistributors.com/?page_id=24
Also, plugin tested and working on: FF3, IE7, IE8, Safari, Opera, and Chrome. Works fine in all.
Thanks for the plugin. Love the look of it.
but… how do I get the thumbnail to size in proportion to my image? thx
Excellent plugin. Thank you so much. I have used it here in my post iSimplyBlog.com
http://www.knowtebook.com says thank you for the nice tool and has linked you.
thanks
This used to work for me but doesn’t now. When I upload a pic it comes up black. If I don’t select thumb view but regular size the pic appears but has a rainbow effect.
http://www.katiebuglove.com/ex1.jpg
http://www.katiebuglove.com/ex2.jpg
Posts prior to this week are fine. My latest post had to be manually installed with “rel=thumnail”–what’s going on?
Great plugin, have been used for long time. Would it be possible to develop it in a way that one can upload multiple pictures? Also, it would be nice if it were able to memorize the settings (thumbnail size etc.).
Thanks!
Thanks, this is a cool plugin. I’ve been looking for a decent wordpress image viewer. Personally I’m undecided between this and lightbox.js. But still its good to have the choice.
Sam
Has anyone been able to include a web link under a photo where the comment/caption would be? I’d like to have a link under a large pic that would take the surfer to another site.
hi. Thanks for plugin
perfect…
Very nice. Thanks.
In fact, I like the plugin so much that I want to reverse it so all pictures to be open up in viewer except rel=”nothumbnail” is detected. However I am no programmer so I can’t get it to work. Any help?
baron, it is compatible with WordPress 2.5, although some times the quicktag button is missing when authoring a page or post.
hi there.com plugin but :
Does anybody know if tis script is compatible with Wordpress 2.5?
Thanks in advance for any help on this!
Hey that’s cool plugin, thanks.
Nice plugin….thanx!
I can’t figure out how to use this plugin when setting up a gallery in 2.5
A single pic is no problem using rel=”thumbnail” , but when i set in [gallery] there is no action at all. Help :)
Great plugin! Works great when using single images. But how do i integrate this with the default Gallery mode of wordpress?
thanks for plugin, perfect
turkbaron
Thank you for this very useful plugin.
One little problem I noticed is when sending pages to print the “loadingImage” gif and text appeared where the header would be. The css file for my theme (a rejigged K2 release candidate 3) already contained display:none for the header in media print section. I added the following to the thumbnailviewer.css file:
@media print {
#thumbBox, #thumbBox .footerbar, #thumbBox #thumbImage, #thumbLoading, {display:none;}
}
This solved the problem with Firefox 2.0.0.12 but not Safari 3.0.4. Haven’t tested it on explorer yet as am on a Mac.
Ty :)
thanks
Even when I added – rel=”thumbnail” after the jpg URL, it still didn’t work.
I’m sure I’m missing the obvious.
I just wanted to write one more time to say that I’m really appreciating this plugin, it’s elegant and perfect. Thanks for your hard work. I’m donating today.
The button still does not show up consistently in code view, but I sort of don’t mind because it’s easier to past the code in, esp. when posting a lot of images that are the same size (see site)
Thanks again!
-Sean
Do we have to upload the pics in the own site space?
thanks. good works. super scripts
Adrienne Adams: That’s simply not true. It works in most gecko browsers. Specifically which gecko browser does it not work in?
Nice plugin, but it doesn’t work in Gecko browsers. You can’t close the popup window.
Too bad, nice try otherwise.
figured it out to add it to a page you must edit the header page and add the following lines inderneath the original styleshhet href.
make sure to switch the two http://www.your-domain.co.uk to your actual domain or it wont work.
how do i get this to work on a page rather than a post?
very very nice
thanks for this tool!
Plug-in a very nice.
Light and very cool!
Thanks.
wonderful Plug-in! The favorite.
Now, change the theme, the characters footer right justification.
CSS conflicts that do not think about it.
Sorry English is poor.
John H: Thanks for the feedback, I do appreciate it. I’m using Firefox 2.0.0.11 on Ubuntu Gutsy Gibbon 7.10 and it seems to be working somewhat. When I click on those thumbnails, the same thumbnail loads in the window this plugin creates.
Now, I have access to a Windows 2003 Server box with IE7 and Firefox 2.0.0.11 on it. I tested there and had no problems in IE7, large versions of the thumbnails show in the window when the thumbnails are clicked, as it should be. Firefox gave the same result as it did on the linux box I tested on here at home. I also tested Firefox and IE7 on a Windows XP machine and got the same results, IE7 works just fine but Firefox 2 displays thumbnails when it should show the full image. This is strange, I’ve not seen this happen anywhere else.
Could I perhaps talk you into setting up a temporary blog with a different theme and test there? Or would you be willing to just switch your current theme for a bit and see if the problem goes away?
Thanks again John H!
Joe: Sorry for the late reply, I somehow missed your comment. Just let me know if you’re still interested in getting this plugin working for you. I’ll see what I can do if you want.
hx for this plugin
Tyler:
Sorry for the belated response to your inquiry.
Please look at: http://www.dramaticsting.com/
The Thumbnail Viewer works with IE6, but not IE7 or Firefox 2.x for Windows (Vista and XP) or Linux. The former opens the image in a separate browser window. The latter opens the image in an external window, but not to the correct size.
To be honest I have’t spent much time testing this. Any suggestions would be appreciated.
Great work and very nice plugin :) I just started using this plugin on my Portfolio page, works sweetly :D
thanks so much for this great and easy to use tool!!!
This doesn’t work for me at all. Images stay full size,
http://video-game.review-it.info/?p=12&preview=true
what am I doing wrong?
This plugin works with Firefox, Internet Explorer, and probably every other web browser. I know for a fact it works in Firefox and IE.
Hi,
Nice plugin, thanks. This one does not work in Firefox, right?
olci: Yes, it works just fine with WordPress 2.3.
John H: Could you perhaps provide me with a sample or two? I have never seen this occur in Firefox, although it wouldn’t surprise me if it does happen in IE.
is this plugin for realease WP 2.3. ?
Note this plugin only works reliably with IE. The full size images are distorted in Firefox and Safari.
I am currently looking for a gallery management plugin for my new blog. Glad I bump into yours. I’ll seriously consider this plugin. Thanks!
how do you change the font colour of the caption?
Thanks..
[…] Açıklamalı 230 Wordpress eklentisi (Agu. 15, 2007) (Wordpress plugin list),[…]
Ryan: I’m not really sure. If there is a way, I’d love to hear about it, got any ideas?
Is there a way to have the thumbnail link to an object or maybe an iframe instead of just an image?
^^ sorry. no preview. looks like the code formatting is screwed in the post.
Here’s a link to a solution, then:
http://www.codingforums.com/showthread.php?t=76299
Nevermind! I figured it out. I wrapped the image in divs:
my imageAdd this javascript to the of your header.php file:
function setAllVisible() {
var allElems = document.getElementsByTagName('*');
for (var i = 0; i
And add this to your body tag, also in header.php
I’m sure you knew that, but thought it would be helpful to others….
Aaron,
This isn’t an issue with the Thumbnail Viewer. You’ll probably need to devise a way to pre-load the thumbnail before the page is drawn.
Hi Tyler–
It seems that if I click on a thumbnail before all the images are fully loaded the javascript isn’t called and it just goes directly to the image file.
Is there a way I can code it so the .js file is called first so this doesn’t happen? It’s not a huge deal, but I will be using a lot of thumbs per page and I imagine some people will start clicking as soon as a page pops up.
Thanks!
I’m having a problem getting this plugin to display full-size images in Firefox 1.x (for Linux.) The thumbnail library itself works fine so it’s something specific with the plugin. The image size is correct, but the output is not rendered at the correct dimensions.
Thanks, i like this very much :-)
I’m currently using WP 2.2.1. I have noticed some conflicting problems with some of these plugins in other areas so it’s possible that they may be also introducing problems which Thumbnail Viewer cannot handle. We shall see. Thanks again for your time.
Plugins:
Admin SSL 0.64 (Deactivated)
Akismet 2.0.2 (Deactivated)
All in One SEO Pack 1.2.3.6 (Active)
Angsuman’s Authenticated WordPress Plugin 1.0 (Active)
Bluetrait Event Viewer 1.1 (Active)
cforms II 5.3 (Deactivated)
Dean’s FCKEditor For Wordpress 2.2 (Deactivated)
Google Analyticator 1.54 (Active)
Hello Dolly 1.5 (Deactivated)
Search Everything 3.2.1 (Active)
Secure and Accessible PHP Contact Form v.2.0WP B20070414 (Active)
Thumbnail Viewer 1.2 (Active)
WordPress.com Stats 1.1.1 (Active)
WordPress Database Backup 2.1.2 (Active)
WP-Print 2.11 (Active)
WP-ServerInfo 1.00 (Active)
WP-SimpleViewer 1.0 (Active)
No Spam: I will try to take a look at those issues tonight, especially the quicktag button problem. Could you tell me which other plugins you’re using? It’s possible one of them is automatically placing the rel=”thumbnail”, but it’s hard for me to say right now.
Thanks!
I see the Thumbnail Viewer quicktag button now. Very interesting…it only shows up when I am creating new pages. It’s not present when editing my older pages. Reloading the page makes no difference.
Firstly, good plugin. Thanks for your effort.
Seeing a few problems here. I agree with Steve and other etc. from back in May. Something seems to be automatically inserting rel=”thumbnail” into links. Using the web browser function to view the page source I can clearly see the rel=”thumbnail” bit. However, viewing the same page with the WordPress editor (Code tab) shows no sign of rel=”thumbnail”. To workaround this problem I have to edit the page and use something like rel=”nothumbnail”. Using rel=”nothumbnail” allows those links to function normally. I know it’s silly but it does appear to work over here.
On a related issue…I don’t see the quicktag button anywhere…certainly not in the WordPress editor (Code tab).
Thanks again.
That’s really nice plugin!
It is very easy to me. I can install them without any trobule!
Thank you very much!
Maurice – are you using IE7?
I am , and am still experiencing the pop ups opening in an entirely new window or tab – is anyone else experiencing this?
Is there a reason this isn’t working on this site?
First, very awesome plugin! I love it. Second, when I add pictures to my website they are all nice and everything, plugin works perfect, but they are all close together and there is no spacing between pictures. Is there anyway to change the CSS so I can add a thick border around each picture? Thank you in advance!
Can I suggest that the quicktag for the plugin be also placed in the page where you edit your posts? I could not find the button in it and I thought my plugin wasn’t installed correctly :P
It does work with IE7 when the page is _completely_ loaded, else the enlarged images will be loaded in a new window.
Preload?
Thanks Tyler. Got it fine.
Steven, take a look at the thumbnailviewer.css file in the css folder. To change the outermost border color, change line # 8 to the color of your choice.
I may include an interface to change the border color if I ever get around to creating an options page for this plugin.
Let me know if that gets you going or if you need more help.
Hi,
Thanks for the great plugin. Is there a way to change the border color?
Hi Tyler,It solved itself.
It was my stupidity that made it happen.
I forgot that I had z-index set to a hundred. Thanks for the quick respond though.
Sven, looks like you got everything working. Let me know if you still have any questions or any other problems.
Diddi, I don’t think I’ve ever seen that happen. Can you post a URL I can visit where this happens? I’d love to look into it.
My thumbs and entire posts appear on top of the loaded image.
Is there anyone with a solution to this problem?
Otherwise it’s an excellent app by the way.
You can see on my page that the loading screen comes up but no picture. I don’t know what I did wrong. I literally took over the html code on this page with my own links, but it still doesn’t work.
Although the exact code from this page does work! just not with my link
Regards,
Sven
i think there is a bug.
if i click the thumb before the page is loaded, the image opens in an new window.
To test it, scroll to the thumb image click Ctrl + R for page reload and click immediately on the thumb if its visible.
sorry for my bad english.
I also find that this doesn’t work in IE7. The links just open up in a window of their own, replacing this one. I’ve found similar problems with Dynamic Drive’s image viewer scripts, and there doesn’t seem to be many solutions out there!
Well I wanted to show you the syntax but that didn’t work. But when implemented the link “naso” would pop up the photo using the plugin, not as above post
href=”http://stevenwolf.com/wp-content/uploads/2007/06/naso_lituratus_2.jpg” rel=”thumbnail” title=”naso”>naso
Another use of this great plugin if you didn’t know:
Not only can you use it with a thumbnail. You can use it to view a photo from a link also. Create a link to the photo and add rel-”thumbnail”
naso
My installation doesn’t seem to work although it’s activated and at times will show the loading symbol after clicking (but never loads). See the last pic in this post: http://www.divaknitting.com/blog/?p=282 (I used an older post since it’s not working)
I have also encountered the rel= being moved to the beginning of
Doesn’t seem to work in IE7, not even the examples on this site. Really a bummer since that’s 50% of our traffic.
way to go, Tyler!! .. thanks a lot :)
cheers!
Thanks a lot man!!! I’m so in love with your code :D
Really like this easy efficient plugin! Thanks!
And this plugin doesn’t work when rel=”thumbnail” gets moved to the beginning, correct?
I place it after the href but it keeps moving it to before.
Smash: Is there an example I can see? Where are you placing rel=”thumbnail” in the anchor tag? After or before the href=”"?
Nope doesn’t work. when it moves that tag towards the front it doesn’t work. AlsoI have no idea what the quicktag is.
That’s weird guys. I know the plugin doesn’t add rel=”thumbnail” automatically, except when you use the quicktag. Not sure why it would rearrange the rel=”thumbnail” to the beginning of the string. As far as I know, the JS simply searches for the existence of rel=”thumbnail” in anchor tags, I’m no javascript guru though.
Everything is still working though, correct? Nothing is broken?
I get the same thing as you Smash:
When I use this it keeps rearranging the rel=”thumbnail” to the beginning of the string instead of where I place it.
Tyler: If WordPress was adding it automatically, shouldn’t I be able to see it in code view? I don’t see the rel=”" tag in code view at all, but I see it in the source code once the post is published.
I’m wondering if this is the effect of some other addon I implemented. Perhaps it was the AJAX plugin for WordPress… hrm…
When I use this it keeps rearranging the rel=”thumbnail” to the beginning of the string instead of where I place it.
Steve: That’s pretty strange. This plugin doesn’t automatically add rel=”thumbnail” to links, so something else may be doing that. Did you use the quicktag to insert that image into the post? Just FYI, when you use the quicktag, rel=”thumbnail” will be put into the anchor tag automatically.
Hrm.. you know what? I just looked at the source code of the page. In the post itself, I didn’t add any rel=”" at all. However, it is automatically added by something on my site, somehow. I don’t know if it’s the plugin that’s adding the rel=”thumbnail” statement automatically, or something else…?
Tyler: check out my blog, the post with the image test should be on the front page.
http://pixelpushingmonkey.com/blog
Ronaldo: Take a look at the HTML code right below the example images on this page. You need to add rel=”thumbnail” to the anchor (link) tag before your image. Let me know if that helps or not.
I installed it just fine, but don’t understand this part of the instructions:
Now all you need to do is add rel=thumbnail to any link tag surrounding your thumbnail. You’ll do this when you’re editing a post or page, you can also use the quicktag button for auto-insertion goodness.
Here’s an example of one of my image codes:
Even when I added – rel=”thumbnail” after the jpg URL, it still didn’t work.
I’m sure I’m missing the obvious.
Steve: It’s a bug, but it’d make a nice feature too. :) I can’t seem to replicate that behavior on any of my WordPress sites. Is there a link I can visit to see an example?
I installed this on my site, and I noticed even if I don’t use rel=”thumbnail” on my images, the thumbnail viewer still works the same way. Is this a bug, or a feature? :)
Not that I mind, just wondering…
Thanks Tyler, good one. I’m a big fan of interesting, imaginative image display for blogs and sites; your plugin doesn’t dissapoint. In fact I digg it! (dug it)
Sorry, its because I added the photos as page references, not links. Please ignore my first request.
Sorry :D
Phil
Nice.
I really like how quickly this plugin loads and how clean it looks. Great job!
Amazing! Thanks for sharing these :)
Thanks for this nice plugin.