1. Introduction

Those who have done e-commerce should be familiar with it. When we introduce a physical product, it is indispensable to have a picture of the product, which is the most intuitive understanding of the product for users. From the previous e-commerce websites including the present, the picture of the product in the product details page generally accounts for a large part. In addition, the general typesetting method is to display the pictures from all angles of the product from top to bottom or to use the rotation chart (refer to Taobao and Jd.com, etc.). Because this is the simplest method to enable users to understand the appearance of the product carefully, almost all e-commerce companies will join this link at present. Of course, we are not here to replace this way of presentation, but we add a way to make it easier for users to understand the actual picture of the product, and in the layout of only one image. Let’s take a look at the effect of a 360 degree rotation product



2. Preliminary work

Well, you might ask, how do you make pictures like this? This is shot by the photographer from all angles of the product, and a certain shooting environment needs to be built, and the degree of each Angle is the same, so the rotating tray should be used. Here we will not carefully explain the shooting process, interested friends can check their own information, we are here to talk about the effect of the front end

3.HTML code structure

Generally speaking, when using plug-ins, firstly, we want as little HTML code as possible, secondly, we can add some configuration items, and thirdly, it is very simple to use. This plug-in is very simple, so the HTML code only needs one line

<div id="3dplayer" class='proPlayer_container' data-width='550' data-height='400' data-path='https://img.ingping.com/images/pro_3dImgs/320/6198/'></div>Copy the code

This line of HTML code is a container, which belongs to the outermost layer. The class inside it controls the layout style, data-width and data-height set the size of the image canvas, and data-path is the image path of 23 images. For example 1.jpg 2.jpg 3.jpg…… This path is the folder path

4. The JavaScript code



If you can zoom in on this image, the plugin code has three objects: proPlayer, proImg, and controlPanel

ProPlayer is the main object, which is also understood as the object from which the code starts running.

ProImg is the product image object used to load 23 images

A controlPanel is a controlPanel that can be understood as the layer in which the user interacts

We start from each object one by one, but first we detect whether the user’s device is a computer or a mobile terminal, this has a lot to do with our event operation, because in JS, the event object of the computer and mobile terminal is different.

  //detect events  
 var hasTouch = 'ontouchstart' in window,  
     startEvent = hasTouch ? 'touchstart' : 'mousedown', 
     moveEvent = hasTouch ? 'touchmove' : 'mousemove',  
     endEvent = hasTouch ? 'touchend' : 'mouseup',  
     cancelEvent = hasTouch ? 'touchcancel' : 'mouseup';Copy the code

ProPlayer object properties:

  var proPlayer = {};  
  proPlayer.id = '3dplayer'; proPlayer.canvasIndex=1; // Canvas index proplayer.debug =false;  
  proPlayer.width=500;  
  proPlayer.height=333;  
  proPlayer.banner = ' ';Copy the code

ProPlayer object methods:

