added custom animation option; removed images

Author: felixhagspiel

README.md

@@ -77,15 +77,12 @@ _Default: true_
 
 If set to true, the previous and the next image of the currently shown image will be preloaded if not already in cache.
 
-###	`{loadingImg: bool}`
+###	`{loadingAnimation: bool || string || number}`
 _Default: true_
 
-If set to true, the loading-gif will be shown until the image is loaded. Feel free to replace the GIF inside the img-folder. Note: This is disabled for IE8 due to bugs with transparent backgrounds and performance issues.
+If set to true, an animation will be rendered until the image is loaded. The animation is using CSS3, so it will not work in IE8/9. Alternatively you can pass milliseconds as number, which defines the interval the `span`-elements inside the `jslghtbx-loading-animation`-container get the class `jslghtbx-active` (the default interval is 200ms). You can use this to apply your own styling via CSS. You can also pass a link to an GIF-image, which then replaces the animation. This is disabled for IE8 due to bugs with transparent backgrounds and performance issues. If set to false, no animation is shown.
 
-###	`{loadingImgSrc: bool}`
-_Default: 'img/jslghtbx-loading.gif'
-
-Here you can set another image-URL for the loading animation.
+Note: The animations get an 500ms delay, so they won`t pop up on fast connections.
 
 ###	`{carousel: bool}`
 _Default: true_

css/lightbox.css

@@ -62,8 +62,8 @@ $darkblue: #3F658B;
 		background-color: rgba(0,0,0,0.85);
 	}
 }
-/* loading-image */
-.jslghtbx-loading-img {
+/* loading-animation */
+.jslghtbx-loading-animation {
 	margin-top: -60px;
 	margin-left: -60px;	
 	width: 120px;
@@ -73,8 +73,20 @@ $darkblue: #3F658B;
 	display: none;
 	position: absolute;
 	z-index: -1;
+	& > span {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		border-radius: 20px;
+		margin: 5px;
+		background-color: #fff;
+		@include prefixr(transition, all .3s ease-in-out);
+		&.jslghtbx-active {
+			margin-bottom: 60px;
+		}
+	}
 }
-.jslghtbx.jslghtbx-loading .jslghtbx-loading-img {
+.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation {
 	display: block;
 }
 .jslghtbx-nooverflow {

css/lightbox.scss

@@ -204,8 +204,7 @@ <h2>Download latest version</h2>
 		lightbox.load({
 			responsive: true,
 			preload: true,
-			loadingImg: true,
-			loadingImgSrc: 'img/jslghtbx-loading.gif',
+			loadingAnimation: true,
 			carousel: true,
 			closeOnClick: true,
 			hideOverflow: true,

img/jslghtbx-loading.gif

@@ -34,6 +34,10 @@ function Lightbox () {
 	var thumbnails = [] // thumbnails
 	var isOpen = false // check if box is open
 	var loadingImgSrc // path to loading image
+	var animationEl // reference to animation-element
+	var animationInt // animation-interval
+	var animationChildren // childs to animate
+	var animationTimeout // timeout until animation starts
 	// controls
 	var nextBtn = false
 	var prevBtn = false
@@ -114,11 +118,6 @@ function Lightbox () {
 		return false
 	}
 
-	// check option
-	function optIsSet(opt){
-
-	}
-
 	// lookup element in browser
 	function exists(id){
 		if(document.getElementById(id)) {return true}
@@ -190,6 +189,43 @@ function Lightbox () {
 		return opt && opt[name] && typeof opt[name] === 'function'
 	}
 
+	// start animation
+	function startAnimation() {
+		if(isIE8) return
+		// stop any already running animations
+		stopAnimation()
+		var fnc = function() {
+			addClass(that.box,'jslghtbx-loading')
+			if(!isIE9 && typeof that.opt.loadingAnimation === 'number'){
+				var index = 0
+				animationInt = setInterval(function(){
+					addClass(animationChildren[index],'jslghtbx-active')
+					setTimeout(function(){
+						removeClass(animationChildren[index],'jslghtbx-active')
+					},that.opt.loadingAnimation)
+					index = index >= animationChildren.length ? 0 : index += 1
+				},that.opt.loadingAnimation)
+			}			
+		}
+		// set timeout to not show loading animation on fast connections
+		animationTimeout = setTimeout(fnc,500)
+	}
+
+	// stop animation
+	function stopAnimation() {
+		if(isIE8) return
+		// hide animation-element
+		removeClass(that.box,'jslghtbx-loading')
+		// stop animation
+		if(!isIE9 && typeof that.opt.loadingAnimation !== 'string' && that.opt.loadingAnimation){
+			clearInterval(animationInt)
+			// do not use animationChildren.length here due to IE8/9 bugs
+			for(var i = 0; i < 4; i++) {
+				removeClass(animationChildren[i],'jslghtbx-active')
+			}
+		}
+	}
+
 	// init controls
 	function initControls() {
 		if(!nextBtn) {
@@ -332,20 +368,39 @@ function Lightbox () {
 			})
 		}
 
-		// set loading-image
-		if(!opt || opt && !isset(opt.loadingImgSrc)) {
-			loadingImgSrc = 'img/jslghtbx-loading.gif'
-		} else {
-			loadingImgSrc = opt.loadingImgSrc
-		}
-		if(chckOpt(opt,'loadingImg') || opt && !isset(opt.loadingImg)) {
-			this.opt['loadingImg'] = true
-			var el = document.createElement('img')
-			el.setAttribute('src',loadingImgSrc)
-			addClass(el,'jslghtbx-loading-img')
-			this.box.appendChild(el)
+		// set default for loading animation if none given
+		if(!opt || opt && !isset(opt['loadingAnimation'])) {
+			opt['loadingAnimation'] = true
+		}
+		// set loading animation
+		if(isset(opt['loadingAnimation'])) {
+			this.opt['loadingAnimation'] = opt['loadingAnimation']
+			if(typeof this.opt['loadingAnimation'] === 'string') {
+				// set loading GIF
+				animationEl = document.createElement('img')
+				animationEl.setAttribute('src',this.opt['loadingAnimation'])
+				addClass(animationEl,'jslghtbx-loading-animation')
+				this.box.appendChild(animationEl)
+			} else if(this.opt['loadingAnimation']) {
+				// set default animation time
+				console.log(typeof this.opt['loadingAnimation'])
+				if(typeof this.opt['loadingAnimation'] === 'boolean') this.opt['loadingAnimation'] = 200
+				// animate via JS
+				animationEl = document.createElement('div')
+
+				addClass(animationEl,'jslghtbx-loading-animation')
+
+				animationEl.appendChild(document.createElement('span'))
+				animationEl.appendChild(document.createElement('span'))
+				animationEl.appendChild(document.createElement('span'))
+				animationEl.appendChild(document.createElement('span'))
+
+				// save children
+				animationChildren = animationEl.children
+
+				this.box.appendChild(animationEl)
+			}
 		}
-
 		// set preload-option
 		if(chckOpt(opt,'preload') || opt && !isset(opt.preload)) {
 			this.opt['preload'] = true
@@ -600,8 +655,10 @@ function Lightbox () {
 						addClass(currImage.img,'jslghtbx-animate-transition')
 					}
 					if(cb) cb()
-					// remove loading-gif
-					removeClass(that.box,'jslghtbx-loading')
+					// stop Animation
+					stopAnimation()
+					// clear animation timeout
+					clearTimeout(animationTimeout)
 					// preload previous and next image
 					if(that.opt.preload) {
 						preload()
@@ -626,10 +683,8 @@ function Lightbox () {
 		// set src 
 		currImage.img.setAttribute('src',src)
 
-		// add loading-gif if set and if not IE8
-		if(this.opt.loadingImg && !isIE8) {
-			addClass(this.box,'jslghtbx-loading')
-		}
+		// start loading animation
+		startAnimation()
 	}
 
 	this.close = function() {