ColdFusion 8 - Automatic Thumbnail/Preview Demo

This post is more than 2 years old.

This is a neat little piece of code sent to me by Miles Jordan. He credited Dave Watts for the original idea. The code makes use of the CFTOOLTIP tag, one of ColdFusion 8's Ajax features. The tag allows you to easily provide tooltip information for items on the page. What's cool is that the tooltip can be both simple text and HTML. He makes use of this by feature by simply using the larger version of the image as the tooltip. Check it out:

<cfset image_path = "/Users/ray/Pictures/sad.jpg" > <cfimage name="large_preview" source="#image_path#"> <cfset imageScaleToFit(large_preview,600,600,'bicubic')> <cfsavecontent variable="tooltip_image"> <cfimage source="#large_preview#" action="writeToBrowser"> </cfsavecontent>

<cftooltip tooltip="#tooltip_image#" autodismissdelay="5000"> <cfimage name="small_preview" source="#image_path#"> <cfset imageScaleToFit(small_preview,120,120,'bicubic')> <cfimage source="#small_preview#" action="writeToBrowser"> </cftooltip>

He begins with an initial image resize to a decent, but still large, size. Notice the saves the HTML created by the writeToBrowser action. This HTML is then used in the tooltip.

Altogether, you get this effect when you mouseover the image:

Pretty nifty. Just one nit - I'd save the resized images. Image resizing on the fly for every request is typically a bad idea.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Jason posted on 4/24/2009 at 12:46 AM

We implemented this about a month ago to mixed reaction from our customers. The problem we've found is CFTOOLTIP will sometimes render the pop-up at the bottom of the screen instead of next to the image. Another common issue is the CFTOOLTIP image flickering off and on. This will happen on smaller screens where the pop-up image is forced to render on top of the original image.

You can see our implementation on a demo site. We have the pop-ups on all product images: http://www.ourspecialties.com/. Many customers have turned it off on their sites.

Any ideas on how to improve the experience are welcome. It was very easy to implement so I'm not really interested in writing my own JavaScript. I'd prefer Adobe tweak the source code so all we have to use is CFTOOLTIP.

Thanks

Comment 2 by Raymond Camden posted on 4/24/2009 at 1:37 AM

_Wow_. It is seriously fubared on your site. Are you running the latest CF8? (Ie 801 with hotfixes?)

Comment 3 by Jason posted on 4/24/2009 at 1:45 AM

Yes, we're at 8,0,1,195765. See, it looks and works fine for me on my computer at work and at home. On my laptop it doesn't work as well.

Comment 4 by Raymond Camden posted on 4/24/2009 at 1:56 AM

Weird. Sorry - you got me. I don't use cftooltip that much. I'm almost entirely jQuery now.

Comment 5 by Sam Farmer posted on 4/24/2009 at 2:16 AM

@Jason

You brought back the blink tag! Awesome ;)

It looks great on a big monitor but when I made the browser smaller I see the problems. Not sure how to solve it unless you provide smaller images? From the source code I see that you specify the width and height of the images. Perhaps you can use css styles to do a percent of the window?

Comment 6 by Peter Tilbrook posted on 4/24/2009 at 9:14 AM

What about embedded (malicious) script say in the tooltip code? How is that handled?

Comment 7 by Yaron Kohn posted on 4/24/2009 at 3:34 PM

what about a jQuery Demo...(BTW, I'm a jQuery fanatic as well now)

Comment 8 by Raymond Camden posted on 4/24/2009 at 3:56 PM

Sure, and I could do it 'proper' (with caching of the resizing).

Comment 9 by Raymond Camden posted on 4/24/2009 at 4:03 PM

@Peter: What do you mean?

Comment 10 by Brian FitzGerald posted on 4/24/2009 at 6:41 PM

I've been using a jQuery plugin called qTip I've been rather pleased with - available here:

http://craigsworks.com/proj...

Plenty of ways to customize the look and feel.

Comment 11 by s23yen posted on 4/28/2009 at 6:18 PM

Really cool, i prefer using good CF instead of all other available .js libs (even if some are more powerful indeed, but for a small gallery without any pretention, great!)

Comment 12 by Chad Stinner posted on 4/30/2009 at 7:57 PM

Question though, how does one make the tooltip stay indefinitely until the user moves off the image? I've found that changing the autodismissdelay does nothing. Even when I close all browsers and come back. It never changes from 5 seconds.

I even set it to 500000 just to see. Restarted the CF Dev server and nothing. Still... 5 seconds.

Comment 13 by Raymond Camden posted on 4/30/2009 at 7:59 PM

I seem to remember a bug report on the autodismissdelay. YOu running the latest rev of CF8?

Comment 14 by Chad Stinner posted on 5/1/2009 at 3:32 PM

Sure am.
Server Product ColdFusion
Version 8,0,1,195765
Edition Enterprise

Comment 15 by Raymond Camden posted on 5/1/2009 at 5:21 PM

It may _not_ be fixed then. Sorry - might need to raise it w/ Adobe support.