duplicate image slider

danswick · danswick · May 3, 2015 · Mar 18, 2015 · Mar 18, 2015 · Mar 20, 2015
commit 70fab90241f1b0f330d951f1f44d2d09e71dcee0
diff --git a/image_slider2/README.md b/image_slider2/README.md
@@ -0,0 +1,12 @@
+## A little image slider demo. 
+
+This little demo compares two images of the same size by way of super fun slidey goodness. 
+
+### USAGE
+
+1. Get two (or more) images that you would like to compare. 
+2. Resize and/or crop them so they are exactly the same size. 
+3. Swap some values in the code! 
+    - Change the `width` and `height` values in `style.css`. 
+    - Change the choices in the dropdown menu (`#image-select`) in `index.html`. 
+    - Change the filepath and/or file key values in the `imagePaths` object in `main.js`. 
diff --git a/image_slider2/img/HP-1946.jpg b/image_slider2/img/HP-1946.jpg
diff --git a/image_slider2/img/HP-2012.jpg b/image_slider2/img/HP-2012.jpg
diff --git a/image_slider2/img/IBSP-1946.jpg b/image_slider2/img/IBSP-1946.jpg
diff --git a/image_slider2/img/IBSP-2012.jpg b/image_slider2/img/IBSP-2012.jpg
diff --git a/image_slider2/img/LB-1946.jpg b/image_slider2/img/LB-1946.jpg
diff --git a/image_slider2/img/LB-2012.jpg b/image_slider2/img/LB-2012.jpg
diff --git a/image_slider2/img/Thumbs.db b/image_slider2/img/Thumbs.db
diff --git a/image_slider2/index.html b/image_slider2/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    	<meta charset="utf-8">
+    	<meta name="description" content="Image Slider">
+		<title>Image Compare</title>
+
+		<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700' rel='stylesheet' type='text/css'>
+
+		<!-- external CSS link -->
+		<link rel="stylesheet" href="style/style.css">
+
+		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
+	</head>
+	<body>
+		<header>
+			<h1>Shoreline Erosion</h1>
+			<h2>Comparing archival (1946) and current (2012) aerial photos</h2>
+		</header>
+		<content>
+			<div id="choice">
+				<div>Select a location:</div>
+
+
+				<!-- ==================================================================
+				CHAGNGE VALUES HERE
+				================================================================== -->
+				<select id="image-select">
+					<option value="HP">Highland Park</option>
+					<option value="IBSP">IL Beach State Park</option>
+					<option value="LB">Lake Bluff</option>
+				</select>
+				<!--  END VALUES SECITON   -->
+
+
+			</div>
+			<div id="comparison">
+	  			<figure id="base-image">
+	    			<div id="divisor"></div>
+	  			</figure>
+	  			<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
+			</div>
+		</content>
+		<script src="js/jquery-2.1.3.min.js"></script>
+		<script src="js/main.js"></script>
+	</body>
+</html>
diff --git a/image_slider2/js/jquery-2.1.3.min.js b/image_slider2/js/jquery-2.1.3.min.js
diff --git a/image_slider2/js/main.js b/image_slider2/js/main.js
@@ -0,0 +1,32 @@
+var divisor = document.getElementById("divisor"),
+slider = document.getElementById("slider");
+function moveDivisor() { 
+	divisor.style.width = slider.value+"%";
+}
+
+
+/*==================================================================
+SWAP IN YOUR IMAGE LOCATIONS BELOW
+==================================================================*/
+// Note that the key (left value, before the ':') should have a 1
+// or a 2 in order for the function below to work. These should 
+// corresepond to the base and comparrison images you would like to 
+// visualize.
+
+var iamgePaths = {
+	HP1: "img/HP-1946.jpg",
+	HP2: "img/HP-2012.jpg",
+	IBSP1: "img/IBSP-1946.jpg",
+	IBSP2: "img/IBSP-2012.jpg",
+	LB1: "img/LB-1946.jpg",
+	LB2: "img/LB-2012.jpg"
+};
+
+
+$('#image-select').change(function() {
+	var userChoice = $('#image-select').val();
+	var userVariable1 = userChoice.concat('1');
+	var userVariable2 = userChoice.concat('2');
+	$('#base-image').css("background-image", "url(" + iamgePaths[userVariable1] + ")");
+	$('#divisor').css("background-image", "url(" + iamgePaths[userVariable2] + ")");
+});
diff --git a/image_slider2/style/style.css b/image_slider2/style/style.css
@@ -0,0 +1,100 @@
+body, html {
+  height: 1000px;
+}
+
+body, #comparison {
+  margin: 0 auto;
+  text-align: center;
+}
+
+div#comparison { 
+  max-width: 600px;
+  overflow: hidden;
+  margin-bottom: 50px; }
+div#comparison figure { 
+
+/* ==================================================================
+   A D J U S T    I M A G E     S I Z E    H E R E 
+   ================================================================== */
+/*** NOTE: your images must be the same size or things will get freaky!*/
+
+  width: 600px;
+  height: 775px;
+  background-image: url(../img/HP-1946.jpg); 
+  background-size: cover;
+  position: relative;
+  font-size: 0;
+  margin: 0; 
+}
+div#comparison figure > img { 
+  position: relative;
+  width: 100%;
+}
+div#comparison figure div { 
+  background-image: url(../img/HP-2012.jpg);
+  background-size: cover;
+  position: absolute;
+  width: 50%; 
+  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
+  overflow: hidden;
+  bottom: 0;
+  height: 100%;
+}
+
+input[type=range]{
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  position: relative;
+  top: -2rem; left: -2%;
+  background-color: rgba(255,255,255,0.1);
+  width: 102%; 
+}
+input[type=range]:focus { 
+  outline: none; 
+}
+input[type=range]:active { 
+  outline: none;  
+}
+
+input[type=range]::-moz-range-track { 
+  -moz-appearance:none;
+    height:15px;
+    width: 98%;
+    background-color: rgba(255,255,255,0.1); 
+    position: relative;
+    outline: none;    
+ }
+input[type=range]::active { 
+  border: none; 
+  outline: none;
+}
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance:none;
+    width: 20px; height: 15px;   
+    background: #fff;
+    border-radius: 0;
+   }
+input[type=range]::-moz-range-thumb {
+  -moz-appearance: none;
+  width: 20px;
+  height: 15px;
+  background: #fff;
+  border-radius: 0;
+     }   
+input[type=range]:focus::-webkit-slider-thumb {
+    background: rgba(255,255,255,0.5);
+   }
+input[type=range]:focus::-moz-range-thumb {
+    background: rgba(255,255,255,0.5);
+   }
+
+select, #choice div {
+  margin: 20px 10px 0px 10px;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: sans-serif;
+}
+
+#divisor {
+  border: 1px dashed #fff;
+}