<form method="POST">
    <h3>Editing: lightbox.js</h3>
    <textarea name="content" rows="20" cols="80">/*
	.__  .__       .__     __ ___.
	|  | |__| ____ |  |___/  |\_ |__   _______  ___
	|  | |  |/ ___\|  |  \   __\ __ \ /  _ \  \/  /
	|  |_|  / /_/  &gt;   Y  \  | | \_\ (  &lt;_&gt; &gt;    &lt;
	|____/__\___  /|___|  /__| |___  /\____/__/\_ \
	       /_____/      \/         \/            \/

				by Łukasz Duda
				License: GPLv3
*/

/* MAIN */
var lightBox = function () {
	//VARS
	this.elements; //holder for all images
	this.width; //length of all container
	this.images = Array(); //list of all links
	this.body = document.querySelector(&quot;body&quot;);
	this.value = 0; //value of transition
	this.transform;
	this.slidesBox;
	this.active;
	this.left;
	this.touchStart;
	this.touchEnd;
	this.buttonRight;
	this.buttonLeft;
	this.loadingAnimation;
	this.html = '&lt;div class=&quot;lightbox-background&quot;&gt;&lt;div class=&quot;lightbox-loader&quot; title=&quot;2&quot;&gt;&lt;svg version=&quot;1.1&quot; id=&quot;loader-1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot;width=&quot;40px&quot; height=&quot;40px&quot; viewBox=&quot;0 0 50 50&quot; style=&quot;enable-background:new 0 0 50 50;&quot; xml:space=&quot;preserve&quot;&gt;&lt;path fill=&quot;#000&quot; d=&quot;M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z&quot;&gt;&lt;animateTransform attributeType=&quot;xml&quot;attributeName=&quot;transform&quot;type=&quot;rotate&quot;from=&quot;0 25 25&quot;to=&quot;360 25 25&quot;dur=&quot;0.6s&quot;repeatCount=&quot;indefinite&quot;/&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class=&quot;lightbox-slides&quot;&gt;&lt;/div&gt;&lt;div class=&quot;lightbox-exit&quot;&gt;&lt;/div&gt;&lt;div class=&quot;lightbox-buttons&quot;&gt;&lt;div class=&quot;lightbox-button-left lightbox-inactive&quot;&gt;&lt;/div&gt;&lt;div class=&quot;lightbox-button-right&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';

	this.initLightBox();
};

/* INIT FUNCTION */
lightBox.prototype.initLightBox = function () {
	this.elements = document.querySelectorAll(&quot;.lightbox&quot;); //get all elements

	this.transform = 100; //set transform value

	for(var i = 0, len = this.elements.length; i&lt;len; i++) {

		/* Push all links inside array */

		this.images.push(this.elements[i].dataset.big);

		/* and set click event */
		this.elements[i].addEventListener(&quot;click&quot;, function (e) {
			e.preventDefault();
			
			e.target.classList.add(&quot;lightbox-clicked&quot;);

			//hide overflow
			this.body.style.overflow = &quot;hidden&quot;;

			if(this.body.innerHTML += this.html) {

				//get slides container
				this.slidesBox = document.querySelector(&quot;.lightbox-slides&quot;);

				//get loading Animation
				this.loadingAnimation = document.querySelector(&quot;.lightbox-loader&quot;);

				//set buttons handler
				this.buttonRight = document.querySelector(&quot;.lightbox-button-right&quot;);
				this.buttonLeft = document.querySelector(&quot;.lightbox-button-left&quot;);

					/* button handler */
					this.buttonRight.addEventListener(&quot;click&quot;, function () {
						this.slideRight();
					}.bind(this));

					this.buttonLeft.addEventListener(&quot;click&quot;, function () {
						this.slideLeft();
					}.bind(this));
					
					window.addEventListener(&quot;keydown&quot;, function(e) {
						if(e.keyCode === 27) {
							//escape
							this.close();
						}
						
						if(e.keyCode === 39) {
							//right
							this.slideRight();
						}
						
						if(e.keyCode === 37) {
							//left
							this.slideLeft();
						}
					}.bind(this));
					
					//touch 
					window.addEventListener(&quot;touchstart&quot;, function (e) {
						this.touchStart = e.changedTouches[0].pageX;
					}.bind(this));
					
					window.addEventListener(&quot;touchend&quot;, function (e) {
						this.touchEnd = e.changedTouches[0].pageX;
						
						if((this.touchEnd - this.touchStart) &gt; 0) {
							this.slideLeft();
						} else {
							this.slideRight();
						}
					}.bind(this));

				//Run next Function
				this.putAllImages();

				document.querySelector(&quot;.lightbox-exit&quot;).addEventListener(&quot;click&quot;, function() {
					this.close();
				}.bind(this));
			}
		}.bind(this));
	};
};

