Thumbnail Viewer Plugin

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 1.2

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.

If you come across anything broken or have any issues, please report problems at Github.

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:

Leave a Comment

Comment

177 Comments

  1. 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)

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

  3. 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?

  4. 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.

  5. 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.

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

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

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

  9. 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.

  10. 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?

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

  12. 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

  13. 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

  14. 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

  15. 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!

  16. 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.

  17. 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

  18. 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.

  19. 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.

  20. 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.

  21. 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.

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

    Preload?

  23. 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

  24. 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!

  25. 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?

  26. 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.

  27. 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.

  28. 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!

  29. 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)

  30. 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.

  31. 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!

  32. 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.

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

  34. 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.

  35. 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.

  36. 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.

  37. 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

  38. 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.

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

  40. 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?

  41. 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.

  42. 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!

  43. 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.

  44. 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!

  45. Hello,

    The plugin does not work for my site. I’ve add the tag thumbnail as you can see in the code:

    Why ?

  46. 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

  47. 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.

    • 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.

  48. 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!

  49. 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

  50. 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!

    • 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.

  51. 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.

  52. @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)

  53. 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?

  54. 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..!

  55. 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..!

  56. 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.

  57. 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.

  58. Is there a way to turn the thumbnail function off for selected images, both in posts and widgets? I want to use some pictures as links, but I´m not sure about how! Maybe this more of a general wp question, but I hope to get some help here anyway!

    cheers

    PS. And nice plugin, like what it does to my site!

  59. I LOVE this code so much. I recently switched my site to load div content dynamically. This broke thumbnail viewer because I believe it only finds links when the page first loads, so content that is dynamically loaded after isn’t “seen” by thumbnailviewer.js. Anyone know of any ways around this? I tried dynamically loading the JS again when the data is dynamically loaded through AJAX, but then all I get is a white page with a the “Close” button and “Loading” image. Images that are loaded upon initial GET have the viewer work fine on them.

    • Good question eshanne.

      Not sure about the black bg with transparency of 50%. I don’t see why it wouldn’t work.

      And no, this plugin doesn’t use any CSS float properties anywhere.

  60. I use Lightbox JS for couple of months now as it is simply working on all modern browsers which is of course, more convenient to use. Plus, the features and speed is okay too. I have heard that the Thumbnail Viewer plugin for Word Press is also a neat stuff to use on overlaying images on blogs. Thank you for posting this as I am now looking on trying this plugin. It’s thrilling to know that the javascript included on thumbnail viewer is much faster compared to Lightbox. Let’s try and see!
    Cheers!

  61. Hi,

    I want to use Thumbnail Viewer with high-resolution photos that people can then download and print out. However, this creates a problem with the photo being too big for the screen when people click on the thumbnail. Is there any way to limit the size of the display photo without actually limiting the size of the photo file for downloading? I tried just adding something like: width=”300″ height=”500″ , but that didn’t work. Thanks.

  62. I am really enjoying reading your well written website. It looks like you spend a lot of effort and time on your website. I have bookmarked it and I am looking forward to reading new article. Keep up the good work!
    here also good information about slot
    slots