I use it. With some very small modification.
- includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_image.php
Find
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
Replace by
// BOF Image Biggener
//document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
document.write('<?php echo '<a href="javascript:popupImage(\\\'' . $products_image_large . '\\\')">' . zen_image($products_image_medium, addslashes($products_name),MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . TEXT_CLICK_TO_ENLARGE . '<\/a>'; ?>');
// Zen Cart Image Biggener
// (k) Dan Parry (Chrome)
// (c) 2006 Virtua Webtech Ltd
// Email: [email protected] or [email protected]
/* REVISION
07/04/2006
--------------
Made the Biggener DOM compliant
Stripped superfluous code
Adjusted DIV placement coordinates
*/
/*
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
if (document.captureEvents) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getCoords;
} else if (document.all) {
document.onmousemove = getCoords;
}
var fDiv = document.createElement('div'); // create the floating div as a DOM object
fDiv.style.textAlign = 'center'; // centre (yes, I'm British) the text in the DIV
fDiv.style.cursor = 'pointer'; // set the mouse cursor (pointer) to the hand thing
fDiv.style.backgroundColor = '#ffffff'; // set the main background colour of the DIV
fDiv.style.color = '#000000'; // set the default font colour
fDiv.style.zIndex = '999'; // ensure the DIV overlays all other elements (except SELECTs in IE... noted bug)
fDiv.style.visibility = 'hidden'; // initlially hide the DIV
fDiv.style.position = 'absolute'; // allow the DIV to be anywhere on the page (not just the viewport either)
fDiv.style.padding = '7px 7px 7px 5px'; // define some padding to separate the image from the border (in shorthand)
fDiv.style.border = '4px solid #000000'; // define the DIV border (again, in shorthand)
fDiv.onclick = function () { this.style.visibility = 'hidden'; } // hide the DIV on mouse click
// set up the image holder and attach it to the DIV
var fImg = document.createElement('img');
fDiv.appendChild(fImg); // append the image to the div
// set up the div that holds the 'Click to Close' text
var tDiv = document.createElement('div');
tDiv.style.color = '#000000'; // define the colour of the 'Click to Close' text
tDiv.style.backgroundColor = '#ffffff'; // background for the CtC text
tDiv.style.marginTop = '4px'; // set a margin to separate the text from
tDiv.appendChild(document.createTextNode('[ Click to close ]')); // add the CtC text
fDiv.appendChild(tDiv); // attach the CtC div + text to the floater DIV
window.onload = function () { document.body.appendChild(fDiv); }
var nMouseX = '';
var nMouseY = '';
function popupImage(term)
{ // term is the URL passed from the anchor
fImg.src = term;
fDiv.style.top = (nMouseY - (fDiv.offsetHeight / 2)) + 'px';
fDiv.style.left = (nMouseX - (fDiv.offsetWidth / 2)) + 'px';
fDiv.style.visibility = 'visible';
}
function getCoords(e)
{ // monitor mouse movements and record them... Please don't adjust this bit
if (!e) var e = window.event;
if (document.all)
{ // for IE
// document.documentElement... is Standards Compliance mode for IE... clientY is document-relative so has to be offset with scrollTop and scrollLeft
nMouseY = (e.clientY + (document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop));
nMouseX = (e.clientX + (document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft));
} else { // for Gecko-based browsers... no offset necessary as the coords are screen-relative (slightly odd)
nMouseY = (e.pageY + 5);
nMouseX = (e.pageX + 12) ;
}
}
// EOF Image Biggener
- includes/modules/additional_images.php
Find
$script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . $large_link . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
Replace by
// BOF Image Biggener
// $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . $large_link . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
$script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupImage(\\\'' . $products_image_large . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
// EOF Image Biggener
- Add includes/templates/YOUR_TEMPLATE/css/stylesheet_image_biggener.css
div.imageBiggener {
text-align: center;
background: #E9E9E9;
cursor: pointer;
color: Black;
position: absolute;
padding: 10px 10px 10px 10px;
border: 4px solid Blue;
}
img.imageBiggener {
}
div.imageBiggenerText {
color: Navy;
background: #E9E9E9;
margin-top: 4px;
}
NOTE: We are sorry that Andrew is no longer with us.
We are grateful for all his contributions to the Zen Cart community.
