Jump to content
Sign in to follow this  
allright

Image PopUp when MouseOver, Image ZoomIn when Roll On

Recommended Posts

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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. :-"


Doh!!!!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
..... 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 by cuivre

Share this post


Link to post
Share on other sites

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.:)


Nothing Difficult is ever easy.

 

Roadmap 4 Newbies

 

Paypal Standard Setup

 

Toolbox: Gimp, DreamweaverCS3, Bluefish, kwrite, Konsole, ImageMagick, personal shell scripts, Eclipse, and Amarok(tunes produce better code)

 

There are 10 types of ppl in this world. Those who understand binary, and those who don't.

 

I code. Thats all I do. Morning, noon, and night. I dream in hexadecimal.

Share this post


Link to post
Share on other sites

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://forums.oscommerce.com/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!

Share this post


Link to post
Share on other sites
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 by Jan Zonjee

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×