Image Popup
The following action places a thumbnail image on the page and provides a link to a popup window that contains a larger image. I found this useful for some documentation where I didnt want to clutter the screen up with lots of screenshots, but wanted to make them available for users to click on if they wanted them.
Place this code in the actions directory as imagepop.php
<?php
/*
"imagepop" action
Shows a thumbnail image that opens a popup with the full sized image.
Parameters:
title - title text displayed when mouse hovers above image
class - a class for the image
alt - an alt text
url - URL of /thumbnail/ image to be embedded
This must currently be named with an '_t.', for example:
images/img1_t.png will open images/img1.png
## Most of this code has been shamelessly snarfed from googling
## The javascript is from a posting at
## http://www.forum4designers.com/archive22-2005-1-174242.html
*/
$title="WikiImage";
$class="";
$alt="image";
if (is_array($vars))
{
foreach ($vars as $param => $value)
{
if ($param == 'src' and $vars['url'] == '') {$vars['url']=$value;}
if ($param == 'title') {$title=$this->htmlspecialchars_ent($vars['title']);}
if ($param == 'class') {$class=$this->htmlspecialchars_ent($vars['class']);}
if ($param == 'alt') {$alt=$this->htmlspecialchars_ent($vars['alt']);}
}
}
$url = $this->cleanUrl(trim($vars['url']));
$url_b = str_replace("_t.", ".", $url);
$output = "
<script type=\"text/javascript\">
ImgFun.win = null;
ImgFun.sticky = true;
ImgFun.clickclose = true;
function ImgFun(url, title) {
if (ImgFun.win && !ImgFun.win.closed)
ImgFun.win.close();
var plObj = new Image;
plObj.onload = function() {
var w = this.width;
var h = this.height;
var config = [
'width=' + w , 'height=' + h ,
'left=' + (screen.availWidth - w - 10) * .5 ,
'top=' + (screen.availHeight - h - 10) * .5 ,
'status=0'
].join(',');
ImgFun.HTML = [
'<html><head><title>' + title + '</title></head>' ,
'<body style=\"margin:0;background:black;overflow:hidden;\"' ,
((ImgFun.sticky) ? 'onblur=\"setTimeout(\'top.focus()\',200)\"' : ''),
((ImgFun.clickclose) ? 'onclick=\"top.close()\"' : '') ,
'><img style=\"border-width:0;cursor:pointer;\"' ,
((ImgFun.clickclose) ? 'title=\"click to close\"' : '') ,
' src=\"' + this.src + '\"></body></html>'
].join('');
ImgFun.win = window.open('javascript:opener.ImgFun.HTML', 'picwin', config);
if (ImgFun.win && !ImgFun.win && ImgFun.win.focus)
ImgFun.win.focus();
}
plObj.onerror = function() {
alert('Larger size not available, sorry...');
}
plObj.alt = title;
plObj.src = url;
return false;
}
</script>
<a title=\"".$alt."\" href=\"".$url_b."\" target=\"_blank\" onclick=\"ImgFun(this.href,this.title
); return false;\"><img class=\"".$class."\" src=\"".$url."\" alt=\"".$alt."\"></a>";
// Had to comment this out to make things work ;->
#$output = $this->ReturnSafeHTML($output);
print($output);
?>
/*
"imagepop" action
Shows a thumbnail image that opens a popup with the full sized image.
Parameters:
title - title text displayed when mouse hovers above image
class - a class for the image
alt - an alt text
url - URL of /thumbnail/ image to be embedded
This must currently be named with an '_t.', for example:
images/img1_t.png will open images/img1.png
## Most of this code has been shamelessly snarfed from googling
## The javascript is from a posting at
## http://www.forum4designers.com/archive22-2005-1-174242.html
*/
$title="WikiImage";
$class="";
$alt="image";
if (is_array($vars))
{
foreach ($vars as $param => $value)
{
if ($param == 'src' and $vars['url'] == '') {$vars['url']=$value;}
if ($param == 'title') {$title=$this->htmlspecialchars_ent($vars['title']);}
if ($param == 'class') {$class=$this->htmlspecialchars_ent($vars['class']);}
if ($param == 'alt') {$alt=$this->htmlspecialchars_ent($vars['alt']);}
}
}
$url = $this->cleanUrl(trim($vars['url']));
$url_b = str_replace("_t.", ".", $url);
$output = "
<script type=\"text/javascript\">
ImgFun.win = null;
ImgFun.sticky = true;
ImgFun.clickclose = true;
function ImgFun(url, title) {
if (ImgFun.win && !ImgFun.win.closed)
ImgFun.win.close();
var plObj = new Image;
plObj.onload = function() {
var w = this.width;
var h = this.height;
var config = [
'width=' + w , 'height=' + h ,
'left=' + (screen.availWidth - w - 10) * .5 ,
'top=' + (screen.availHeight - h - 10) * .5 ,
'status=0'
].join(',');
ImgFun.HTML = [
'<html><head><title>' + title + '</title></head>' ,
'<body style=\"margin:0;background:black;overflow:hidden;\"' ,
((ImgFun.sticky) ? 'onblur=\"setTimeout(\'top.focus()\',200)\"' : ''),
((ImgFun.clickclose) ? 'onclick=\"top.close()\"' : '') ,
'><img style=\"border-width:0;cursor:pointer;\"' ,
((ImgFun.clickclose) ? 'title=\"click to close\"' : '') ,
' src=\"' + this.src + '\"></body></html>'
].join('');
ImgFun.win = window.open('javascript:opener.ImgFun.HTML', 'picwin', config);
if (ImgFun.win && !ImgFun.win && ImgFun.win.focus)
ImgFun.win.focus();
}
plObj.onerror = function() {
alert('Larger size not available, sorry...');
}
plObj.alt = title;
plObj.src = url;
return false;
}
</script>
<a title=\"".$alt."\" href=\"".$url_b."\" target=\"_blank\" onclick=\"ImgFun(this.href,this.title
); return false;\"><img class=\"".$class."\" src=\"".$url."\" alt=\"".$alt."\"></a>";
// Had to comment this out to make things work ;->
#$output = $this->ReturnSafeHTML($output);
print($output);
?>
Then in wiki enter:
{{imagepop url=image/pict_t.jpg}}
The thumbnail must currently be named with a '_t.' in it, and the code will strip the '_t' to display the larger image. So, pict_t.jpg is the thumbnail, and pict.jpg is the larger image.
The javascript will auto re-size the popup to match the size of the image, and will close the window if the image is clicked.
Have fun.
-AdamCrews
CategoryUserContributions
Therefore I modified the PHP to eliminate the _t piece and I simply use a small WIDTH and HEIGHT parameter when the image is displayed - that way you can see a thumbnail version of the SAME image
David Jameson
Dav