In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Ebenezer asked the question:

"CFwindows is quite nice, but i need it to behave in a particular way. I want to remove the frame and the (x) close button. I want to use cfwindow to just "display the bigger size of an image on mouseover and close on mouse out. Anyone with an idea."

Below is an example of how to remove the toolbar and borders from the cfwindow and display the large image when you rollover the thumbnail.

Click here to see it in action.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFWindow as Image onMouseOver Enlarger/Pop Up</title>
   <script language="JavaScript">
      //The init function removes the toolbox and makes sure the title is empty       
      init = function(){
         myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
         myWindow.toolbox.remove();
         myWindow.header.remove();
         myWindow.setTitle('');
      }
      
      //the showImage function updates the body of the cfwindow with an img tag       //and resizes the cfwindow to fit the image       
      showImage = function(imgPath,width,height){
         myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
   myWindow.body.update("<img src='" + imgPath + "' alt='' border='0'>");
   myWindow.setContentSize(width, height);
         ColdFusion.Window.show('ImageWindow');
      }
      
      //the hideImage is called by the onmouseout event       
      hideImage = function(){
         ColdFusion.Window.hide('ImageWindow');
      }
   </script>
   <!--- Override Styles to remove border from cfwindow --->
   <style>
   .x-dlg div.x-resizable-handle-north {
      background-image:none;
      border:0px none;
      }
   .x-dlg div.x-resizable-handle-south {
      background-image:none;
      border:0px none;
      height:0px;
      }
   .x-dlg div.x-resizable-handle-east {
      background-image:none;
      width:0px;
      border:0px none;
      margin-right:0pt;
      }
   .x-dlg div.x-resizable-handle-west {
      background-image:none;
      border:0px none;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-northeast, .ytheme-gray .x-dlg div.x-resizable-handle-northeast {
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-northwest, .ytheme-gray .x-dlg div.x-resizable-handle-northwest {
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-southeast {ext-all.css (line 2247)
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-southwest {ext-all.css (line 2255)
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      margin-bottom:0px;
      margin-left:0px;
      }
   .x-dlg .x-dlg-dlg-body {
      border-color:none;
      border-style:none;
      border-width:0px 0px 0px;
      }
   </style>
</head>
<body>
<div align="center">
<img src="/Images/ScottGravator.jpg" alt="" border="0" onmouseover="showImage('/images/scottbennett.jpg',238,318);" onmouseout="hideImage();"><br>
(Mouseover to enlarge)
</div>
<!--- set up the image window. --->
<cfwindow
name="ImageWindow"
closable="true"
draggable="true"
height="300"
initShow="false"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title=""
width="200">

</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>

And I also did pretty much the same thing here, but on this on you have to click the thumbnail to open the cfwindow, then click the large image to close the cfwindow. Click here to try it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFWindow as Image onClick Enlarger/Pop Up</title>
   <script language="JavaScript">
      //The init function removes the toolbox and makes sure the title is empty       
      init = function(){
         myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
         myWindow.toolbox.remove();
         myWindow.header.remove();
         
         myWindow.setTitle('');
      }
      
      //the showImage function updates the body of the cfwindow with an img tag       //and resizes the cfwindow to fit the image       
      showImage = function(imgPath,width,height){
         myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
   myWindow.body.update("<img src='" + imgPath + "' alt='' border='0' onclick='hideImage();'>");
   myWindow.setContentSize(width, height);
         ColdFusion.Window.show('ImageWindow');
      }
      
      //the hideImage is called by the onclick event in the img tag that       //is generated by the showImage function and just hides the cfwindow       
      hideImage = function(){
         ColdFusion.Window.hide('ImageWindow');
      }
   </script>
   <!--- Override Styles to remove border from cfwindow --->
   <style>
   .x-dlg div.x-resizable-handle-north {
      background-image:none;
      border:0px none;
      }
   .x-dlg div.x-resizable-handle-south {
      background-image:none;
      border:0px none;
      height:0px;
      }
   .x-dlg div.x-resizable-handle-east {
      background-image:none;
      width:0px;
      border:0px none;
      margin-right:0pt;
      }
   .x-dlg div.x-resizable-handle-west {
      background-image:none;
      border:0px none;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-northeast, .ytheme-gray .x-dlg div.x-resizable-handle-northeast {
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-northwest, .ytheme-gray .x-dlg div.x-resizable-handle-northwest {
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-southeast {ext-all.css (line 2247)
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      }
   .x-dlg div.x-resizable-handle-southwest {ext-all.css (line 2255)
      background-image:none;
      border:0px none;
      height:0px;
      width:0px;
      margin-bottom:0px;
      margin-left:0px;
      }
   .x-dlg .x-dlg-dlg-body {
      border-color:none;
      border-style:none;
      border-width:0px 0px 0px;
      }
   </style>
</head>
<body>

<div align="center">
<img src="/Images/ScottGravator.jpg" alt="" border="0" onclick="showImage('/images/scottbennett.jpg',238,318);"><br>
(click to enlarge)
</div>
<!--- set up the image window. --->
<cfwindow
name="ImageWindow"
closable="true"
draggable="true"
height="300"
initShow="false"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title=""
width="200">

</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Anjorin Ebenezer's Gravatar Thanks... U're the best!
# Posted By Anjorin Ebenezer | 5/30/08 7:57 PM
James Moberg's Gravatar For these types of user interaction, I use and recommend "HighSlide JS". It's not specific to any version of ColdFusion and is highly customizable to use flash/sifr, iframe, hidden div, ajax and simple image links. Check it out:
http://vikjavev.no/highslide/
# Posted By James Moberg | 5/31/08 4:26 PM
Anjorin Ebenezer's Gravatar I checkd the site, its really nice... very impressive.. cant wait to try it out.

Thanks and to all you IT disciples, thanks for spreading the gospel.

Its more fun wen we share.

Cheers
# Posted By Anjorin Ebenezer | 5/31/08 10:33 PM
Scott Bennett's Gravatar @James,
I have used highslide on a few sites as well, and it is definitely a better way to go. I was actually going to mention that in this article, but forgot, so thanks for bringing it up.
# Posted By Scott Bennett | 5/31/08 11:27 PM
munna's Gravatar all i can say awesome stuff....
# Posted By munna | 9/13/08 6:14 PM
Mark Llewellyn's Gravatar Scott,

This works perfectly in FF3, but gives me an "exception thrown but not caught" error in IE [7] (debugger says in cfajax.js). At this point I am only interested in removing the title bar and borders, but using textual html content.

Any ideas? Also, I went to the Ext site to browse the docs but didn't find the reference for the remove method you call on the toolbox and header.

Thanks,
Mark
# Posted By Mark Llewellyn | 1/6/09 2:09 PM
Scott Bennett's Gravatar Mark,

I just tested it in IE 7 and it is working for me, so I'm not sure why it generated that error for you.

You can use textual html content the exact same way I used the html img tag. Just replace img tag in the line:

myWindow.body.update("<img src='" + imgPath + "' alt='' border='0' onclick='hideImage();'>");

with whatever html you want (you may need to use jsstringformat() to make the html javascript friendly)


Pretty much everything in ext extends the ext.element class which has a remove method.

http://extjs.com/deploy/ext/docs/output/Ext.Elemen...

If you are ever working with ext objects, you will want to be familiar with all the methods in the Ext.Element class.
# Posted By Scott Bennett | 1/6/09 3:28 PM
Mark Llewellyn's Gravatar Scott,

I'm embarassed to say that the code I copy-pasted to a test page here was not complete - a fresh copy of both your code samples work fine in IE7 <red-faced> There is something wrong in my main page with cfajax.js not finding my window id (name) and that is the root of where I have to look.

Thanks for the clarification on the ext.element class, I'm still getting my head wrapped around OO stuff!

Mark
# Posted By Mark Llewellyn | 1/6/09 3:38 PM
Scott Bennett's Gravatar Mark,

Make sure you are using firebug, it is a must have when dealing with javascript.

http://www.coldfusionguy.com/ColdFusion/blog/index...
# Posted By Scott Bennett | 1/6/09 3:42 PM
Mark Llewellyn's Gravatar I use Firebug in FF; but the error is only occurring when run in IE (and I really despise the way Script Editor works-- especially when compared to firebug).

Since all the other cfwindows defined on the page are not having a problem being displayed, I have to find out what sets this one apart. One thing is that the display call is being called within the function called by body onload, so perhaps something to do with late binding??
# Posted By Mark Llewellyn | 1/6/09 4:17 PM
Mark Llewellyn's Gravatar Figured it out. I was trying to define the cfwindow at bottom of body and do a getWindowObject on that during page load... it didn't like it in IE. I switched to just creating the window in JS, then setting the various attributes and showing it when done. I do a try-catch block to attempt showing the window, the catch block takes care of the create and modify section. Probably not good code practice, but it works well! <dang rookies... sheesh>

Thanks for your help Scott!
# Posted By Mark Llewellyn | 1/6/09 6:21 PM
sagar's Gravatar I am trying to use the function setContentSize but seems not working and always throws me an error on error console. Is it the right function?
# Posted By sagar | 2/12/10 4:22 PM
Sanchez's Gravatar this doesn't seem to work with cf9 is there an update?
# Posted By Sanchez | 7/5/12 12:56 PM
 
Home | Blog | Portfolio | Contact | © 2001 - 2007 The ColdFusion Guy - Scott Bennett. All rights reserved.
BlogCFC was created by Raymond Camden. This blog is running version 5.9.