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>
<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>
<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>
http://vikjavev.no/highslide/
Thanks and to all you IT disciples, thanks for spreading the gospel.
Its more fun wen we share.
Cheers
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.