author - malyfred
/ 30. 3. 2005
The basic version of IImage Gallery offers only simple custom patterns for generating code. But you can define your own patterns and improve your galleries as you need.
Open an image in the new window
To open full-size image in new window – try something like this:
$ig_before_each = '<a href="%src" onClick="JavaScript:window.open('%src', '%title', 'scrollbars=yes'); return false" class="gallery_item" target="_blank">';
If user has enabled JavaScript – pop-up window without scrollbars appears when he clicks on the image. User without JavaScript support gets new standard browser window with image. Please note that if you want to have your site XHTML valid you have to remove target="_blank". It seems that there is no "valid" way how to open a new window in XHTML without support of JavaScript at the moment .
Template page
Example of simplest template page:
<html>
<head>
<title><?PHP echo $ig_img_title;?></title>
</head>
<body>
<?PHP
echo "<img src="$ig_img_src" alt="$ig_img_alt" title="$ig_img_title" /><br />";
echo "<strong>$ig_img_title</strong>";
?>
</body>
</html>
Save this example as gallery.php to the root directory of your WP and then modify $ig_before_each:
$ig_before_each = '<a href="http://addressOfYourSite/gallery.php?ig_img_src=%src&ig_img_title=%title" class="gallery_item">';
Template page in the new window
To open new browser window with template page you need to combine both examples:
$ig_before_each = '<a href="http://addressOfYourSite/gallery.php?ig_img_src=%src&ig_img_title=%title" onClick="JavaScript:window.open('http://addressOfYourSite/gallery.php?ig_img_src=%src&ig_img_title=%title', '%title', 'scrollbars=yes'); return false" class="gallery_item" target="_blank">';
Open an image in the new CENTRED window
This example is for a bit advaced users and was provided by A.D.
1. Replace default $ig_before_each with the following:
$ig_before_each = '<a href="#" onClick="openWithSelfMain('%src', '%title', '%width', '%height'); return false" class="gallery_item">';
2. Add commented lines to function "iimage_gallery_create_gallery($text){}" like this:
……….. here: ……………….
$ig_patterns[0] = '/\%src/i';
$ig_patterns[1] = '/\%alt/i';
$ig_patterns[2] = '/\%title/i';
$ig_patterns[3] = '/\%tsrc/i';
/* A.D.'s hack for open-new-imagesized-window */
$ig_patterns[4] = '/\%width/i';
$ig_patterns[5] = '/\%height/i';
/* end A.D.'s hack */
………. and here: …………….
$title = ' ';
$src = $abs_path .md5($matches[$i][1]) .strrchr($matches[$i][1], '.');
/* A.D.'s hack for open-new-imagesized-window */
$im_attr = getimagesize($matches[$i][1]);
$im_width = $im_attr[0];
$im_height = $im_attr[1];
/* end A.D.'s hack */
if(preg_match("/.*?alt="([^"]*)".*?/i",$matches[$i][0],$bar)){
…….. and at last here: ……….
//unset($ip_replacement);
$ig_replacement = array(0 => $matches[$i][1], 1=>$alt, 2=>$title, 3=>$src, 4=>$im_width, 5=>$im_height);
….
3. Create file "yourScript.js" with the following code and put it to Your theme's dir:
function openWithSelfMain(url,name,width,height) {
var options = "width=" + width + ",height=" + height + "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no";
newWindow = window.open(”,”,options);
newWindow.document.open();
newWindow.document.write('<html><title>'+name+'</title><body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onblur="self.close();" onclick="self.close();"><img src="'+url+'" alt="'+name+'" title="'+name+'"></body></html>');
window.self.name = "Picture";
newWindow.moveTo(((screen.availWidth/2)-(width/2)),((screen.availHeight/2)-(height/2)));
newWindow.focus();
}
4. Include following JS code in your theme's header.php before </head>:
<script language="JavaScript" src="<?php bloginfo('template_directory'); ?>/yourScript.js" type="text/javascript"></script>
5. Create Your gallery.
Full-size image will open centered in new fullimage-sized window.
Window will close "onClick" in Internet Explorer.
Window will close "onClick" or "onBlur" in Firefox.
