Revision history for ImagePop
Revision [19166]
Last edited on 2008-01-28 00:14:24 by AdamCrews [Modified links pointing to docs server]No Differences
Additions:
"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
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']);}
}
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
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
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']);}
}
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
Deletions:
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
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']);}
}
if (ImgFun.win
Additions:
"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
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']);}
}
if (ImgFun.win
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
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']);}
}
if (ImgFun.win
Deletions:
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
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']);}
}
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
