Sardonic76 Posted March 16, 2009 Share Posted March 16, 2009 I found this free javascript image magnifier: jqZoom How do I implement it in my shop? :blink: (note: I have added the additional images contrib) Quote Link to comment Share on other sites More sharing options...
Sardonic76 Posted March 16, 2009 Author Share Posted March 16, 2009 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? Quote Link to comment Share on other sites More sharing options...
Sardonic76 Posted March 17, 2009 Author Share Posted March 17, 2009 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? Quote Link to comment Share on other sites More sharing options...
Sardonic76 Posted March 21, 2009 Author Share Posted March 21, 2009 I still can't get this to work :( PLEASE someone help! Quote Link to comment Share on other sites More sharing options...
Ezboy Posted August 11, 2009 Share Posted August 11, 2009 (edited) 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 August 11, 2009 by Ezboy Quote Link to comment Share on other sites More sharing options...
♥ecartz Posted August 12, 2009 Share Posted August 12, 2009 <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. Quote Always back up before making changes. Link to comment Share on other sites More sharing options...
Ezboy Posted August 12, 2009 Share Posted August 12, 2009 (edited) 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 August 12, 2009 by Ezboy Quote Link to comment Share on other sites More sharing options...
Ezboy Posted August 12, 2009 Share Posted August 12, 2009 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. Quote Link to comment Share on other sites More sharing options...
♥ecartz Posted August 12, 2009 Share Posted August 12, 2009 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. Quote Always back up before making changes. Link to comment Share on other sites More sharing options...
Ezboy Posted August 12, 2009 Share Posted August 12, 2009 (edited) 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 August 12, 2009 by Ezboy Quote Link to comment Share on other sites More sharing options...
Patty Posted January 25, 2011 Share Posted January 25, 2011 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 Quote Patty Link to comment Share on other sites More sharing options...
pdcelec Posted January 25, 2011 Share Posted January 25, 2011 a hover effect can be used with css3 Quote Link to comment Share on other sites More sharing options...
zinor Posted March 5, 2011 Share Posted March 5, 2011 it would be great if anyone can tell us it step by step thanks Quote Link to comment Share on other sites More sharing options...
Blappenshpiel Posted May 11, 2011 Share Posted May 11, 2011 yes it would be great if someone could submit a step by step guide from download to finish, I'm trying but pulling my hair out thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.