Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Image zoom


Sardonic76

Recommended Posts

I have figured out how to assign the script to a specific image. So far so good.

 

My problem though is I do not know how to implement it on the various images that show up on product info page.

Any clues?

Link to comment
Share on other sites

Thanks, I made the changes.

 

My problem now though is that I have installed the additional images contrib and I can't get them both to work simultaniously.

So far I can only seem to have EITHER additional images and pop up function OR zoom function for only 1 image.

I don't know what parameters to change to make them work together.

 

Any ideas?

Link to comment
Share on other sites

  • 4 months later...

Hi guys

 

I'm trying to incorporate this image zoom into my site but I'm not doing well and keep getting errors thrown up.

 

All instructions have been followed. What's left is changing the actual href image link which is giving me hell as I can't just get it right. The following is my original link for the image: don't ask what <noscript> is as I don't know. I'm crap at programing!

 

<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'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '') . '</a>'; ?></noscript>

 

According to the instructions example, I need to turn above to something that look like below:

 

<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">

<img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;">

</a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select>

 

Could anyone help please.

 

P.S My original image is large enough in the first place and only reduced in size by the product_info.php script. I want the zoomer to just use the same image for the zoomed version.

 

Thanks in advance.

Edited by Ezboy
Link to comment
Share on other sites

<a href="<?php echo DIR_WS_IMAGES . $product_info['products_image']; ?>" class="jqzoom" style="" title="<?php echo addslashes($product_info['products_name']); ?>">
<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'style="border: 1px solid #666;"'); ?><br /><?php echo TEXT_CLICK_TO_ENLARGE; ?>
</a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select>

Note that the tep_image call should actually be to something other than your original image. It's designed to work with a small image.

Always back up before making changes.

Link to comment
Share on other sites

Matt, thank you very much for your reply. I could have never constructed the code like that! Any way, I replaced my code (the part shown in my message) with yours. The good thing is that I got no errors. So far so good! However, nothing happens when I place the pointer on the image in product_info page. In other words, it is still not working for some reason.

 

Would you know what I'm doing wrong here?

 

Much obliged.

Edited by Ezboy
Link to comment
Share on other sites

Sorry Matt, my mistake! Your code is working and the magnification is running on the image. But why did I end up with two images on the page? The magnification action works on the bottom one which is all that's required. Is the first echo command required in your code?

 

Many thanks again.

Link to comment
Share on other sites

The original code to display the image on the product info page looks like this:

<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>
<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'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

The way that it works is that if users have javascript enabled in their browsers, it uses the first part in the script tags. If they do not have javascript running, it uses the second part (inside the noscript tags). So if you first try it by adding the code inside in the noscript tags, it won't work as javascript enabled browsers won't see it. If you take out the noscript tags but leave the script block, then the image will show once for the script block (if javascript is enabled) and once for your code.

 

If you replace both the script and the noscript blocks, it should have the effect that you want. However, it won't show a popup image if the browser does not have javascript enabled.

Always back up before making changes.

Link to comment
Share on other sites

Thanks very much Matt. Now I undrestand what the noscript code is for. I actually took the noscript part out all together at first. But reading your comments, I tried to put them back in. Now it looks like this:

 

<div class="main prod_info" style="width:<?php echo (SMALL_IMAGE_WIDTH +23);?>px;">

 

<?php echo tep_draw_prod_pic_top();?><script language="javascript"></script>

<a href="<?php echo DIR_WS_IMAGES . $product_info['products_image']; ?>" class="jqzoom" style="" title="<?php echo addslashes($product_info['products_name']); ?>"><?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'style=""'); ?></a>

<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'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '') . '</a>'; ?></noscript>

<?php echo tep_draw_prod_pic_bottom();?>

 

<script language="javascript"><!--

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

//--></script>

<noscript><?php echo '<a class="enlarge" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?></noscript></div>

<div class="main"><div class="desc2"><?php echo stripslashes($product_info['products_description']); ?></div><br>

<br><div><?php echo $products_price?></div></div>

 

I now get one image which magnifies ok. I don't know if the above works ok if browser javascript is disabled though.

 

Many thanks again for your help.

Edited by Ezboy
Link to comment
Share on other sites

  • 1 year later...

Hi, guys.

 

I'm looking for something like this too.

Is there any contribution to integrate this? I couldn't find it on my searches. And since I'm no programmer, it would be impossible for me to put this together by myself.

Can anybody help? I'm willing to pay to have this done.

 

TIA

Patty

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

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