Added CHANGELOG and bower.json

Codeinwp · Sep 2, 2014 · 65c77ab · 65c77ab
1 parent db938be
commit 65c77ab
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Ideal Image Slider Changelog
+
+Version 1.0.0 - 2014.09.02
+--------------------------
+ * Initial release
diff --git a/bower.json b/bower.json
@@ -0,0 +1,23 @@
+{
+  "name": "ideal-image-slider",
+  "main": "ideal-image-slider.js",
+  "version": "1.0.0",
+  "homepage": "https://github.com/gilbitron/Ideal-Image-Slider",
+  "authors": [
+    "Gilbert Pellegrom <[email protected]>"
+  ],
+  "description": "Quite simply the ideal Image Slider in vanilla JS",
+  "keywords": [
+    "image",
+    "slider",
+    "javascript",
+    "vanilla"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "tests"
+  ]
+}
diff --git a/example/index.html b/example/index.html
@@ -6,29 +6,29 @@
     <title>Ideal Image Slider Example</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/normalize.css">
-	<link rel="stylesheet" href="css/style.css">
+	<link rel="stylesheet" href="../ideal-image-slider.css">
     <link rel="stylesheet" href="../themes/default/default.css">
     <style media="screen">
-    .slider {
+    #slider {
         max-width: 900px;
         margin: 50px auto;
     }
     </style>
 </head>
 <body>
 
-	<div class="slider">
-		<img src="img/1.jpg" data-src-2x="img/[email protected]" alt="" />
-		<img data-src="img/2.jpg" data-src-2x="img/[email protected]" src="" alt="" />
-		<img data-src="img/3.jpg" data-src-2x="img/[email protected]" src="" alt="" />
-		<img data-src="img/4.jpg" data-src-2x="img/[email protected]" src="" alt="" />
+	<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" />
+		<img data-src="img/4.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 4" />
         <img data-src="img/5.jpg" src="" alt="" />
 	</div>
 
     <script src="../ideal-image-slider.js"></script>
 	<script>
 	var slider = new IdealImageSlider.Slider({
-		selector: '.slider'
+		selector: '#slider'
 	});
     slider.start();
 	</script>

diff --git a/example/css/style.css → ideal-image-slider.css b/example/css/style.css → ideal-image-slider.css
@@ -1,3 +1,13 @@
+/*
+ * Ideal Image Slider v1.0.0
+ *
+ * By Gilbert Pellegrom
+ * http://gilbert.pellegrom.me
+ *
+ * Free to use and abuse under the MIT license.
+ * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
+ */
+
 .ideal-image-slider {
 	position: relative;
 	overflow: hidden;
@@ -11,6 +21,7 @@
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
 	background-size: cover;
+	text-indent: -999%;
 }
 
 /* Slide effect */

diff --git a/ideal-image-slider.js b/ideal-image-slider.js
@@ -1,3 +1,13 @@
+/*
+ * Ideal Image Slider v1.0.0
+ *
+ * By Gilbert Pellegrom
+ * http://gilbert.pellegrom.me
+ *
+ * Free to use and abuse under the MIT license.
+ * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
+ */
+
 var IdealImageSlider = (function() {
 	"use strict";
 
@@ -146,6 +156,7 @@ var IdealImageSlider = (function() {
 
 				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');
 
 				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;';