Skip to content

Instantly share code, notes, and snippets.

@jacobcpeters

jacobcpeters/index.html

Last active August 29, 2015 14:04
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 jacobcpeters/c03e03e8dc87932f7fb6 to your computer and use it in GitHub Desktop.
Save jacobcpeters/c03e03e8dc87932f7fb6 to your computer and use it in GitHub Desktop.
Download ZIP
NIX slider modification
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blur</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>1275 <span>Lincoln</span></h1>
</header>
<main>
<figure>
<div class="backstrip"></div>
<div class="strip">
<img class="slide" src="images/0.jpg" data-path="images/0.jpg">
<img class="slide feature" src="images/1.jpg" data-path="images/1.jpg">
<img class="slide" src="images/2.jpg" data-path="images/2.jpg">
<img class="slide" src="images/3.jpg" data-path="images/3.jpg">
<img class="slide" src="images/4.jpg" data-path="images/4.jpg">
<img class="slide" src="images/5.jpg" data-path="images/5.jpg">
<img class="slide" src="images/6.jpg" data-path="images/6.jpg">
<img class="slide" src="images/7.jpg" data-path="images/7.jpg">
<img class="slide" src="images/8.jpg" data-path="images/8.jpg">
<img class="slide" src="images/9.jpg" data-path="images/9.jpg">
<img class="slide" src="images/10.jpg" data-path="images/10.jpg">
<img class="slide" src="images/11.jpg" data-path="images/11.jpg">
</div>
<figcaption>
<div id="progress"></div>
</figcaption>
<nav>
<button id="next">
<svg class="right">
<g transform="translate(-341.49538,-415.61328)">
<path d="m 341.58508,445.52357 14.82059,-14.9103 -14.82059,-14.91029"/>
</g>
</svg>
</button>
<button id="prev">
<svg class="left" viewBox="0 0 15 30">
<g transform="translate(-341.49538,-415.61328)">
<path d="m 356.40567,445.52357 -14.82059,-14.9103 14.82059,-14.91029"/>
</g>
</svg>
</button>
</nav>
</figure>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="stack-blur.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
slider.js
// Global variable declarations
var i = 1;
var nudge = -50;
var bigNudge = -100;
var imgs = document.getElementsByTagName('img');
$( document ).ready(function(){
/**
* Why the following two variables can't be global... I don't know. Maybe a closure issue?
*/
// This creates an array out of all the img tags on the page.
var array = jQuery.makeArray(imgs);
// This defines an increment for the progress line.
var inc = 100 / array.length;
var backstrip = $('.backstrip'),
strip = $('.strip');
//This makes the progress line grow with each slide.
$('#progress').css('width', inc * i + inc + '%');
// This is what happens when the previous button is clicked.
$( '#prev' ).on('click', function(){
var currentImg = $('.feature');
var prevImg = currentImg.prev('img');
if ( prevImg.length ){
currentImg.removeClass("feature");
strip.removeClass('slide' + i.toString());
backstrip.removeClass('backslide' + i.toString());
i--;
strip.addClass('slide' + i.toString());
backstrip.addClass('backslide' + i.toString());
prevImg.addClass("feature");
$('#progress').css('width', inc * i + inc + '%');
}
})
// This is what happens when the next button is clicked.
$( '#next' ).on('click', function(){
var currentImg = $('.feature');
var nextImg = currentImg.next('img');
if ( nextImg.length ){
currentImg.removeClass("feature");
strip.removeClass('slide' + i.toString());
backstrip.removeClass('backslide' + i.toString());
i++;
strip.addClass('slide' + i.toString());
backstrip.addClass('backslide' + i.toString());
nextImg.addClass("feature");
$('#progress').css('width', inc * i + inc + '%');
}
})
});
(function() {
var styles = '',
styleElement = document.createElement('style'),
canvas = document.createElement('canvas'),
canvasClone,
container = document.querySelector('.backstrip'),
loadEvent = document.createEvent('HTMLEvents');
loadEvent.initEvent('load', false, false);
canvas.classList.add('backslide');
for(var i = 0, l = imgs.length; i < l; ++i) {
canvasClone = canvas.cloneNode(false);
canvasClone.setAttribute('id', 'backstrip-b' + i.toString());
container.appendChild(canvasClone);
//closure to lock the index and canvas element in for the event callback
(function (index, canvas) {
imgs[index].addEventListener('load', function() {
this.setAttribute('id', 'backstripimg-b' + index.toString());
stackBlurImage('backstripimg-b' + index.toString(),
'backstrip-b' + index.toString(),
25,
false );
canvas.removeAttribute('style');
});
}(i, canvasClone));
//fix for load event not triggering if images are cached
if(imgs[i].complete) {
imgs[i].dispatchEvent(loadEvent);
}
//styles so the slides can be moved with classes. This cuts the time it takes to recalculate style on slide changes
styles += ' div.backslide' + i.toString() + '{transform: translateX(' + ((i-1) * bigNudge).toString() + 'vw);}';
styles += ' div.slide' + i.toString() + '{transform: translateX(' + ((i-1) * nudge).toString() + 'vw);}';
}
styleElement.innerHTML = styles;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}());
Raw
style.css
/* line 51, ../sass/screen.scss */
main figure .backstrip {
position: absolute;
white-space: nowrap; /*changed*/
top: 0;
height: 100%;
min-height: 30vw;
left: -100%; /*changed*/
transition: transform 1s; /*changed*/
}
/* line 60, ../sass/screen.scss */
main figure .backstrip .backslide {
display: inline-block; /*changed*/
height: 100%;
width: 100vw;
}
/* line 67, ../sass/screen.scss */
main figure .strip {
position: absolute;
white-space: nowrap; /*changed*/
top: calc(50% - 18vw / 2 - 25px);
height: 18vw;
height: auto;
width: 1000%;
left: 35vw; /*changed*/
transition: transform 1s; /*changed*/
margin-left: -50vw;
}
/* line 78, ../sass/screen.scss */
main figure .strip .slide {
display: inline-block; /*changed*/
margin-left: 20vw;
width: 30vw;
height: 18vw;
background: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment