Preview images with DOM, CSS (and a dash of PHP)
Sometimes it might be a good idea to give visitors an insight of what is lurking behind a link. Normally this is achieved via a thumbnail, but what about inline links?
This article explains how you can enhance a link with a class named “preview” pointing to an image via DOM JavaScript. The enhanced link has a small clickable icon that will show a preview of the linked image. If you have PHP with the GD library enabled, it even creates the preview on the fly.
Read more about “Dynamic preview images with DOM, CSS and PHP“:http://icant.co.uk/articles/imagepreview/
July 20th, 2005 at 11:19 am
Question… why are you redeclaring
var hasphp? What’s the use of declaring it as either true or false when the next line declares it as a URL-string, anyway?July 20th, 2005 at 11:23 am
Additional:
1) the JS creates three javascript warnings on each page load, caused by variable redeclarations;
2) may I suggest adding some checks to see if an image has been popped up / shown as preview already? It’s very annoying being forced to manually click away each opened preview, much better (to me and others) would be to have an already opened preview be closed when you open a new picture for previewing.
July 20th, 2005 at 11:45 am
Chris,
1) ah, ok, well, it just confused me when I saw it. My PHP nature went “well that’s pointless!”
2) I use the Javascript Console on Mozilla 1.7.6 – when I load the page, three “Warning: redeclaration of var …” notices appear
3) For having them next to each other, it would make sense. Your example, however, has them overlapping each other, and if you go from bottom to top you can’t even see much of the second two images you open, as they get hidden underneath the third one.
For those reasons, I’ve made my version of this concept (which I wrote a few months ago, see it in action here) make only one image appear at a time.
July 20th, 2005 at 11:45 am
Addendum to last comment (sorry!): in the previous linked page, click on the small thumbnail to see my script in action
July 20th, 2005 at 12:36 pm
Chris,
Thanks for the great article. Here is a semi-related question. Have you ever been able to convert multi-image/page tiffs to a jpeg image using php. I have a site that uses the same concept of the mouseover, but I would like to view all pages of the tiff file.
Thanks!
John
July 26th, 2005 at 12:05 am
It’d be better if click anywhere outside the image zone would hide the image. It’s default windows behaviour. I even tried doing it before reading.
Edit
Web sites != Windows
July 31st, 2005 at 1:42 am
N00b question: The images don’t display properly in Safari 2.0 – the loading image appears correctly, but the actual thumbnails display all chopped-up like. Is this because Safari lacks the DOM support required?
Don’t know if this is related, but the camera icons do not appear in Faruk’s example as they do in the main example.
August 18th, 2005 at 8:56 pm
This is cool and works very well, I thought I had found just what I been looking for. But turns out It doesnt do what I need.
First I have .JPG and .GIF images both Id like to provide previews for and second I need to link across directories. Are these options possible?
Reguardless thought its a very nice piece of work :)
May 10th, 2006 at 6:06 pm
put in your css:
a {outline : none;}
and the outline is hidden …
June 28th, 2007 at 12:47 am
Addendum to last comment (sorry!): in the previous linked page, click on the small thumbnail to see my script in action …
August 2nd, 2007 at 1:56 pm
Would be good if images last clicked image was assigned greater z-index. Currently latest clicked image is partly covered by previously clicked. Great work anyway.
August 30th, 2007 at 5:59 am
I recently came upon this “currently free” website for capture website screenshots, they mention that they are free while in beta and offer over 1000 sizes, i currently use them on my websites for website thumbnails and have had no problems at all! thumbnailspro.com
January 30th, 2008 at 9:41 pm
Why is it the Bitmap files break the script? Bitmaps do not load…
I would love it if bitmaps were displayed
February 16th, 2008 at 5:12 pm
Looks great. One design issue comes to mind though, I reckon you should style the camera button links with ‘outline: none;’ otherwise it really ruins the look in browsers that utilise hyperlink outlines (like firefox for example).
July 23rd, 2009 at 7:31 pm
This script looks wonderful, I read the php file and I can fairly understand it, but Im wondering if it would be possible to display the thumbnail picture always without creating a hyperlink.
for example, if we supply the element with
class=”createpreview” for multiple pictures in the page.
would it be possible ? I would like to use it in my website so let me know if that would work.
November 11th, 2009 at 10:26 pm
Chris,
Thanks for developing this. I am having a similar issue to Sarah. I am trying to use this across directories with various document types (PPT, PDF, Word) rather than JPGs and PNGs as the preview image format. I’ve tried testing this locally using your test page and it doesn’t work, so I wonder whether this script can accommodate different formats of link vs. preview.
The page I am using it on is a corporate Intranet site with 200+ documents and it would be great to find something that doesn’t require the thumbs to load together.
Thanks for your help, Asya
April 14th, 2010 at 8:47 pm
How do you display the thumbnail on the page instead of opening it by clicking the url?