LuckyZoom

dookie · November 1, 2007

Hi,

Has anyone tried integrating LuckyZoom (http://luckyteam.co.uk/products/LuckyZoom/integration) with oscommerce? I've integrated it with MenaltoGallery themes, but oscommerce....I couldn't figure it out. Some starting points I've done is modify catalog\product_info.php with the following:

Step 1:

Download the shareware: http://luckyteam.co.uk/products/LuckyZoom_shareware.zip

Upload to root of your website.

Step 2:

Open catalog\product_info.php,

Between head tags:

Step 3:

Find:

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

Figure out how to add the following: (note question marks, I need a variable here referencing the image)

<div id="sc? " style="margin: 0px auto 0px auto;" class="luckyZoomSmallImageCont">link to image

<div id="bc?" class="luckyZoomBigImageCont" style="width:300px; height:300px; left: {$lzleft}px; top: 0px">link to image

// <![CDATA[

var settings = {literal}{{/literal}

bigImage_always_visible: false,

drag_mode: false

{literal}}{/literal};

zoom = new luckyZoom('sc{?}', 'sim{?}', 'bc{?}', 'bim{?}', settings);

zoom.initZoom();

// ]]>

</script>

Anyone out there that has any idea on this integration?

Thanks all!

DejaVu · November 1, 2007

I'll help you do this if you wish. I've been messing with mine the last few days for something slightly different. But it's fresh in my mind so should be able to assist.

You know thats the shareware version with Copyright otices all over it? Have you got the Commercial version of it?

My guess would be, you only need to display and image on the screen with no links.

Edited November 1, 2007 by DejaVu

DejaVu · November 1, 2007

Scrap that last statement. It's done.

This is what you need to accomplish -

http://ticklesticks.co.uk/product_info2.ph...products_id=127

Next post is an explaination.

Edited November 1, 2007 by DejaVu

DejaVu · November 1, 2007

This is what I have done -

Upload lz-packed.js to the catalog directory (Or the same directory as product_info.php)

Open your stylesheet.css and add this to the end

/* Copyright 2006 LuckyTeam.co.uk. To use this code on your own site, visit http://luckyteam.co.uk */

.luckyZoomSmallImageCont {
position: relative;
}

.luckyZoomBigImageCont {
overflow: hidden;
position: absolute;
z-index: 100;
border: 1px solid #9E2F2D;
visibility: hidden;
/* display: none; */
}

.luckyZoomHeader {
position: relative;
z-index: 10;
left: 0px;
top: 0px;
font: 10px Tahoma, Verdana, Arial, sans-serif;
color:#fff;
background:#9E2F2D;
padding:3px;
}

.luckyZoomHeader a {
color: #fff;
}

.luckyZoomPup {
z-index				 : 10;
visibility			  : hidden;
position				: absolute;
width				   : 50px;
height				  : 50px;
border: 1px solid #aaa;
background: #ffffff;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}

.luckyZoomSmallImageCont img {
visibility:visible;
}

Open product_info.php

Find this is the <HEAD> Tag at the top

<script language="javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le
ft=150')
}
//--></script>

Replace with this

<script src="lz-packed.js" type="text/javascript"></script>

We CAN do this as we are not using the popup script anymore.

Scroll further down the page (Around Line 108) and look for -

<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>

Replace with -

<?php echo '<div id="sc2" class="luckyZoomSmallImageCont"><img width="125" height="100" id="sim2" src="images/' . $product_info['products_image'] . '" alt=""/><div id="bc2" class="luckyZoomBigImageCont" style="width:300px; height:300px; left: 322px; top: 0px"><img id="bim2" alt="" width="500" height="400" src="images/' . $product_info['products_image'] . '" /></div></div>'; ?>
<script type="text/javascript">
var settings = {
	bigImage_always_visible: false,
	drag_mode: false
};
zoom = new luckyZoom('sc2', 'sim2', 'bc2', 'bim2', settings);
zoom.initZoom();
</script>

If you are going to use this, you will have to make all your images uniformed (All the same size). Mine are all 500x400 (See the code above where this needs to be added). If you dont do this, the Zoom will not operate in the correct place! Also, the thumbnail image can be set to what ever you like, in this example it was set to at 125x100.

The thumbnail on OSCommerce is the large image scaled down.

This decreases load times as it's only loading a single image instead of the image as well as the thumbnail!

Example available -

http://ticklesticks.co.uk/product_info2.ph...products_id=127

Edited November 1, 2007 by DejaVu

dookie · November 2, 2007

WOW ! I can't thank you enough for all your help ! You are the best ! :lol:

dookie · November 2, 2007

WOW ! I can't thank you enough for all your help ! You are the best ! :lol:

I even hate to ask this....is there a way to recycle "popup_image.php" and allow a popup click on the small image? Just thinking web surfers may want to see an entire image in full screen popup.

:blush:

dookie · November 2, 2007

I even hate to ask this....is there a way to recycle "popup_image.php" and allow a popup click on the small image? Just thinking web surfers may want to see an entire image in full screen popup.

:blush:

Nevermind, I figured it out!

In the Head tag:

function popupWindow(url) {

window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res

izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le

ft=150')

}

//--></script>

Find:

<?php echo '<div id="sc2" class="luckyZoomSmallImageCont">...............

Add below this:

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

The result:

A text hyperlink to the fullimage as a popup.

DejaVu · November 2, 2007

:) What a great resource this has turned out to be... Maybe a contribution in there somewhere! LOL