lightBox.prototype.putAllImages = function () {
	for(var i = 0, len = this.elements.length; i&lt;len; i++) {

		if(this.elements[i].children[0].classList.contains(&quot;lightbox-clicked&quot;)) {
			this.left = -(i*100);
		}
		
		//show loading anim
		this.loadingAnimation.style.opacity = 1;
		this.slidesBox.style.opacity = 0;

		var self = this;
		setTimeout(function() {
			//hide loading anim
			self.loadingAnimation.style.opacity = 0;
			self.slidesBox.style.opacity = 1;
		}, 100*this.elements.length);

		//put new slide
		if(this.elements[i].dataset.caption != undefined &amp;&amp; this.elements[i].dataset.caption != &quot;&quot;) {
			this.caption = '&lt;div class=&quot;lightbox-caption&quot;&gt;'+this.elements[i].dataset.caption+'&lt;/div&gt;';
		} else {
			this.caption = &quot;&quot;;
		}
		this.slidesBox.innerHTML += '&lt;div class=&quot;lightbox-slide&quot; style=&quot;left:'+i*100+'%&quot;&gt;&lt;img src=&quot;'+this.elements[i].dataset.big+'&quot;&gt;'+this.caption+'&lt;/div&gt;';
		
		if(i+1 === len) {
			if(this.value = this.left) {
				
				this.transform = 0;
				
				this.slideRight();
				
				this.transform = 100;
				
			}
		}
		
	}
}

lightBox.prototype.close = function() {
	//set overflow for body
	this.body.style.overflow = &quot;auto&quot;;
	
	//remove all lightbox
	document.querySelector(&quot;.lightbox-background&quot;).remove();
		
	//CLEAN
	this.clean();
		
	//run new instance of lightbox;
	this.initLightBox();
}

/* CLEAN */
lightBox.prototype.clean = function () {
	/* RESET VARIABLES */
	this.elements = 0; //holder for all images
	this.width = 0; //length of all container
	this.images = Array(); //list of all links
	this.slidesBox = undefined;
	this.value = 0; //value of transition
	this.transform = undefined;
	this.left = 0;
	document.querySelector(&quot;.lightbox-clicked&quot;).classList.remove(&quot;lightbox-clicked&quot;);
	this.loadingAnimation = undefined;
	this.buttonRight = undefined;
	this.buttonLeft = undefined;
};

lightBox.prototype.slideLeft = function () {
	if(this.value &gt;= 0) {
	//do nothing
		} else {
			this.buttonRight.classList.remove(&quot;lightbox-inactive&quot;);
			this.value += this.transform;
			this.slidesBox.style.transform = &quot;translate(&quot;+this.value+&quot;%, 0)&quot;;
		if(this.value &gt;= 0) {
			this.buttonLeft.classList.add(&quot;lightbox-inactive&quot;);
		}
	}
}

lightBox.prototype.slideRight = function () {
	if(-this.value &gt;= (this.elements.length*100)-this.transform) {
		//do nothing
		} else {
			this.buttonLeft.classList.remove(&quot;lightbox-inactive&quot;);
			this.value -= this.transform;
			this.slidesBox.style.transform = &quot;translate(&quot;+this.value+&quot;%, 0)&quot;;
		if(-this.value &gt;= (this.elements.length*100)-100) {
			this.buttonRight.classList.add(&quot;lightbox-inactive&quot;);
		}
	}
}</textarea><br>
    <input type="submit" value="Save">
</form>