Skip to content

Instantly share code, notes, and snippets.

@rfriberg

rfriberg/index.html

Created January 9, 2014 00:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rfriberg/8327361 to your computer and use it in GitHub Desktop.
Save rfriberg/8327361 to your computer and use it in GitHub Desktop.
Download ZIP
D3 slider example
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.description {
font-size: 12px;
font-weight: bold;
width: 700px;
}
.description span {
display: inline-block;
width: 60px;
}
.description input[type=text] {
width: 400px;
}
.description button {
border: 0;
padding: 5px 10px;
background: #121212;
color: #fff;
border-radius: 40px;
}
.description button:hover {
background: #F92235;
cursor: pointer;
}
.description #update {
font-size: 14px;
float: right;
margin-top: -20px;
width: 80px;
height: 40px;
}
/* image slider */
.photos {
cursor: ew-resize;
position:relative;
overflow:visible;
height: 400px;
width: 700px;
margin-top: 50px;
}
.photos, .photos .layer {
height: 400px;
}
.photos .separator {
border-left: 1px solid #000;
border-right: 1px solid #000;
height: 430px;
left: -1px;
line-height: 30px;
overflow: visible;
position: absolute;
top: -30px;
width: 2px;
z-index: 10;
}
.photos .separator div {
background: rgba(97,78,153,0.6);
background: #333;
border-left: 1px solid #fff;
color: #F2EFE9;
font-family: 'Bree Serif', sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 30px;
position: absolute;
left: 0px;
top: 0px;
text-align: center;
width: 75px;
z-index: 9;
border-radius: 5px 50px 50px 5px
}
.photos .separator div.before {
left: -75px;
border-left: none;
border-right: 1px solid #fff;
border-radius: 50px 5px 5px 50px
}
#photo-before {
max-width:100%;
min-width:100%;
position:absolute;
background:url(http://www.mapbox.com/osm-data-report/images/before-crop.jpg) no-repeat;
background-size:100% auto !important;
}
#photo-after {
max-width:100%;
min-width:100%;
position:absolute;
background:url(http://www.mapbox.com/osm-data-report/images/after-crop.jpg) no-repeat;
background-size:100% auto !important;
}
</style>
<body>
<h2>Before and After images</h2>
<div class='photos'>
<div class="separator">
<div class="before">Before</div>
<div class="after">After</div>
</div>
<div class='layer' id='photo-after'></div>
<div class='layer' id='photo-before'></div>
</div>
<div class="description">
<p>Add your own image urls: <br />
<span>Before:</span><input type="text" id="before_pic" value="" /><br />
<span>After:</span><input type="text" id="after_pic" value="" />
<button id="update" name="update" onclick="updatePhotos('custom');">Update</button>
</p>
<p>Or try one of these:<br />
<button name="antarctica" onclick="updatePhotos('http://www.nasa.gov/images/content/753090main_bedmap2.jpg', 'http://www.nasa.gov/images/content/753191main_AA_bedrock_surface.4960.jpg');">Under the ice</button>
<button name="tornado" onclick="updatePhotos('http://i.imwx.com/web/2013/plaza-towers-2-before.jpg', 'http://i.imwx.com/web/2013/plaza-towers-2-after.jpg');">Tornado damage</button>
</p>
<script src='http://d3js.org/d3.v2.min.js'></script>
<script>
/* Update photo urls */
var updatePhotos = function(b,a) {
if(b == 'custom' || a == 'custom') {
b = document.getElementById('before_pic').value;
a = document.getElementById('after_pic').value;
if( !b.length || !a.length) {
alert('Enter image URLs');
return;
}
}
document.getElementById('photo-before').style.background="url("+b+") no-repeat";
document.getElementById('photo-after').style.background="url("+a+") no-repeat";
}
/* Gettin down to D3 business */
var beforeLayer = d3.select('#photo-before').node();
d3.select('.photos')
.on('mousemove', function() {
var pos = d3.mouse(this);
d3.timer.flush();
d3.timer(function() {
d3.select('.separator').style("left", pos[0] + 'px');
beforeLayer.style.clip = 'rect(0px ' + pos[0] + 'px 9999999px 0px)';
return true;
}, 0);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment