Link support #9

Codeinwp · Sep 2, 2014 · 93b64e0 · 93b64e0
1 parent 3a9482a
commit 93b64e0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/example/index.html b/example/index.html
@@ -20,16 +20,14 @@
 	<div id="slider">
 		<img src="img/1.jpg" data-src-2x="img/[email protected]" alt="Slide 1" />
 		<img data-src="img/2.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 2" />
-		<img data-src="img/3.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 3" />
+		<a href="http://example.com"><img data-src="img/3.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 3" /></a>
 		<img data-src="img/4.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 4" />
-        <img data-src="img/5.jpg" src="" alt="" />
+        <img data-src="img/5.jpg" src="" alt="Slide 5" />
 	</div>
 
     <script src="../ideal-image-slider.js"></script>
 	<script>
-	var slider = new IdealImageSlider.Slider({
-		selector: '#slider'
-	});
+	var slider = new IdealImageSlider.Slider('#slider');
     slider.start();
 	</script>
 </body>

diff --git a/ideal-image-slider.css b/ideal-image-slider.css
@@ -13,6 +13,9 @@
 	overflow: hidden;
 }
 .iis-slide {
+	display: block;
+	bottom: 0;
+	text-decoration: none;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -21,7 +24,7 @@
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
 	background-size: cover;
-	text-indent: -999%;
+	text-indent: -9999px;
 }
 
 /* Slide effect */

diff --git a/ideal-image-slider.js b/ideal-image-slider.js
@@ -135,37 +135,53 @@ var IdealImageSlider = (function() {
 
 		// Slides
 		var origChildren = _toArray(sliderEl.children),
-			imgSlides = [];
+			validSlides = [];
 		sliderEl.innerHTML = '';
 		Array.prototype.forEach.call(origChildren, function(slide, i){
-			if(slide instanceof HTMLImageElement){
-				var imgDiv = document.createElement('div');
+			if(slide instanceof HTMLImageElement || slide instanceof HTMLAnchorElement){
+				var slideEl = document.createElement('a'),
+					href = '',
+					target = '';
+
+				if(slide instanceof HTMLAnchorElement){
+					href = slide.getAttribute('href');
+					target = slide.getAttribute('target');
+
+					var img = slide.querySelector('img');
+					if(img !== null){
+						slide = img;
+					} else {
+						return;
+					}
+				}
 
-				_deepExtend(imgDiv.dataset, slide.dataset);
+				_deepExtend(slideEl.dataset, slide.dataset);
 				if(slide.dataset.src){
 					// Use data-src for on-demand loading
-					imgDiv.dataset.src = slide.dataset.src;
+					slideEl.dataset.src = slide.dataset.src;
 				} else {
-					imgDiv.dataset.src = slide.src;
+					slideEl.dataset.src = slide.src;
 				}
 
 				// HiDPI support
 				if(_isHighDPI() && slide.dataset.src2x){
-					imgDiv.dataset.src = slide.dataset.src2x;
+					slideEl.dataset.src = slide.dataset.src2x;
 				}
 
-				if(slide.getAttribute('className')) _addClass(imgDiv, slide.getAttribute('className'));
-				if(slide.getAttribute('id')) imgDiv.setAttribute('id', slide.id);
-				if(slide.getAttribute('alt')) imgDiv.innerHTML = slide.getAttribute('alt');
-				imgDiv.setAttribute('role', 'option');
+				if(href) slideEl.setAttribute('href', href);
+				if(target) slideEl.setAttribute('target', target);
+				if(slide.getAttribute('className')) _addClass(slideEl, slide.getAttribute('className'));
+				if(slide.getAttribute('id')) slideEl.setAttribute('id', slide.id);
+				if(slide.getAttribute('alt')) slideEl.innerHTML = slide.getAttribute('alt');
+				slideEl.setAttribute('role', 'option');
 
-				imgDiv.style.cssText += '-webkit-transition-duration:'+ this.settings.transitionDuration +'ms;-moz-transition-duration:'+ this.settings.transitionDuration +'ms;-o-transition-duration:'+ this.settings.transitionDuration +'ms;transition-duration:'+ this.settings.transitionDuration +'ms;';
+				slideEl.style.cssText += '-webkit-transition-duration:'+ this.settings.transitionDuration +'ms;-moz-transition-duration:'+ this.settings.transitionDuration +'ms;-o-transition-duration:'+ this.settings.transitionDuration +'ms;transition-duration:'+ this.settings.transitionDuration +'ms;';
 
-				sliderEl.appendChild(imgDiv);
-				imgSlides.push(imgDiv);
+				sliderEl.appendChild(slideEl);
+				validSlides.push(slideEl);
 			}
 		}.bind(this));
-		var slides = imgSlides;
+		var slides = validSlides;
 		if(slides.length <= 1) return null;
 
 		// Create navigation

diff --git a/themes/default/default.css b/themes/default/default.css
@@ -1,5 +1,5 @@
 /*
- * Lean Slider Default Theme
+ * Ideal Image Slider Default Theme
  * Version: 1.0.0
  */