Developpez.com

Plus de 2 000 forums
et jusqu'à 5 000 nouveaux messages par jour

Zoom IMG

Présentation
Une simple lib pour afficher en grand une image avec des contrôles de zoom et des raccourcis clavier !
Pour l'utilisation:
1. avoir une image(l'évidence même, non ?)
<img src="mon_url_image" id="id_image">
OU
<img src="mon_url_mignature_image" data="mon_url_image" id="id_image">
2. lier au clic sur l'image la fonction [b]img_zoom_open[/b] comme par exemple:
document.querySelector('#mon_id_image').addEventListener('click',function(){img_zoom_open('mon_id_image');},false);
Nos ressources disponibles
/*
Projet : img_zoom
Création : Février 2017
Mise à jour du : 07 Février 2017
Version : 1.0
Créateur(s) : Boulain kévin
Licence : BSD
*/
// seule fonction à utiliser
function img_zoom_open(id) {
if (img_zoom_load === true) { return; }
if (document.getElementById('zoom_img') !== null) { return; }
node = document.getElementById(id);
if (node === null) { return; }
else {
data = node.getAttribute('data');
if (data === null) { data = node.getAttribute('src'); }
if (data === null) { return; }
if(document.getElementById('loader') != null){document.getElementById('loader').style.display="block";}
img = document.createElement('img');
img.addEventListener('load', function (e) {
console.log(e);
if(e.target.complete === true){
max_size = {"w":document.getElementById('zoom_img_css').getAttribute('max-width'), "h":document.getElementById('zoom_img_css').getAttribute('max-height')};
div = document.createElement('div');
div.setAttribute('id', 'zoom_img');

im = document.createElement('div');
im.setAttribute('src', e.target.src);
w = e.target.naturalWidth;
h = e.target.naturalHeight;
im.setAttribute('naturalWidth', w);
im.setAttribute('naturalHeight', h);
zoom = 1;

if(w > max_size.w){
zoom = 1 * max_size.w / w;
if((zoom % 0.1) !== 0){zoom = zoom - (zoom % 0.1);}
h = h * zoom;
w = w * zoom;
if(h > max_size.h){ }
}
if(h > max_size.h){

}
im.setAttribute('zinit', zoom);
im.setAttribute('style', 'width:'+w+'px;height:'+h+'px;background-image:url("'+e.target.src+'");');
im.setAttribute('zoom', zoom);
//im.addEventListener('mouseover', img_zoom_move);

//naturalHeight :403
//naturalWidth :1413
div.appendChild(im);

btn = document.createElement('span');
btn.setAttribute('class', 'plus');
btn.setAttribute('onclick', 'img_zoom_mult(0.11)');
div.appendChild(btn);
btn = document.createElement('span');
btn.setAttribute('class', 'moins');
btn.setAttribute('onclick', 'img_zoom_mult(-0.11)');
div.appendChild(btn);
btn = document.createElement('span');
btn.setAttribute('class', 'close');
btn.setAttribute('onclick', 'img_zoom_close()');
div.appendChild(btn);

document.getElementsByTagName('body')[0].appendChild(div);

img_zoom_re_eval();

if(document.getElementsByTagName('body')[0].ontouchend === undefined){
document.getElementsByTagName('body')[0].style.overflow='hidden';
if(Hammer !== undefined){
document.querySelector('#zoom_img div').style.cursor="move";
img_zoom_hammer_var = new Hammer(document.querySelector('#zoom_img div'));
img_zoom_hammer_var.on('pan', function(ev) { img_zoom_hammer(ev); });
}
document.querySelector('#zoom_img').addEventListener('mousewheel', function(e) {
if(e.wheelDelta > 0){img_zoom_mult(0.11);}
else{img_zoom_mult(-0.11);}
}, false);
document.querySelector('#zoom_img').addEventListener('DOMMouseScroll', function(e) {
if(e.detail < 0){img_zoom_mult(0.11);}
else{img_zoom_mult(-0.11);}
}, false);
}
else{
document.querySelector('#zoom_img').addEventListener('touchstart', function(e) {
console.log(e);
if(e.touches.length == 2){img_zoom_touch_origin = Math.sqrt( Math.pow( (e.touches[1].pageX - e.touches[0].pageX), 2 ) + Math.pow( (e.touches[1].pageY - e.touches[0].pageY), 2 ) );img_zoom_touch_origin_zoom = parseFloat(node.getAttribute('zoom'));}
}, false);
document.querySelector('#zoom_img').addEventListener('touchend', function(e) {
img_zoom_touch_origin = null;
}, false);
document.querySelector('#zoom_img').addEventListener('touchmove', function(e) {
if(e.touches.length == 2 && img_zoom_touch_origin != null){
console.log(e);
now = Math.sqrt( Math.pow( (e.touches[1].pageX - e.touches[0].pageX), 2 ) + Math.pow( (e.touches[1].pageY - e.touches[0].pageY), 2 ) );
img_zoom_mult(now - img_zoom_touch_origin, true);
}
}, false);
}
}
if(document.getElementById('loader') != null){document.getElementById('loader').style.display="none";}
}, false);
img.src = data;
img_zoom_load = true;
}
}

function img_zoom_init(){
if (document.getElementById('zoom_img_css') !== null) { document.getElementById('zoom_img_css').parentNode.removeChild(document.getElementById('zoom_img_css')); }
style = document.createElement('style');
style.setAttribute('id', 'zoom_img_css');
style.setAttribute('max-width', window.innerWidth);
style.setAttribute('max-height', window.innerHeight);
tx = '#zoom_img{background:rgba(0, 0, 0, 0.5);position:fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:100;overflow:auto;}';
if(document.getElementsByTagName('body')[0].ontouchend === undefined){tx = tx + '#zoom_img{overflow:hidden;}';}
tx = tx + '#zoom_img div{display: block;position:absolute;background-size:100%;}';
tx = tx + '#zoom_img .plus{display: block;z-index:102;width:30px;height:30px;cursor:pointer;position:fixed;bottom:20px;left:20px; background:url("data:image/png;base64,Tronqué pour affichage présentation");background-size:30px 30px;}';
tx = tx + '#zoom_img .moins{display: block;z-index:103;width:30px;height:30px;cursor:pointer;position:fixed;bottom:20px;left:80px;
background:url("data:image/png;base64,Tronqué pour affichage présentation");background-size:30px 30px;}';
tx = tx + '#zoom_img .close{display: block;z-index:104;width:30px;height:30px;position:fixed;top:20px;right:20px;cursor:pointer;
background:url("data:image/png;base64,Tronqué pour affichage présentation");background-size:30px 30px;}';
style.innerHTML = tx;
document.getElementsByTagName('body')[0].appendChild(style);
if(document.querySelector('#zoom_img img') != null){img_zoom_re_eval();}
}

function img_zoom_re_eval(){
node = document.querySelector('#zoom_img div');
if(node != null){
console.log(node.getAttribute('zoom'));
mh = document.getElementById('zoom_img_css').getAttribute('max-height');
mw = document.getElementById('zoom_img_css').getAttribute('max-width');
h = parseInt(node.style.height);
w = parseInt(node.style.width);
max_pos = {"w":window.innerWidth - w, "h":window.innerHeight - h};
if(h< mh){
node.style.top=((mh-h)/2)+'px';
}
else{
t = parseInt(node.style.top);
if(t < 0){
if(t < max_pos.h){node.style.top=max_pos.h+'px';}
}
else{node.style.top='0';}
}

if(w < mw){
node.style.left=((mw-w)/2)+'px';
}
else{
l = parseInt(node.style.left);
if(l < 0){
if(l < max_pos.w){node.style.left=max_pos.w+'px';}
}
else{node.style.left='0';}
}
}
}

function img_zoom_mult(step, touch){
node = document.querySelector('#zoom_img div');
if(node != null){
zoom = Math.round((parseFloat(node.getAttribute('zoom')) + parseFloat(step))*100)/100;
if(touch !== true){ if((zoom % 0.1) !== 0){zoom = zoom - (zoom % 0.1);} }
else{zoom = img_zoom_touch_origin_zoom + (step/500); if((zoom % 0.05) !== 0){zoom = zoom - (zoom % 0.05);}}
nw = parseInt(node.getAttribute('naturalWidth'));
nh = parseInt(node.getAttribute('naturalHeight'));
ratio = nw / nh;
if(ratio > 0){
if((nw * zoom) < (nw / 2.5) && parseFloat(step) < 0){return;}
}
else{
if((nh * zoom) < (nh / 2.5) && parseFloat(step) < 0){return;}
}
if(zoom > 2){zoom = 2;}
node.setAttribute('zoom',zoom);
node.style.height = (nh*zoom)+'px';
node.style.width = (nw*zoom)+'px';
img_zoom_re_eval();
}
}

function img_zoom_keyboard(event){
event.preventDefault();
node = document.querySelector('#zoom_img div');
if(node != null){
switch(event.key){
case "+": img_zoom_mult(0.11);break;
case "-": img_zoom_mult(-0.11);break;
case "=":
zoom = Math.round(parseFloat(node.getAttribute('zoom'))*100)/100;
zinit = Math.round(parseFloat(node.getAttribute('zinit'))*100)/100;
zoom = zoom - zinit;
img_zoom_mult(zoom * -1);
break;
case "ArrowUp":
case "ArrowDown":
case "ArrowLeft":
case "ArrowRight":
max_pos = {"w":window.innerWidth - parseInt(document.querySelector('#zoom_img div').style.width), "h":window.innerHeight - parseInt(document.querySelector('#zoom_img div').style.height)};
if(event.key == "ArrowUp"){
if(max_pos.h >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.top) + 20;
if(isNaN(n)){n=0;}
if(n > 0){n=0;}
document.querySelector('#zoom_img div').style.top = n + 'px';
}
if(event.key == "ArrowDown"){
if(max_pos.h >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.top) - 20;
if(isNaN(n)){n=-20;}
if(n < max_pos.h){n=max_pos.h;}
document.querySelector('#zoom_img div').style.top = n + 'px';
}
if(event.key == "ArrowLeft"){
if(max_pos.w >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.left) + 20;
if(isNaN(n)){n=0;}
if(n > 0){n=0;}
document.querySelector('#zoom_img div').style.left = n + 'px';
}
if(event.key == "ArrowRight"){
if(max_pos.w >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.left) - 20;
if(isNaN(n)){n=-20;}
if(n < max_pos.w){n=max_pos.w;}
document.querySelector('#zoom_img div').style.left = n + 'px';
}
break;
}
}
}

function img_zoom_hammer(event){
//console.log(event);
if(event.pointers.length == 1){
max_pos = {"w":window.innerWidth - parseInt(document.querySelector('#zoom_img div').style.width), "h":window.innerHeight - parseInt(document.querySelector('#zoom_img div').style.height)};
mov = {"w":event.pointers[0].movementX, "h":event.pointers[0].movementY}
if(mov.w > 0){
if(max_pos.w >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.left) + 10;
if(isNaN(n)){n=0;}
if(n > 0){n=0;}
document.querySelector('#zoom_img div').style.left = n + 'px';
}
if(mov.w < 0){
if(max_pos.w >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.left) - 10;
if(isNaN(n)){n=-10;}
if(n < max_pos.w){n=max_pos.w-5;}
document.querySelector('#zoom_img div').style.left = n + 'px';
}
if(mov.h > 0){
if(max_pos.h >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.top) + 10;
if(isNaN(n)){n=0;}
if(n > 0){n=0;}
document.querySelector('#zoom_img div').style.top = n + 'px';
}
if(mov.h < 0){
if(max_pos.h >= 0){return;}
n = parseInt(document.querySelector('#zoom_img div').style.top) - 10;
if(isNaN(n)){n=-10;}
if(n < max_pos.h){n=max_pos.h-5;}
document.querySelector('#zoom_img div').style.top = n + 'px';
}
}
}

function img_zoom_close(){
document.getElementById('zoom_img').parentNode.removeChild(document.getElementById('zoom_img'));
document.getElementsByTagName('body')[0].style.overflow='auto';
if(img_zoom_hammer_var !== null){
img_zoom_hammer_var.destroy();
img_zoom_hammer_var = null;
}
img_zoom_load = false;
}

img_zoom_load = false;
img_zoom_hammer_var = null;
img_zoom_touch_origin = null;
img_zoom_touch_origin_zoom = null;

img_zoom_init();
if(document.getElementsByTagName('body')[0].ontouchend === undefined){ document.addEventListener('keydown', img_zoom_keyboard, false); }
Téléchargement
Compatibilité
Android BlackBerry iOS Linux Mac Windows Windows Phone
0  0 
Détails
Avatar de Kévin Boulain
Expert confirmé
Voir tous les téléchargements de l'auteur
Licence : BSD
Date de mise en ligne : 7 février 2017
Developpez.com décline toute responsabilité quant à l'utilisation des différents éléments téléchargés.
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -