Cmotion pop-up window question

**daphinay** · 12-20-2005, 03:52 AM

Is there any way to have text along with the pop-up image in the Cmotion Image gallery? I want the pop-up to have a short description under it.

thanks!

**jscheuer1** · 12-20-2005, 05:19 AM

Make the pop-up url that of an HTML page rather than an image:

Code:

<a href="javascript:enlargeimage('dynamicbook1.htm')">

Then on that page, dynamicbook1.htm (in the above example), put your image along with whatever text you like.

If you have tons of images and descriptions, the enlargeimage function can be modified to create the popup page. The call to it could then include a parameter that holds the description, here's one possibility:

Code:

function enlargeimage(path, myname, w, h, title, description){
w=(document.all&&!window.opera)? w-2 : w
h=(document.all&&!window.opera)? h-2 : h
h=h+35
w=w+20
var ieDif=(document.all&&!window.opera)? 2 : 0
LeftPosition = (window.innerWidth&&window.opera)? (window.innerWidth-w)/2 :(screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (window.innerHeight&&window.opera)? (window.innerHeight-h)/2 :(screen.height) ? (screen.height-h)/2 : 0;
TopPosition=TopPosition<0? 0 : TopPosition
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars=0,resizable=0,status=0'
win = window.open('',myname,settings)
win.document.write('<title>'+title+' - Close Window to Exit</title>');
win.document.write('<script>\n\
\n\
//Disable right click script III- By Renigade (renigade@mediaone.net)\n\
//For full source code, visit http://www.dynamicdrive.com\n\
\n\
var message="";\n\
///////////////////////////////////\n\
function clickIE() {if (document.all) {(message);return false;}}\n\
function clickNS(e) {if \n\
(document.layers||(document.getElementById&&!document.all)) {\n\
if (e.which==2||e.which==3) {(message);return false;}}}\n\
if (document.layers) \n\
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}\n\
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}\n\
\n\
document.oncontextmenu=new Function("return false")\n\
window.onblur=function(){self.close();}\n\
<\/script>')

win.document.write('<body bgcolor="#dddddd"  text="#000000" style="margin:10px;padding:0;overflow:hidden;">');
win.document.write('<img width="'+(w-20+ieDif)+'" height="'+(h-35+ieDif)+'" galleryimg="no" title="'+title+'" src="'+path+'" \/>');
win.document.write('<div align="center" style="margin-top:3px;">'+description+'<\/div>');
win.document.close();
}

Usage:

enlargeimage(path, myname, w, h, title, description)

path is the path to theimage, name can be any unique name or empty quotes, w and h are the width and height of the image, title is a page title and tooltip for the image, description is the text description, ex:

Code:

<a href="javascript:enlargeimage('image.jpg', '', 150, 200, 'My Image', 'This is my image that I took in Canada, circa 1960')">

**daphinay** · 12-20-2005, 11:26 PM

thanks for the help, but is there any way to add just the description javascript to what i already have? which is:

function enlargeimage(path, optWidth, optHeight)
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

**jscheuer1** · 12-21-2005, 04:53 AM

The usage* is the same as the original enlargeimage function, except that now a description (or empty quotes) is required as the second parameter:

Code:

function enlargeimage(path, description, optWidth, optHeight){
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
var win=window.open("","", winattributes)
win.document.write('<body style="margin:10px;padding:0;overflow:hidden;">');
win.document.write('<img src="'+path+'">');
win.document.write('<div style="margin-top:3px;font-family:verdana, arial, sans-serif;font-size:90%;"><nobr>'+description+'<\/nobr><\/div>');
win.document.close();
}

*Usage:

Code:

<a href="javascript:enlargeimage('dynamicbook1.gif', 'This is Dynamic Book One')">

or to use without the description:

Code:

<a href="javascript:enlargeimage('dynamicbook1.gif', '')">

As with the original, optional width and height may now follow either the description or its empty field. However, now only images (or images and their paths) may be used for the first (path) parameter.

**daphinay** · 12-21-2005, 05:04 PM

you are one sexy man!

thanks for the help!

**dydoyaga** · 04-18-2006, 09:57 PM

I have followed all the directions on this feed and it all works... however, I notice that my image on popup does not auto resize the image now that it generates the html file. I have not put it up on my site yet.

any chance of image resizing to fit html page and still be resizable when I expand the browser window.

thanks
again

**jscheuer1** · 04-19-2006, 12:45 PM

Originally Posted by dydoyaga

any chance of image resizing to fit html page and still be resizable when I expand the browser window.

Well, it never really was. It only appeared as such in browsers that treat image links in that manner. You cannot get a browser that will do that with just an image to do it with an image on a page, which is what we are doing in this thread, creating a page on the fly for each image. However, if you created a page on the fly that had the image in an iframe, it might work the way you want, at least in some browsers. Try replacing:

Code:

win.document.write('<img src="'+path+'">');

with:

Code:

win.document.write('<iframe src="'+path+'" frameborder="0" width="'+actualWidth+'" height="'+actualHeight+'">');

**dydoyaga** · 04-19-2006, 08:22 PM

this does not seem to work. the iframe gives me scrollbars to view the entire image within the html page. Is it possible to have the image load in the popup window so the sizing still works, and launch an iframe underneath the image giving me a description area for each image.

Instead of using iframe for the image... maybe it can be used for text area.

sorry to be such a pain

**dydoyaga** · 04-20-2006, 05:50 AM

I think a limitation of charcters exists when adding the description variable to the js. Any way to get past the limitation. I can use a few words and it seems to work, but if i use a full sentence it gives me an error.

**jscheuer1** · 04-20-2006, 06:02 AM

As I tried to point out before, only some browsers will resize an image displayed by itself in a window anyway. So, the idea is that this resizing thing cannot be relied upon. What I didn't mention is that it is better to make your image be a size that it will fit in the pop up to begin with. That being said, some browsers will resize an image in an iframe. Perhaps getting rid of the scrollbars or setting them to auto will help and setting overflow to auto or hidden:

Code:

win.document.write('<iframe src="'+path+'" scrolling="no" style="overflow:auto;" frameborder="0" width="'+actualWidth+'" height="'+actualHeight+'">');

Other values you may try for scrolling are "yes" and "auto". Other values for overflow are hidden, scroll and visible. You really are on your own if you want to try this as, I cannot predict exactly what will happen, not knowing your target browser and not having your image(s) to play with (results will vary by browser and by image). I'd suggest trying all possible combinations, including ones that don't use overflow at all and ones that don't use scrolling at all. You might also want to try adding to the width or height for the window, to allow for the description:

Code:

var winattributes="width="+actualWidth+",height="+[actualHeight+20]+",resizable=yes"

Another idea that might work is to forget about an iframe and set the image width to 100%. That way it might set itself to the width of the pop up and allow the height to scale to the width:

Code:

win.document.write('<img src="'+path+'" width="100%">');

Still, it is far, far better to resize your images in an image program so that they will fit in the pop up window to begin with. Optimizing them is also a good idea as, this will make them load faster.

Thread: Cmotion pop-up window question

Thread Tools

Search Thread

Cmotion pop-up window question

Bookmarks

Bookmarks

Posting Permissions