Advertisement
rodro1

Image Hover right click big image system

Jan 14th, 2017
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function(){
  2.     window.onload = function(){
  3.         var grid = document.querySelector('.grid');
  4.  
  5.         grid.addEventListener('click', bClick , false);
  6.  
  7.                 function bClick(bEvent){
  8.                     if(bEvent.target == 'IMG');
  9.                    
  10.                     if(bEvent.target.getAttribute('clicked') == 'yes'){
  11.                         bEvent.target.style.border = 'none';
  12.                         bEvent.target.removeAttribute('clicked');
  13.                         console.log('Not clicked');
  14.  
  15.                     } else {
  16.                         bEvent.target.style.border = '3px solid #ddd';
  17.                         bEvent.target.setAttribute('clicked', 'yes');
  18.                         console.log('clicked');
  19.                        
  20.                     }
  21.                 }
  22.  
  23.  
  24.         grid.addEventListener('contextmenu', function(e){
  25.             e.preventDefault();
  26.             var target = e.target;
  27.             //console.dir(target);
  28.             if(target.nodeName === 'IMG'){
  29.                 var myElement = document.createElement('div');
  30.                 myElement.className = 'preview';
  31.  
  32.                 var imgLoc = target.src.substring(0, target.src.length - 7) + '.jpg';
  33.                 var myImg = document.createElement('img');
  34.                 myImg.src = imgLoc;
  35.  
  36.                 //console.log(imgLoc);
  37.                 target.parentNode.appendChild(myElement);
  38.                 myElement.appendChild(myImg);
  39.  
  40.                 target.addEventListener('mouseout', roller, false);
  41.                 function roller(d){
  42.                     //console.log(d);
  43.                     target.parentNode.removeChild(myElement);
  44.                     target.removeEventListener('mouseout', roller, false); 
  45.                     //target.addEventListener('click', bClick , false);
  46.  
  47.                 }
  48.  
  49.                 target.addEventListener('mousemove', function(f){
  50.                     console.log('he');
  51.                     myImg.style.top = f.offsetY + 10 + 'px';
  52.                     myImg.style.left = f.offsetX + 10 + 'px';
  53.                 }, false);
  54.  
  55.                
  56.  
  57.             }
  58.         }, false);
  59.     }
  60. })()
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement