Is there a good zoom for pictures?

I tried to incorporate a zoom like cloud zoom or featured image zoomer, but I don't know how or if it can be done coming off a database.  I am selling corals on my website and really need a good rollover zoom for detail.  Maybe a jquery zoom???  Any advice?

you get a product zoom if you have more than one image for the product (you can also change the code so that product zoom is available if only one image is uploaded)

( see
https://www.nopcommerce.com/boards/t/1941/suggestion-for-cart-enable-lightbox-for-product-with-single-images.aspx?p=1
for more info )

also, I think v1.7 has single image zoom option ??

I am looking to incorporate one like magic cloud.  I want to have it look like this.  www.cherrycoral.com

I am currently using jqzoom, no major modifications are needed, just some additional javascript. You can check out an example here:
http://graceormondestore.com/products/164-turquoise-chrysoprase-red-coral-ring.aspx.

If this is what you were looking for let me know and i'll post the code.

gdv wrote:

the link is: http://www.graceormondestore.com/products/164-turquoise-chrysoprase-red-coral-ring.aspx

It is a very nice zoom

I use a free javascript image magnification called PopBox.  Works pretty well and was real simple to implement.  Didn't have any problems adding it to my nopCommerce product pages.  

http://www.c6software.com/Products/PopBox/

An example from my site is at:
https://www.jinfiniti.com/products/96-rna-isolation-service.aspx
Scroll down to the middle or so and there are two images, a plot and a gel image.  Click on the image and it will zoom in.

gdv wrote:

That is exactly what I am looking for.  Can you post the code.  Thanks lots.

Here is what I did.  It works.




<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jqzoom1.0.1.js" type="text/javascript"></script>

<link rel="stylesheet" href="/css/jqzoom.css" type="text/css">
<style type"text/css">
div.notes{
  font-size:12px;
}
div.notes a{
  color:#990000;
}

</style>
<script type="text/javascript">

$(document).ready(function(){
  var options = {
      zoomWidth: 100,
      zoomHeight: 100,
            xOffset: 50,
            yOffset: 50,
            position: "right" //and MORE OPTIONS
};

  $(".jqZoom").jqzoom();
});
</script>
</head>


<ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true"
    EnableScriptLocalization="true" ID="sm1" ScriptMode="Release" CompositeScript-ScriptMode="Release" />
<% if (this.SettingManager.GetSettingValueBoolean("Media.CategoryBreadcrumbEnabled"))
   { %>
<nopCommerce:ProductCategoryBreadcrumb ID="ctrlProductCategoryBreadcrumb" runat="server" />
<% } %>
<div class="clear">
</div>
<div class="product-details-page">
    <div class="product-essential product-details-info">

        <script language="javascript" type="text/javascript">
            function UpdateMainImage(url) {
                var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
                imgMain.src = url;
            }
        </script>
  
        <div class="picture">
            <a runat="server" id="lnkMainLightbox" class="jqZoom">
                <asp:Image ID="defaultImage" runat="server"/>

Hi everebody!
I want to integrate jqzoom into nopcommerce(product page).

In this link is good exaple: http://www.visual-blast.com/source/jqzoom/

how can i integrate ?
thanks a lot ...

thrifty34 wrote:

I've downloaded the java and css files and tried this in version 1.8 and no luck. Are there some modifications for 1.8?