Any one have Zen Image Biggener for 1.3.0.1?

**wtashby** · 11 May 2006, 04:21 AM

Hi,

Has anyone that uses Zen Image Biggener managed to get it to work with 1.3.0.1?

If so, I sure would love to have the updated files or fixes

Thanks

**a_berezin** · 11 May 2006, 06:59 AM

I use it. With some very small modification.
1. includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_image.php
Find

Code:

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

Code:

// 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: admin@chrome.me.uk or admin@virtuawebtech.co.uk

/*	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

2. includes/modules/additional_images.php
Find

Code:

$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

Code:

// 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

3. Add includes/templates/YOUR_TEMPLATE/css/stylesheet_image_biggener.css

Code:

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

**wtashby** · 12 May 2006, 01:16 AM

Thank you Andrew! That worked perfectly!

You should offer this up as a contribution modification for anyone that want's it.

**a_berezin** · 12 May 2006, 09:02 AM

Hi wtashby,

Originally Posted by wtashby

You should offer this up as a contribution modification for anyone that want's it.

It's not my contribution:
// Zen Cart Image Biggener
// (k) Dan Parry (Chrome)
// (c) 2006 Virtua Webtech Ltd
// Email: admin AT chrome DOT me DOT uk or admin AT virtuawebtech DOT co DOT uk

**Chrome** · 12 May 2006, 11:53 AM

Hi all

Wow a new thread!

Andrew thanks for the support... I haven't had any time at all to look at Zen Cart 1.3, though I have set up a test shop that I plan on playing with

Also I've had an idea on how to integrate ZCIB into the structure without any code modification... in theory :)

I'm going to try an Ajax image locater... It might work... Stranger things have happened :)

I'll try to get something sorted as soon as I can

Cheers

Dan

**magicpants** · 22 May 2006, 03:21 PM

anybody have the problem where the first time they click on the medium image, Image Biggener (cool name, by the way) expands in the bottom right corner? Click on it again to close and then reopen it, it's normal. It only displays off-center the first time you expand the image.

is this happening to everyone? or did i do something weird in integrating it? anybody know how to fix it? Thanks...

**Chrome** · 23 May 2006, 10:18 AM

Hi

Sorry I haven't updated yet... I will be looking into upgrading ZCIB this week for 1.3... No guarantees on time I'm afraid but I'll do my best

What browser are you viewing from magicpants (what a great name)? Though it may well be something I've neglected to set

Cheers

Dan

**magicpants** · 30 May 2006, 09:43 AM

Hey Chrome,

The problem with the pop-up not being centered happens in both IE and Firefox. I'll send you a link to my site on PM so you can see --- and maybe it'll give a clue what's happening.

Thanks for your help! MP

**Chrome** · 2 Jun 2006, 02:32 PM

Hi

Send me the link and I'll check it out :-)

It is a bit odd that it doesn't centre but that's the way things go sometimes... The more I can get fixed on this the better

Unfortunately I haven't had enough time to fully complete this contrib yet, but I am hoping for some free time next week (free time? What's that?)

Cheers

Dan

**titangen** · 6 Jun 2006, 12:40 PM

Hi all ,

Please read my thread here http://www.zen-cart.com/forum/showthread.php?t=37657

because there is somthing wrong with this contrib and IH1

Have you a solution ?

Thanks in advance

Greetz

Chris