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>Popularity: 7% [?]
Thanks for this nice plugin.
Nice.
I really like how quickly this plugin loads and how clean it looks. Great job!
Sorry, its because I added the photos as page references, not links. Please ignore my first request.
Sorry :D
Phil
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)
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…
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 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.
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.
Tyler: check out my blog, the post with the image test should be on the front page.
http://pixelpushingmonkey.com/blog
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…?
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.
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…
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.
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?
Nope doesn’t work. when it moves that tag towards the front it doesn’t work. AlsoI have no idea what the quicktag is.
Smash: Is there an example I can see? Where are you placing rel=”thumbnail” in the anchor tag? After or before the href=”"?
I place it after the href but it keeps moving it to before.
And this plugin doesn’t work when rel=”thumbnail” gets moved to the beginning, correct?
Really like this easy efficient plugin! Thanks!
Thanks a lot man!!! I’m so in love with your code :D
way to go, Tyler!! .. thanks a lot :)
cheers!
Doesn’t seem to work in IE7, not even the examples on this site. Really a bummer since that’s 50% of our traffic.
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
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
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
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!
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.
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
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.
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.
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.
Hi,
Thanks for the great plugin. Is there a way to change the border color?
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.
Thanks Tyler. Got it fine.
It does work with IE7 when the page is _completely_ loaded, else the enlarged images will be loaded in a new window.
Preload?
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
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!
Is there a reason this isn’t working on this site?
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?
That’s really nice plugin!
It is very easy to me. I can install them without any trobule!
Thank you very much!
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.
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.
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’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)
Thanks, i like this very much :-)
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.
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!
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.
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….
^^ 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
Is there a way to have the thumbnail link to an object or maybe an iframe instead of just an image?
Ryan: I’m not really sure. If there is a way, I’d love to hear about it, got any ideas?
Thanks..
[…] Açıklamalı 230 Wordpress eklentisi (Agu. 15, 2007) (Wordpress plugin list),[…]
how do you change the font colour of the caption?
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!
Note this plugin only works reliably with IE. The full size images are distorted in Firefox and Safari.
is this plugin for realease WP 2.3. ?
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.
Hi,
Nice plugin, thanks. This one does not work in Firefox, right?
This plugin works with Firefox, Internet Explorer, and probably every other web browser. I know for a fact it works in Firefox and IE.
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?
thanks so much for this great and easy to use tool!!!
Great work and very nice plugin :) I just started using this plugin on my Portfolio page, works sweetly :D
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.
hx for this plugin
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.
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.
Plug-in a very nice.
Light and very cool!
Thanks.
thanks for this tool!
very very nice
how do i get this to work on a page rather than a post?
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.
Nice plugin, but it doesn’t work in Gecko browsers. You can’t close the popup window.
Too bad, nice try otherwise.
Adrienne Adams: That’s simply not true. It works in most gecko browsers. Specifically which gecko browser does it not work in?
thanks. good works. super scripts
Do we have to upload the pics in the own site space?
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
Even when I added - rel=”thumbnail” after the jpg URL, it still didn’t work.
I’m sure I’m missing the obvious.
thanks
Ty :)
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.
thanks for plugin, perfect
turkbaron
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 :)
Hey that’s cool plugin, thanks.
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!
baron, it is compatible with WordPress 2.5, although some times the quicktag button is missing when authoring a page or post.
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?
hi. Thanks for plugin
perfect…
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.