Skip to content

Instantly share code, notes, and snippets.

@mhulse mhulse/slideshow.css
Created Sep 30, 2016

Embed
What would you like to do?
Simple slideshow example using jquery (depends on imagesLoaded library).
/*#slideshow { display: none; }
@media (min-width: 48em) { */
#slideshow {
display: block;
background-position: center top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-khtml-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
/*}*/
@media (min-width: 72em) {
#slideshow {
right: 10%;
left: 10%
}
}
#hero {
border-width: 0 0 2px;
border-style: solid;
border-color: #224f70;
background-color: #224f70;
padding: 10px;
position: relative;
min-height:200px;
}
#hero aside {
xbackground: rgba(243, 247, 250, .9);
xpadding: 20px;
xborder-radius: 6px;
display:none;
}
#hero aside > :first-child { margin-top: 0; }
#hero aside > :last-child { margin-bottom: 0; }
#hero p span { display: none; }
@media (min-width: 48em) {
#hero {
background-image: url(../images/logo-watermark.png);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 80%;
padding: 0;
}
#hero .wrap {
position: relative;
height: 30vh;
}
#hero aside {
display:block;
background: rgba(243, 247, 250, .9);
padding: 20px;
border-radius: 6px;
position: absolute;
left: 50%;
bottom: 20px;
right: 20px;
z-index: 2;
}
#hero p span { display: inline; }
}
@media (min-width: 72em) {
#hero .wrap { height: 50vh; }
}
<section id="hero" class="container">
<div class="wrap">
<aside>
<h1>Welcome to XXXXXXXXXXXXXXXXX</h1>
<p>Description goes here.</p>
<p><a href="plans.html" class="button button-success">View Access Options</a></p>
</aside>
</div>
<div id="slideshow"></div>
</section>
(function() {
'use strict';
var i = 0;
var $timeout = 0;
var $parallax = $('#slideshow');
var $images = [{
url: 'slideshow/FamilyReunion.jpg',
caption: '',
credit: '',
org: ''
}, {
url: 'slideshow/JasonWendyEyecontact.jpg',
caption: '',
credit: '',
org: ''
}, {
url: 'slideshow/JasonWendyHandsOnly.jpg',
caption: '',
credit: '',
org: ''
}, {
url: 'slideshow/JohnnyKaterinaFaceMassage2.jpg',
caption: '',
credit: '',
org: ''
}, {
url: 'slideshow/JuanClaudiaByline.jpg',
caption: '',
credit: '',
org: ''
}, {
url: 'slideshow/KellyNateByline.jpg',
caption: '',
credit: '',
org: ''
}, {
url: 'slideshow/MelissaJosephSmilingEdited.jpg',
caption: '',
credit: '',
org: ''
}, {
url: 'slideshow/ThomasHellenShoulderMassageEnh.jpg',
caption: '',
credit: '',
org: ''
}];
// http://stackoverflow.com/a/5533262/922323
var len = function(obj) {
var l = 0;
$.each(obj, function(i, elem) {
l++;
});
return l;
};
function shuffleArray(array) {
var i;
var j;
var temp;
for (i = array.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
$images = shuffleArray($images);
window.clearTimeout($timeout);
// Basic slideshow:
(function timer() {
// Load the image first:
$('<img src="' + $images[i].url + '">')
.imagesLoaded(function() {
//console.table($images)
// Hide the current image:
$parallax.fadeOut(1000, function() {
// Caption?
var template = ($images[i].caption) ? [
'<span>',
'<span>',
$images[i].caption,
'</span>',
(($images[i].credit) && ('<br><span>' + $images[i].credit) + (($images[i].credit) && ('<br><span>/</span>' + $images[i].org)) + '</span>'),
'</span>'
].join('\n') : '';
// Link?
if ($images[i].link) {
// Yup, then hot it up:
$parallax.attr('href', $images[i].link);
} else {
// Nope, so might as well remove it:
$parallax.removeAttr('href');
}
// Update caption and show new image:
$parallax
.html(template)
.css('background-image', 'url(' + $images[i].url +')')
.fadeIn(1000);
i++;
// Start from beginning?
if (i == len($images)) {
i = 0; // Yes.
}
// Rinse, wash and repeat:
$timeout = window.setTimeout(timer, 20000);
});
});
}());
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.