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

  1. Extract thumbnail-viewer folder from downloaded file to wp-contents/plugins/.
  2. Go to Plugins section in WordPress dashboard and activate Thumbnail Viewer.
  3. That’s it!
  4. 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:
Some CornSome Cracker JacksSome Peas

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% [?]

133 Responses to “Thumbnail Viewer Plugin”


  1. 1 Axel

    Thanks for this nice plugin.

  2. 2 Jason

    Nice.

    I really like how quickly this plugin loads and how clean it looks. Great job!

  3. 3 Phil Winder

    Sorry, its because I added the photos as page references, not links. Please ignore my first request.
    Sorry :D

    Phil

  4. 4 Flash Buddy

    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)

  5. 5 Steve

    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…

  6. 6 Tyler

    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?

  7. 7 Rolando

    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.

  8. 8 Tyler

    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.

  9. 9 Steve

    Tyler: check out my blog, the post with the image test should be on the front page.

    http://pixelpushingmonkey.com/blog

  10. 10 Steve

    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…?

  11. 11 Tyler

    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.

  12. 12 smash

    When I use this it keeps rearranging the rel=”thumbnail” to the beginning of the string instead of where I place it.

  13. 13 Steve

    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…

  14. 14 Rolando

    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.

  15. 15 Tyler

    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?

  16. 16 smash

    Nope doesn’t work. when it moves that tag towards the front it doesn’t work. AlsoI have no idea what the quicktag is.

  17. 17 Tyler

    Smash: Is there an example I can see? Where are you placing rel=”thumbnail” in the anchor tag? After or before the href=”"?

  18. 18 smash

    I place it after the href but it keeps moving it to before.

  19. 19 Tyler

    And this plugin doesn’t work when rel=”thumbnail” gets moved to the beginning, correct?

  20. 20 Christian

    Really like this easy efficient plugin! Thanks!

  21. 21 Marius

    Thanks a lot man!!! I’m so in love with your code :D

  22. 22 Toni

    way to go, Tyler!! .. thanks a lot :)

    cheers!

  23. 23 Kerry Garrison

    Doesn’t seem to work in IE7, not even the examples on this site. Really a bummer since that’s 50% of our traffic.

  24. 24 ck

    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

  25. 25 Steven

    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

  26. 26 Steven

    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

  27. 27 mintyjones

    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!

  28. 28 tbase

    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.

  29. 29 Sven

    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

  30. 30 Diddi

    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.

  31. 31 Tyler

    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.

  32. 32 Diddi

    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.

  33. 33 Steven

    Hi,

    Thanks for the great plugin. Is there a way to change the border color?

  34. 34 Tyler

    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.

  35. 35 Steven

    Thanks Tyler. Got it fine.

  36. 36 The Dyke

    It does work with IE7 when the page is _completely_ loaded, else the enlarged images will be loaded in a new window.

    Preload?

  37. 37 Patrick

    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

  38. 38 r3drock3t88

    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!

  39. 39 Maurice

    Is there a reason this isn’t working on this site?

  40. 40 minty jones

    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?

  41. 41 Masa Ichikawa

    That’s really nice plugin!
    It is very easy to me. I can install them without any trobule!
    Thank you very much!

  42. 42 No Spam

    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.

  43. 43 No Spam

    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.

  44. 44 Tyler

    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!

  45. 45 No Spam

    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)

  46. 46 Heiko

    Thanks, i like this very much :-)

  47. 47 John H

    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.

  48. 48 Aaron

    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!

  49. 49 John H

    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.

  50. 50 Aaron

    Nevermind! I figured it out. I wrapped the image in divs:

    my image

    Add 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….

  51. 51 Aaron

    ^^ 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

  52. 52 Ryan

    Is there a way to have the thumbnail link to an object or maybe an iframe instead of just an image?

  53. 53 Tyler

    Ryan: I’m not really sure. If there is a way, I’d love to hear about it, got any ideas?

  54. 54 canarkadaş
  55. 55 Kyle

    how do you change the font colour of the caption?

  56. 56 Christina Bay

    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!

  57. 57 John H

    Note this plugin only works reliably with IE. The full size images are distorted in Firefox and Safari.

  58. 58 olci

    is this plugin for realease WP 2.3. ?

  59. 59 Tyler

    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.

  60. 60 Ralph

    Hi,

    Nice plugin, thanks. This one does not work in Firefox, right?

  61. 61 Tyler

    This plugin works with Firefox, Internet Explorer, and probably every other web browser. I know for a fact it works in Firefox and IE.

  62. 62 joe

    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?

  63. 63 houserocker

    thanks so much for this great and easy to use tool!!!

  64. 64 Dexter

    Great work and very nice plugin :) I just started using this plugin on my Portfolio page, works sweetly :D

  65. 65 John H

    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.

  66. 66 evden eve

    hx for this plugin

  67. 67 Tyler

    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.

  68. 68 Katsuhiko

    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.

  69. 69 Katsuhiko

    Plug-in a very nice.
    Light and very cool!
    Thanks.

  70. 70 diet guru

    thanks for this tool!

  71. 71 Andy

    very very nice

  72. 72 Andy

    how do i get this to work on a page rather than a post?

  73. 73 Andy

    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.

  74. 74 Adrienne Adams

    Nice plugin, but it doesn’t work in Gecko browsers. You can’t close the popup window.

    Too bad, nice try otherwise.

  75. 75 Tyler

    Adrienne Adams: That’s simply not true. It works in most gecko browsers. Specifically which gecko browser does it not work in?

  76. 76 LaNeT

    thanks. good works. super scripts

  77. 77 Jayvee

    Do we have to upload the pics in the own site space?

  78. 78 Sean

    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

  79. 79 ttnet

    Even when I added - rel=”thumbnail” after the jpg URL, it still didn’t work.

    I’m sure I’m missing the obvious.

  80. 80 garantimac

    thanks

  81. 81 alican

    Ty :)

  82. 82 Adam Goldsztajn

    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.

  83. 83 baron

    thanks for plugin, perfect

    turkbaron

  84. 84 Roy

    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 :)

  85. 85 Web 2.0 & Usability Blog

    Hey that’s cool plugin, thanks.

  86. 86 baron

    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!

  87. 87 Tyler

    baron, it is compatible with WordPress 2.5, although some times the quicktag button is missing when authoring a page or post.

  88. 88 Rufas

    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?

  89. 89 baron

    hi. Thanks for plugin

    perfect…

  90. 90 Scott

    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.

  1. 1 Weblog Tools Collection » Blog Archive » WordPress Plugin Releases for 05/10
  2. 2 WeblogToolsCollection Español » Blog Archive » Plugins de WordPress publicados 10/5
  3. 3 Thumbnail Viewer Plugin » D’ Technology Weblog: Technology News & Reviews
  4. 4 WP Plugins DB » Plugin Details » Thumbnail Viewer
  5. 5 Lightbox test plugin
  6. 6 WordPress plugins: Lightbox
  7. 7 wpSnap Blog » WordPress Plugins for July 2007
  8. 8 Khoa Lam » Archive » Plug it in, plug it in
  9. 9 Phillipwray Racing & Collectable Classics website disected
  10. 10 רשימת התוספים שלי | דולב ושרית
  11. 11 Thumbnail Image Viewer | わーどぷれすっ!
  12. 12 bilgiservisim » En iyi 100 wordpress eklentisi
  13. 13 Temel Ailesi » 150 Adet Wordpress Eklentisi Turkce Açıklamalı
  14. 14 “En iyi nasihât; iyi örnek olmaktır.” (Malcolm X) » WordPress’ e yasal engel ve WordPress eklentileri
  15. 15 150 Adet Wordpress Eklentisi Turkce Açıklamalı | Bilgisayar Hocası
  16. 16 Der wilde Garten | links for 2007-05-28
  17. 17 prueba nuevo plugin at David Navarrot Artbook
  18. 18 Site Design V - Plugins
  19. 19 Essential Plugins for your Blog - Part2 (Posts)
  20. 20 Wu Zhuo » Blog Archive » Thumbnail Viewer Plugin
  21. 21 My New Thumbnail Plug In : Barefoot Devotions
  22. 22 WP插件:Thumbnail Viewer-缩略图展示 | 帕兰的口袋
  23. 23 Wordpress + Plugins at Todo dia um novo dia.
  24. 24 Brett on Stuff » Polaroid Style Thumbnails
  25. 25 Brett on Stuff » Polaroid Style Thumbnails
  26. 26 Thumbnail Viewer Plugin
  27. 27 Thumbnail Viewer