SP2

by kthornbloom

HTML

<div class="sp">
  <img src="https://api.lorem.space/image/shoes?w=250&h=250&hash=8B7BCDC2" data-lg="https://api.lorem.space/image/shoes?w=500&h=500&hash=8B7BCDC2"/>
  <img src="https://api.lorem.space/image/shoes?w=250&h=250&hash=500B67FB" data-lg="https://api.lorem.space/image/shoes?w=500&h=500&hash=500B67FB"/>
  <img src="https://api.lorem.space/image/shoes?w=250&h=250&hash=4F32C4CF" data-lg="https://api.lorem.space/image/shoes?w=500&h=500&hash=4F32C4CF"/>
</div>

SCSS

.sp {
  position: relative;
  width: 300px;
  height: 300px;
  
  &-stage {
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid blue;
    
    img {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
  
  &-zoom {
    position:absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
const sp = document.querySelectorAll('.sp');

for (let i = 0; i < sp.length; i++) {
	var instance = sp[i],
  		instanceHTML = instance.innerHTML;
      
	instance.innerHTML = "<div class='sp-stage'>"+instanceHTML+"</div><div class='sp-zoom'></div><div class='sp-thumbs'></div>";
  var instanceZoom = instance.querySelector('.sp-zoom');
  
  // Events
 	instance.addEventListener('mouseover', initialize);
  instance.addEventListener('onmousemove', moveEvent);
  
  
  function initialize(){
  	var currentImg = instance.querySelector('.sp-stage img:last-of-type').getAttribute('data-lg'),
    		loadedImg = instance.querySelector('.sp-zoom img');
        
    if(!loadedImg || currentImg != loadedImg.getAttribute('src')){
    	instance.querySelector('.sp-zoom').innerHTML = "<img src='"+currentImg+"'/>";
    }
  }
  
  function moveEvent(){
  	
  }
  
  
  
  
}
});