PJ2006 · May 21, 2008

This is what I have done -

Upload lz-packed.js to the catalog directory (Or the same directory as product_info.php)

Open your stylesheet.css and add this to the end
/* Copyright 2006 LuckyTeam.co.uk. To use this code on your own site, visit http://luckyteam.co.uk */

.luckyZoomSmallImageCont {
position: relative;
}

.luckyZoomBigImageCont {
overflow: hidden;
position: absolute;
z-index: 100;
border: 1px solid #9E2F2D;
visibility: hidden;
/* display: none; */
}

.luckyZoomHeader {
position: relative;
z-index: 10;
left: 0px;
top: 0px;
font: 10px Tahoma, Verdana, Arial, sans-serif;
color:#fff;
background:#9E2F2D;
padding:3px;
}

.luckyZoomHeader a {
color: #fff;
}

.luckyZoomPup {
z-index				 : 10;
visibility			  : hidden;
position				: absolute;
width				   : 50px;
height				  : 50px;
border: 1px solid #aaa;
background: #ffffff;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}

.luckyZoomSmallImageCont img {
visibility:visible;
}
Open product_info.php

Find this is the <HEAD> Tag at the top
<script language="javascript"></script>
Replace with this
<script src="lz-packed.js" type="text/javascript"></script>
We CAN do this as we are not using the popup script anymore.

Scroll further down the page (Around Line 108) and look for -
<script language="javascript"></script>
Replace with -
<?php echo '<div id="sc2" class="luckyZoomSmallImageCont"><img width="125" height="100" id="sim2" src="images/' . $product_info['products_image'] . '" alt=""/><div id="bc2" class="luckyZoomBigImageCont" style="width:300px; height:300px; left: 322px; top: 0px"><img id="bim2" alt="" width="500" height="400" src="images/' . $product_info['products_image'] . '" /></div></div>'; ?>
<script type="text/javascript">
var settings = {
	bigImage_always_visible: false,
	drag_mode: false
};
zoom = new luckyZoom('sc2', 'sim2', 'bc2', 'bim2', settings);
zoom.initZoom();
</script>
If you are going to use this, you will have to make all your images uniformed (All the same size). Mine are all 500x400 (See the code above where this needs to be added). If you dont do this, the Zoom will not operate in the correct place! Also, the thumbnail image can be set to what ever you like, in this example it was set to at 125x100.

The thumbnail on OSCommerce is the large image scaled down.

This decreases load times as it's only loading a single image instead of the image as well as the thumbnail!

Example available -

http://ticklesticks.co.uk/product_info2.ph...products_id=127

I tried this integration but it doesn't work for me - has anyone else tried?

Thanks

PJ2006 · May 22, 2008

I tried this integration but it doesn't work for me - has anyone else tried?

Thanks

I spoke to their customer support today and they are working on an integration module for oscommerce, which should be available within the next two weeks - incase anyone else wants to try!

Thanks

Lotti

LuckyZoom

Recommended Posts

dookie

DejaVu

DejaVu

DejaVu

dookie

dookie

dookie

DejaVu

PJ2006

PJ2006

Join the conversation

Browse

Activity