Image PopUp when MouseOver, Image ZoomIn when Roll On

[allright]

Dear all,

 

For product introduction image, nowadays there are lots of website using "Image Popup when MouseOver" and "Roll On to Zoom In" technologies, which might be implemented by JavaScript, like the following website:

 

http://www.bananarepublic.com/browse/produ...&pid=548449

 

Is there any similar osCommerce module to enhance the product image feature, besides the plain "click to enlarge". Please kindly advise or give a hint, thank you!

 

Best regards,

allright

[chefgene]

Dear all,

 

For product introduction image, nowadays there are lots of website using "Image Popup when MouseOver" and "Roll On to Zoom In" technologies, which might be implemented by JavaScript, like the following website:

 

http://www.bananarepublic.com/browse/produ...&pid=548449

 

Is there any similar osCommerce module to enhance the product image feature, besides the plain "click to enlarge". Please kindly advise or give a hint, thank you!

 

Best regards,

allright

 

Even better, if anyone can do this:

 

http://www.gap.com/browse/product.do?cid=1...&pid=538195

 

selecting color is displayed and added to order, along with other attributes..I want this interface

[Guest]

Although not quite as cool as the effect shown above, there is a contribution for lightbox and tried to make one using lightview that I was tipped off on.

 

you can check the effect at

http://www.machinesmart.co.uk/product_info...?products_id=34 and click on the image there. Someone has cleaned my contrib up, so should be a bit more eligible.

 

hope that helps. If anyone knows that effect in the post above please let us know as it looks sick. :-"

[allright]

Even better, if anyone can do this:

 

http://www.gap.com/browse/product.do?cid=1...&pid=538195

 

selecting color is displayed and added to order, along with other attributes..I want this interface

 

I got it!! Here is the origin of this function: http://www.magictoolbox.com/magiczoom/, I hope osC community can combine this function into osCommerce image display! expecting.....

 

Best regards,

allright

[Snoboreders]

I got it!! Here is the origin of this function: http://www.magictoolbox.com/magiczoom/, I hope osC community can combine this function into osCommerce image display! expecting.....

 

Best regards,

allright

 

 

Nice work on seeking that out.

 

Pretty awesome display.

[cuivre]

hi there,

 

for me the same question. Inspired by the endless.com website I've finally found this magictoolbox.com/magiczoom website today. Unfortunately there seems to be no OSC contrib so far.

 

Is there anybody who can tell me/us , how to implement the magiczoom code in a OSC shop ?

The magiczoom help/website shows me, it is a piece of cake to implement their java script in a standard html website, but regarding OSC i wouldn't know where to put this code. They don't have a help file for it.

 

In the first place I am looking for some hints and tips in which specific files I can paste their code, and offcourse when somebody could make a contrib of it for OSC, that would be awsome.

 

hopefully you can help me/us .

thanks in advance,

kind regards.

[cuivre]

..... I've finally found this magictoolbox.com/magiczoom website today. Unfortunately there seems to be no OSC contrib so far.

 

Hi all,

The solution to implement magiczoom in an OSC shop is recently given in the dutch osc-forum by 'Joop Buis'.

 

In product_info.php

 

Add:

<?php require(DIR_WS_INCLUDES . 'meta_tags.php'); ?>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

<link rel="stylesheet" type="text/css" href="stylesheet_product.css">

<link rel="stylesheet" type="text/css" href="MagicZoom.css">

<script language="javascript">

 

and

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

</head>

 

Find :

<td align="left" valign="top"><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']), 350, 272, 'hspace="2" vspace="2"') . '<br>' . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], 350, 272, 'hspace="2" vspace="2"') . '<br>' . '</a>'; ?>

</noscript></td>

 

and Replace By:

<td align="left" valign="top">

<?php echo '<a href="'. DIR_WS_IMAGES . $product_info['products_image']. '" class="MagicZoom">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') .'</a>' ?>

<td>

 

In case it's not working...you can find the original posting over here

that's it.

regards,

Edited April 22, 2008 by cuivre

[yuanhouho]

Hi,

 

I'm new here

 

Verycool code

 

trying to use it

Edited May 5, 2008 by yuanhouho

[modernstylerugs]

can anybody confirm they have got this to work?

[cypher1919]

You can also use CSS to achieve this look. Its not as smooth, but it's easier to code and may be worth a look.

 

CSS Popup Image Viewer

 

 

CSS Image Gallery

 

Note: I could never get this to work inside tables. Just FYI. If you can get it to do so, let me know.:)

[artmonkey]

Hello! This is my first post ever! I'm just starting to develop a site with OS Commerce.

 

I'm in a similar predicament to you but a bit further behind.. I've not tried to implement this yet but am browsing forums and websites to find the best solution for what I need for my clothing website. This is similar to above and kind of what I need. It's being used at the following OS website -

 

http://www.honcho-sfx.com/Womens/Brands/Mi...-by-Mighty-Fine

 

It would be good if there is a way of adapting that to work with an easy multi image option like what is discussed at the bottom of the following forum page -

 

http://www.oscommerce.com/forums/lofiversion/i...8832.html" Topic link for multi images

 

So each added picture is loaded up automatically instead of adding the url of the picture for every extra photo on view. I hope I'm making sense as I'm quite new to all of this. If you know of a way of adapting something like this it would make my year!

[BrainJam]

I hope osC community can combine this function into osCommerce image display!

 

I found an oscommerce module for this. I used it and it worked a treat.

 

www.magictoolbox.com/magiczoom_oscommerce/

 

I'm now looking for other really good modules. What do you recommend?

 

Cheers

Edited August 29, 2009 by Jan Zonjee