Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Image PopUp when MouseOver, Image ZoomIn when Roll On


allright

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

Link to comment
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

Link to comment
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. :-"

Link to comment
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

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

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.

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

  • 2 weeks later...
  • 4 months later...

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.

Link to comment
Share on other sites

  • 4 weeks later...

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!

Link to comment
Share on other sites

  • 10 months later...
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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...