proPlayer.load = function(){    
    proPlayer.init_debug();    
    //set banner    
    var banner = '<div><img src="'+proPlayer.banner+'" alt=""></div>';      
    $(The '#'+proPlayer.id).before(banner);      
    //set attr      
    proPlayer.width = $(The '#'+proPlayer.id).attr('data-width');      
    proPlayer.height = $(The '#'+proPlayer.id).attr('data-height'); Proim. path = $(The '#'+proPlayer.id).attr('data-path');      
    // preload images      
    proImg.preloadImages(function(index,isCompleted){        
        if(isCompleted){          
            //showTip('yes')          
            proPlayer.init();        
        }else{ //showTip(index); }}); }Copy the code

This method is executed when the code is first run. It is written to get the width and height of the Settings, the path, and the loading image, and then initialize proplayer.init () after loading.

Code initialization

//player init on image loaded  
    proPlayer.init = function(){    
    proPlayer.createControlPanel();    
    //detect mouse event    
    controlPanel.setControlPanel();    
    //create Images canvas    
    proPlayer.createCanvas();    
    //show first image    
    $('#3dplayer_1').show();    
    proPlayer.rotate();  
}Copy the code

As you can see from the code, first create the control panel, set the event listener for the control panel, and draw the image onto the canvas. Let’s look at the detailed code for these methods

proPlayer.createControlPanel();

proPlayer.createControlPanel=function(){    
    var panel = '<canvas id="d3player_0" width="'+proPlayer.width+'" height="'+proPlayer.height+'" style="z-index:99"></canvas>'    
    $(The '#'+proPlayer.id).prepend(panel)  
}Copy the code

controlPanel.setControlPanel();

controlPanel.setControlPanel=function(){    
    var canvas = document.getElementById('d3player_0');
    document.addEventListener(startEvent, function(){      
        controlPanel.mousedown = true;        
        //showTip('mousedown');    
    },false)      
    document.addEventListener(endEvent, function(){        
        controlPanel.mousedown = false;        
        //showTip('mouseup');      
    })         
    canvas.addEventListener(moveEvent, function (e) {       
         if(controlPanel.mousedown){            
            var x = e.clientX || e.touches[0].screenX;              
            var preX = controlPanel.preX;              
            //showTip(preX+':'+x); // Move when greater than 5if(Math.abs(x-preX)>=controlPanel.speed){ controlPanel.callPlayer(preX,x); controlPanel.preX = x; }}},false);  
}Copy the code

The above method is also one of the core of the plugin, listening for events and then changing the value of the control panel properties to trigger the corresponding Canvas display hide

proPlayer.createCanvas();

proPlayer.createCanvas = function(){    
    //create canvas from img    
    for(var i=1; i<=proImg.count; i++){ var canvas_id ="3dplayer_"+i      
        var canvas_str = '<canvas id="'+canvas_id+'" style="display: none;" width="'+proPlayer.width+'" height="'+proPlayer.height+'"></canvas>';      
        $(The '#'+proPlayer.id).append(canvas_str);      
        var canvas = document.getElementById(canvas_id);      
        var context = canvas.getContext('2d'); var imageObj = proImg.list[i]; Context. DrawImage (imageObj, 0, 0, imageObj width, imageObj. Height, 0, 0, canvas, width, canvas. Height); }}Copy the code

Draw 23 images in a loop on each canvas in sequence and insert them into the DOM

. Ok, let’s return to controlPanel setControlPanel (), we see the last one to monitor events, save the coordinates of the mouse or touch events object, save the current coordinates, and again on a coordinate as the absolute value of difference and speed comparison (variable speed can be set, It controls how sensitive we turn, or how fast or slow we turn.)

And then we decide if we’re going to rotate left or right

controlPanel.callPlayer = function(preX,currX){    
    if(preX > currX)      
        proPlayer.turnLeft();    
    else      
        proPlayer.turnRight();  
}Copy the code

Judge the code left or right

proPlayer.turn = function(turn){ var turn = turn; Proplayer. canvasIndex == 1 var index = proplayer. canvasIndex;if(turn){      
        index--;      
        if(index<1)        
            index=23;    
     }else{      
        index++;      
        if(index>23)        
           index=1;    
     }    
        return index;  
 }
  
  proPlayer.turnLeft=function(){    
     var index = proPlayer.turn(false);    
     proPlayer.show(index);  
  }
  proPlayer.turnRight=function(){    
    var index = proPlayer.turn(true);    
    proPlayer.show(index);  
  }Copy the code

Proplayer.show () displays the image before or after the current canvas

proPlayer.show = function(index){    
    var preIndex = proPlayer.canvasIndex;      
    var currIndex = index;      
    $('#3dplayer_'+currIndex).show();      
    $('#3dplayer_'+preIndex).hide();      
    proPlayer.canvasIndex = index;  
}Copy the code

Well, most of the code for this plug-in is still relatively simple, relatively compact, and extensible, need to add new functions directly add properties or methods in the object, for example, we want to rotate the canvas automatically when the image is finished loading

Add a method to the proPlayer object:

proPlayer.rotate = function(){    
    var i = 1;        
    var rotate = setInterval(function() {if(i=== 23){            
            $("#3dplayer_1").show();            
            $("#d3player_0").show();            
            clearInterval(rotate);          
          }         
         $("#3dplayer canvas").hide();          
         $("#3dplayer_"+i).show();          
         $("#d3player_0").show(); i++; }}, 50)Copy the code

Then call it as the last step in the proplayer.init () method

5. To summarize

I believe this kind of demand is quite common in the field of e-commerce. The user experience is also good, and the effect is vivid and technological. I also refer to Jquery, and you can extend this simple plug-in if you are interested.

Github link