osCommerce Community Support Forums

dookie

Nov 1 2007, 05:15 AM

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:
<script src="lz-packed.js" type="text/javascript"></script>
<link rel="stylesheet" href="LuckyZoom.css"}" type="text/css" media="screen" />

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

<script type="text/javascript">
// <![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

Nov 1 2007, 08:49 PM

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.

DejaVu

Nov 1 2007, 09:32 PM

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.

DejaVu

Nov 1 2007, 09:54 PM

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

CODE

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

CODE

Replace with this

CODE

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

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

CODE

Replace with -

CODE

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

dookie

Nov 2 2007, 02:41 AM

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

dookie

Nov 2 2007, 03:37 AM

QUOTE (dookie @ Nov 2 2007, 02:41 AM)

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

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.

dookie

Nov 2 2007, 03:56 AM

QUOTE (dookie @ Nov 2 2007, 03:37 AM)

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.

Nevermind, I figured it out!

In the Head tag:
<script language="javascript"></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

Nov 2 2007, 02:36 PM

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

PJ2006

May 21 2008, 09:20 PM

QUOTE (DejaVu @ Nov 1 2007, 10:54 PM)

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

CODE

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

CODE

Replace with this

CODE

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

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

CODE

Replace with -

CODE

<?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, 09:59 AM

QUOTE (PJ2006 @ May 21 2008, 10:20 PM)

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

OSCOMMERCE SUPPORT CALL 702-453-3332