Announcement

Collapse
No announcement yet.

Implementing 3DZoom on an old template

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Implementing 3DZoom on an old template

    I'm using a template from the old version and I've done a lot of customization that I'm not willing to lose. So, I'm attempting to copy the 3DZoom code from the listing_X.html template from the common folder.

    I see some code at the very top of the file, some code for <!--START: image1-->, etc. in the middle of the file, and some code at the very of the file.

    The code at the top and the bottom seems straight forward enough to copy, but it's the <!--START: image1--> code that has me scratching my head.

    Has anyone done this yet? Can you tell me exactly what I'm supposed to copy?

    Thank you!

  • #2
    The changes are pretty big, there is a bunch of javascript, a javascript include, and changes to the section where image 1 and the additional images display.

    Here is what you need, but, i would suggest you get an HTML developer to do them unless you know html well as with Javascript, a misplaced colon can essentially kill the entire page, so you want to make sure backups are made before you do anything.

    JS on top of template you need to add (below listing.js):
    HTML Code:
    <script language="javascript" src="assets/templates/common/3dzoom/magiczoomplus.js" type="text/javascript"></script> 
    <link href="assets/templates/common/3dzoom/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/> 
    <script type="text/javascript"> 
     MagicZoomPlus.options = {
      'opacity':'65',
      'expand-effect':'elastic',
      'background-opacity':'50',
      'zoom-fade':'true',
      'zoom-position':'right',
      'fit-zoom-window':'false'
     }
    </script> 
    IMAGE1
    HTML Code:
    <!--START: image1--> 
      <a href="[image1]" class="MagicZoomPlus"  id="listing_main_image_link"><img src="thumbnail.asp?file=[image1]&maxx=300&maxy=0" align="middle" border="0" id="large" name="large"></a>
    ADDITIONAL IMAGES
    For all additional images repeat changing the 2 for a 3, and so on
    HTML Code:
    <a href="[image2]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image2]&maxx=300&maxy=[image_medium_h" onclick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=75&maxy=0" name="pimage2"></a>

    Javascript on the bottom of listing_x.html,

    HTML Code:
    <script language="javascript"><!--
    //thumbnail script
    var image1,image2,image3,image4,selectedimage;
    var imagemaxwidth, imagemaxheight
    
    imagemaxwidth=[image_medium_w];
    imagemaxheight=0;
    
    image1="[image1]";
    image2="[image2]";
    image3="[image3]";
    image4="[image4]";
    imagecaption1="[imagecaption1]";
    imagecaption2="[imagecaption2]";
    imagecaption3="[imagecaption3]";
    imagecaption4="[imagecaption4]";
    selectedimage='[image1]'; //pre load image1
    zoom_enable=[3dzoom_enabled]; //0 = zoomify | 1 = magiczoom
    
    function image_click(clicks)
    {
        if (document.getElementById('listing_main_image_link')!=undefined)
        {
    	if (zoom_enable==1)
    	{
    		selectedimage=eval('image'+clicks);
    		MagicZoomPlus.update('listing_main_image_link', selectedimage, 'thumbnail.asp?file=' + selectedimage + '&maxx='+imagemaxwidth+'&maxy='+imagemaxheight, 'show-title: false');
    		changecontent("imagecaptiont",eval('imagecaption'+clicks));
    		document.getElementById('listing_main_image_link').href=this.name;
    	}else
    	{
    		
    		selectedimage=eval('image'+clicks);
    		document.getElementById('large').src='thumbnail.asp?file=' + selectedimage + '&maxx='+imagemaxwidth+'&maxy='+imagemaxheight;
    		document.getElementById('listing_main_image_link').href='#';
    		document.getElementById('listing_main_image_link').onclick=zoomify_popup;
    		changecontent("imagecaptiont",eval('imagecaption'+clicks));
    	}}
    }
    function zoomify_popup()
    {
    popupsimple('zoomify.asp?catalogid=[catalogid]&img=' + selectedimage ,500,500);
    }
    
    function check_stock(what,partnum)
    {
    	var soption;
    	var i;
    	var product_availability='[availability]';
    	var backordermode='[allowbackorder]';
    	var avail_instock='[productAvailability-Instock]';
    	var avail_outofstock='[productAvailability-Outofstock]';
    	var avail_backorder='[productAvailability-Backorder]';
    	var optionfound=0;
    
    	if (inventoryarray[catalogid].length==0) //if there is no advanced options, don't look for stock
    	{
    		return true;
    	}
    	else
    	{
    		for(i=0;i<inventoryarray[catalogid].length;i++) 
    		{
    			soption=inventoryarray[catalogid][i];
    			field_array=soption.split("-");
    			//Dynamic Part for advanced options
    			if (typeof((idarray[catalogid])) != "undefined")
    			{
    				soptionid=idarray[catalogid][i]; 
    				aoprice=aopricearray[catalogid][i]; 
    				if (field_array[0]==partnum)
    				{
    					if (soptionid != '')
    						changeid(soptionid); 
    					if (aoprice != '0')
    						changeprice(aoprice);
    				}
    			}
    			
    			if ((field_array[0]==partnum))
    			{	
    				changecontent("product_inventory",field_array[1]);
    				if (eval(GetValue(what,"qty-0"))>field_array[1]) 
    				{
    					optionfound=optionfound+1;
    					if (backordermode==1)
    					{
    						changecontent("availability",avail_backorder); 
    						return true;
    						optionfound=optionfound+1;
    					}
    					else 
    					{
    						changecontent("availability",avail_outofstock);
    						alert("The options you selected are not currently available.");
    						optionfound=optionfound+2;
    						return false;
    					}
    				}
    
    			}
    		}
    
    		if (optionfound==0)
    		{ 
    			changecontent("availability",product_availability);
    			return true;
    		}
    		
    		if (optionfound==1)
    		{
    			changecontent("availability",avail_instock);
    			return true;
    		}
    	}
    }
    
    
    function add_wishlist()
    {
    	document.add.action = "add_cart.asp?action=addWishList";
    	document.add.submit();
    }
    
    function add_giftregistry()
    {
    	document.add.action = "add_cart.asp?action=addGiftRegistry";
    	document.add.submit();
    }
    
    function check_and_add(formx)
    {
    
    	if (document.add.std_price==null)
    	{
    		document.add.submit();
    	}
    	else
    	{
    		var readytoadd=validateValues(formx,1)
    		if (readytoadd==true)
    		{
    			document.add.submit();
    		}
    	}
    }
    
    // --></script>
    <script language="javascript">
    var currency_symbol='[currency]';
    var prod_decimal_places='[prod_decimal_places]';
    validateValues(document.add,1);
    window.setTimeout("image_click(1)",100);
    </script>
    That should do it...
    ----------------------------
    Gonzalo Gil
    3dCart Support
    800-828-6650 x111

    Comment


    • #3
      LOL! Holy cow! Uhm, yea! Those changes are pretty big.

      I admit I only have basic html knowledge and no JavaScript knowledge. I have already made a backup and will give it a shot and see what happens!

      Thanks so much for all of this, Gonzalo!!!

      Here goes... :o

      Comment


      • #4
        I've implemented this feature on a few old customized templates. (This is one of my favorite new features).

        I actually made pretty much the same changes that Gonzalo highlighted and it went pretty smoothly. However, I didn't make any changes to the code for image2, image3, etc... I did a quick comparison between the old and new code for these items and I didn't notice any difference - but then again I did a quick take. Since this is what he suggested, I may go ahead and just copy and paste the code to ensure that everything's in there.

        But so far so good.
        Last edited by ScribeTime; 07-15-2010, 07:26 AM.

        Comment


        • #5
          Thanks, ScribeTime!

          The first attempt was pretty successful. I did everything as Gonzalo suggested and for the most part it works beautifully.

          However, my thumbnails are acting weird.

          For example, for a product that has four images the thumbnail for Image1 is not showing up at all. Image2 is showing up twice instead. Image3 and Image4 are fine. If I click on any thumbnail I only get Image2.

          The popup gallery works just fine and it's AWESOME!!! I love it!

          I might try reverting the additional images to the old code as you've mentioned and see what happens.

          Thanks for your reply! :)

          Comment


          • #6
            OK, I just reverted back and the thumbnails work again, but in the pop-up gallery the arrows for moving between all images are no longer there and THAT is a super nice feature!

            More sleuthing!

            Comment


            • #7
              Wow, well you were very close, probably just missed changing a "2" to a "3" or whatever when doing the extra images 2,3,4 ...

              Also i just saw something:

              HTML Code:
              <a href="[image2]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image2]&maxx=300&maxy=[image_medium_h" onclick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=75&maxy=0" name="pimage2"></a>
              was supposed to be

              HTML Code:
              <a href="[image2]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image2]&maxx=300&maxy=[image_medium_h]" onclick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=75&maxy=0" name="pimage2"></a>
              Note "[image_medium_h]" the tag on the one i posted was broken..
              ----------------------------
              Gonzalo Gil
              3dCart Support
              800-828-6650 x111

              Comment


              • #8
                Here's where I am. So close!

                All the correct images appear including the correct thumbnails.
                The pop-up gallery works great and is complete with forward/back arrows. yay!

                The only thing not working correctly is whenever I click on a thumbnail, any thumbnail, the larger image is always image2 and I can't even click back to image1.

                Here's the code for image2. It's a combination of the old and new code. I copied the same code for image3 and image4 (minus the image1 stuff) and I'm pretty confident that imageX is correct in all places for image3 and image4.

                <!--START: image2-->
                <td align="center" class="price-info"><a href="[image1]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image1]&maxx=300&maxy=[image_medium_h]" onclick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image1]&maxx=75&maxy=0" name="pimage1"></a>
                </td>
                <td align="center" class="price-info"><a href="[image2]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image2]&maxx=300&maxy=[image_medium_h]" onclick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=75&maxy=0" name="pimage2"></a>
                </td>
                <!--END: image2-->

                Comment


                • #9
                  ok, easy fix :)

                  Look for "image_click(2)"

                  make sure that changes for each image,

                  1 for image1, 2 for image2..and so on.

                  All of them point to image_click(2) right now, so thats why all of them show image2 ;)
                  ----------------------------
                  Gonzalo Gil
                  3dCart Support
                  800-828-6650 x111

                  Comment


                  • #10
                    woohoo! :) I JUST figured that out myself, too, while comparing with some other code! yay! Everything works wonderfully now!

                    Thanks SO much for your help! You're a rock star!

                    Comment


                    • #11
                      Image file

                      I'm about to do the same thing here. I'm just curious how the zoom works. Does it reference a different image? Otherwise, wouldn't you be serving up a huge image to every browser and your bandwidth usage would go up pretty significantly while your page load speed went down (especially on mobile browsers)? If it does reference a different image, what's the naming (or folder) scheme?

                      Comment


                      • #12
                        can you post the website so i can see an example of the zoom feature and photo gallery feature. I wanna see if its worth doing the change.

                        Comment

                        Working...
                        X