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);

?>


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
There are 3 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki