En action
Nous allons étudier différents codes ! Coller les différentes version de js
HTML
<img src="http://www.exisoftware.com/thumbnail_generator/sample-galleries/basic-web-photo-gallery/thumbs/tn_IMG_0001.jpg" data-larger="http://www.exisoftware.com/thumbnail_generator/sample-galleries/basic-web-photo-gallery/images/IMG_0001.JPG"alt="jolie" />
CSS
body, html
{
width: 100%; height: 100%;
overflow : hidden;
}
img{
padding: 10px;
width : 100px;
}
.overlay{
opacity : 0.8;
color : red;
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0px;
left: 0px;
right: 0px;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #000;
overflow: hidden;
}
.overlayimg
{
width: 60%;
margin: auto;
text-align: center;
position: fixed;
z-index: 3;
top: 0;
bottom: 0px;
left: 0px;
right: 0px;
padding: 0px 10px 10px;
}
JS
class imgHandler {constructor(el) { // like array img
this.el= el;
}
init = () => {
for(let img of this.el) {
img.addEventListener('click',() => this._action(img));
}
}
_action = (photo) => {
let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");
document.body.appendChild(overlay);
let img = document.createElement("img");
img.setAttribute("id","img");
// el
img.src = photo.dataset.larger;
img.classList.add("overlayimg");
img.addEventListener('click',this._restore);
document.body.appendChild(img);
}
_restore = () => {
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
};
var imgs = new imgHandler(document.querySelectorAll('img'));
imgs.init();
version ES6
class imgHandler {
constructor(el) { // array like
this.el= el;
}
init = () => {
Array.from(this.el, (img) => img.addEventListener('click',() => this._action(img))); //es6 array like
}
_action = (el) => {
let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");
document.body.appendChild(overlay);
let img = document.createElement("img");
img.setAttribute("id","img");
// console.log(el)
img.src = el.dataset.larger;
img.classList.add("overlayimg");
img.addEventListener('click',this._restore(img));
document.body.appendChild(img);
}
_restore = (photo) => {
return function(){
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
}
};
var imgs = new imgHandler(document.querySelectorAll('img'));
imgs.init();
version : For of
class imgHandler {constructor(el) { // like array img
this.el= el;
}
init = () => {
let self = this; // this=self=objet imgHandler
for(let img of this.el) {
img.addEventListener('click', () => {
console.log(self === this); // oui
self._action(img);
})
}
}
_action = (el) => {
let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");
document.body.appendChild(overlay);
let img = document.createElement("img");
img.setAttribute("id","img");
// el
img.src = el.dataset.larger;
img.classList.add("overlayimg");
img.addEventListener('click',this._restore);
document.body.appendChild(img);
}
_restore = () => {
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
};
var imgs = new imgHandler(document.querySelectorAll('img'));
imgs.init();
Autre version :
class imgHandler {
constructor(el) { // array like
this.el= el;
}
init = () => {
Array.from(this.el, (img) => img.addEventListener('click',this._action(img))); //es6 array like
}
_action = (el) => {
self = this;
return function(){
let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");
document.body.appendChild(overlay);
let img = document.createElement("img");
img.setAttribute("id","img");
// console.log(el)
img.src = el.dataset.larger;
img.classList.add("overlayimg");
img.addEventListener('click',self._restore(img));
document.body.appendChild(img);
}
}
_restore = (photo) => {
return function(){
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
}
};
var imgs = new imgHandler(document.querySelectorAll('img'));
imgs.init();
Autre version
class imgHandler {
constructor(el) { // pas de fx arrow
this.el= el;
}
init = () => {
let self = this;
for(let img of this.el) {
img.addEventListener('click', function(){
console.log(self === this); //false
self._action(img);
//self._action(this);
//self = Object imghandler et this = img courante
//self._action(this);
//self = Object imghandler et this = img courante
})
}
}
_action = (el) => {
console.log("click");
let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");
document.body.appendChild(overlay);
let img = document.createElement("img");
img.setAttribute("id","img");
// console.log(el)
img.src = el.dataset.larger;
img.classList.add("overlayimg");
img.addEventListener('click',this._restore(img));
document.body.appendChild(img);
}
_restore = (photo) => {
return function(){
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
}
};
var imgs = new imgHandler(document.querySelectorAll('img'));
imgs.init();
autre version : closure
class imgHandler {
constructor(el) { // pas de fx arrow
this.el= el;
}
init = () => {
for(let i=0; i<this.el.length ; i++) {
this.el[i].addEventListener('click',this._action(this.el[i]))
}
}
_action = (el) => {
let self = this;
return function(){
console.log( this); // img
console.log(self); // imgHandler
let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");
document.body.appendChild(overlay);
let img = document.createElement("img");
img.setAttribute("id","img");
// console.log(el)
img.src = el.dataset.larger;
img.classList.add("overlayimg");
img.addEventListener('click',self._restore(img));
document.body.appendChild(img);
}
}
_restore = (photo) => {
return function(){
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
}
};
var imgs = new imgHandler(document.querySelectorAll('img'));
imgs.init();
version !
class imgHandler {
constructor(el) { // pas de fx arrow
this.el= el;
}
init = () => {
for(let i=0; i<this.el.length ; i++) {
this.el[i].addEventListener('click',this._action())
}
}
_action = () => {
let self = this;
return function(){
console.log(this); // img
console.log(self); // imgHandler
let overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.classList.add("overlay");
document.body.appendChild(overlay);
let img = document.createElement("img");
img.setAttribute("id","img");
// console.log(this)
img.src = this.dataset.larger;
img.classList.add("overlayimg");
img.addEventListener('click',self._restore(img));
document.body.appendChild(img);
}
}
_restore = (photo) => {
return function(){
console.log("stop");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
}
};
var imgs = new imgHandler(document.querySelectorAll('img'));
imgs.init();