(this might already be posted but, I couldn't find it anywhere)
For my purposes, I wanted members album thumbnail images to display the fullsize image in a new pop-up window when clicked with none of the image editing features that link.php offers. Here's the code I used to get a new pop-up with no window controls, etc:
Note that width={IMAGEXWIDTH},height={IMAGEYHEIGHT} can be set to a fixed dimension, if you want the same size window each time.
Here's the one drawback with using the X & Y dimensions from each image: the new window seems to put a 15px padding on the image so, you have to resize the window slightly to get the full image. I tried tinkering in download.php to add 25px or so onto each returned IMAGEXWIDTH IMAGEYHEIGHT to compensate for the padding but, no dice. Anyone know a hack for this?
On my tesing browser, a width of +20 and a height of +28 seemed to give an even boarder all the way around (gotta check it on FireFox and the others, though).
0/5
1
2
3
4
5
This thread is closed, so you cannot post a reply.
Comments on Useful jscript image display code
Experienced
Usergroup: Customer
Joined: Mar 31, 2004
Total Topics: 20
Total Comments: 83
(this might already be posted but, I couldn't find it anywhere)
For my purposes, I wanted members album thumbnail images to display the fullsize image in a new pop-up window when clicked with none of the image editing features that link.php offers. Here's the code I used to get a new pop-up with no window controls, etc:
<!-- BEGIN REGULAR IMAGES -->
<td {IMAGEWIDTH} valign="top" class="link" align="center" onClick="window.open('download.php?id={IMAGEID}', 'Image_Display', 'width={IMAGEXWIDTH},height={IMAGEYHEIGHT},left=0,top=0,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1')" onMouseOver="this.style.cursor='hand'" onMouseOut="this.style.cursor='auto'"><IF {SWITCH_TITLES}><IF {IMAGETITLE}>{IMAGETITLE}<br>
</IF></IF> <img src="thumbnail.php?id={IMAGEID}" border="0" {BORDEREFFECT} {MOUSEOVEREFFECT} alt="{IMAGEBOOKMARKTITLE}" onClick="window.open('download.php?id={IMAGEID}', 'Image_Display', 'width={IMAGEXWIDTH},height={IMAGEYHEIGHT},left=0,top=0,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1')" onMouseOver="this.style.cursor='hand'" onMouseOut="this.style.cursor='auto'"> <br>
<IF {THISMEMBERCANREMOVE[{IMAGEOWNERID}]}><br>
<a href="albums.php?action=remove&linkid={IMAGEID}&catid={CATID}">DELETE THIS IMAGE</a></IF> </td>
<!-- END REGULAR IMAGES -->
Note that width={IMAGEXWIDTH},height={IMAGEYHEIGHT} can be set to a fixed dimension, if you want the same size window each time.
Here's the one drawback with using the X & Y dimensions from each image: the new window seems to put a 15px padding on the image so, you have to resize the window slightly to get the full image. I tried tinkering in download.php to add 25px or so onto each returned IMAGEXWIDTH IMAGEYHEIGHT to compensate for the padding but, no dice. Anyone know a hack for this?
developer
Usergroup: Administrator
Joined: Dec 20, 2001
Location: Diamond Springs, California
Total Topics: 61
Total Comments: 7868
Try width=<?php echo {IMAGEXWIDTH} + 25; ?>
Experienced
Usergroup: Customer
Joined: Mar 31, 2004
Total Topics: 20
Total Comments: 83
PHP to the rescue, that's the trick, thanks!
On my tesing browser, a width of +20 and a height of +28 seemed to give an even boarder all the way around (gotta check it on FireFox and the others, though).