Skip to content

Instantly share code, notes, and snippets.

@brunorafaeI

brunorafaeI/com'on slideshow.markdown

Last active May 17, 2016 16:01
Show Gist options
  • Save brunorafaeI/898f9681efb25121126cf127291ee600 to your computer and use it in GitHub Desktop.
Save brunorafaeI/898f9681efb25121126cf127291ee600 to your computer and use it in GitHub Desktop.
Download ZIP
com'on slideshow
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<!-- //http://www.alsacreations.com/tuto/liste/5-javascript.html -->
<head>
<meta charset="UTF-8" />
<title>Com'on - Association de Saint-Nazaire</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="logo"><a href="#"><img src="http://www.com-on.be/templates/comon_2015/images/logo.png" alt="Com'on st-nazaire" width="60%" height="60%" /></a></div>
<div class="contact-top">
<p>02 40 66 11 78</p>
<p>panonazaire@orange.fr</p>
</div>
<div class="reseau">
</div>
</header>
<nav class="navigation">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos Services</a></li>
<li><a href="#">Commander</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>
</ul>
</nav>
<div id="slideshow">
<ul class="slides">
<li><img src="http://www.chercheinfo.com/uploads/0-52d5eec2f9.jpg" width="620" height="320" alt="Pano boutique" /></li>
<li><img src="http://ac-franchise.com/media_files/pano_boutique_poste_fabrication" width="620" height="320" alt="Pano boutique" /></li>
<li><img src="http://www.pano-group.com/wp-content/uploads/2013/12/PB-Rixheim-espace-accueil.jpg" width="620" height="320" alt="Pano boutique" /></li>
<li><img src="http://www.pano-evreux.fr/wp-content/uploads/2015/06/Convention-2015.jpg" width="620" height="320" alt="Pano boutique" /></li>
</ul>
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<section>
<article>
<title>
Nouveautés
</title>
<div class="img-article"><a href="#"><img src="http://www.pano-group.com/wp-content/uploads/2014/01/portrait-St%C3%A9phane-Danilo1.jpg" alt="" width="40%" height="40%" /></a></div>
<h1>Nouveautés</h1>
<p>Contenu des nouveautés</p>
</article>
<article>
<title>
Commander
</title>
<h1>Commander</h1>
<p>contenu de la commande</p>
</article>
</section>
<aside>
<title>
Nos Clients
</title>
</aside>
<footer>
<p>Com'on Association de pano boutique - Saint-Nazaire Corpyright 2016 <br/>115, Avenue de la République - 44600 Saint-Nazaire France</p>
<p></p>
</footer>
</body>
</html>
Raw
script.js
$(function(){ $(window).scroll(function () {
//Au scroll dans la fenetre on déclenche la fonction
if ($(this).scrollTop() > 80) {
//si on a défilé de plus de 150px du haut vers le bas
$('nav').addClass("fixNav"); //on ajoute la classe "fixNavigation" à <div id="navigation">
} else { $('nav').removeClass("fixNav");
//sinon on retire la classe "fixNavigation" à <div id="navigation">
} }); });
//SlideShow
$(window).load(function(){
// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly.
// Testing wether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');
// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.
var slides = $('#slideshow li'),
current = 0,
slideshow = {width:0,height:0};
setTimeout(function(){
window.console && window.console.time && console.time('Generated In');
if(supportCanvas){
$('#slideshow img').each(function(){
if(!slideshow.width){
// Taking the dimensions of the first image:
slideshow.width = this.width;
slideshow.height = this.height;
}
// Rendering the modified versions of the images:
createCanvasOverlay(this);
});
}
window.console && window.console.timeEnd && console.timeEnd('Generated In');
$('#slideshow .arrow').click(function(){
var li = slides.eq(current),
canvas = li.find('canvas'),
nextIndex = 0;
// Depending on whether this is the next or previous
// arrow, calculate the index of the next slide accordingly.
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
if(supportCanvas){
// This browser supports canvas, fade it into view:
canvas.fadeIn(function(){
// Show the next slide below the current one:
next.show();
current = nextIndex;
// Fade the current slide out of view:
li.fadeOut(function(){
li.removeClass('slideActive');
canvas.hide();
next.addClass('slideActive');
});
});
}
else {
// This browser does not support canvas.
// Use the plain version of the slideshow.
current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});
},100);
// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop.
function createCanvasOverlay(image){
var canvas = document.createElement('canvas'),
canvasContext = canvas.getContext("2d");
// Make it the same size as the image
canvas.width = slideshow.width;
canvas.height = slideshow.height;
// Drawing the default version of the image on the canvas:
canvasContext.drawImage(image,0,0);
// Taking the image data and storing it in the imageData array:
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
data = imageData.data;
// Loop through all the pixels in the imageData array, and modify
// the red, green, and blue color values.
for(var i = 0,z=data.length;i<z;i++){
// The values for red, green and blue are consecutive elements
// in the imageData array. We modify the three of them at once:
data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
// After the RGB elements is the alpha value, but we leave it the same.
++i;
}
// Putting the modified imageData back to the canvas.
canvasContext.putImageData(imageData,0,0);
// Inserting the canvas in the DOM, before the image:
image.parentNode.insertBefore(canvas,image);
}
});
Raw
style.css
* {margin:0px; padding:0px; overflow-x:none; font-family: Verdana,sans-serif;}
html, body {
height:100%;
background: url(http://www.communide.fr/medias/files/blue-yellow-bokeh-circles-desktop-wallpaper.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
main{
position:relative;
min-height:100%;
max-width:99%;
}
header {
height:3.5em;
background:rgba(255,255,255, 0.9);
padding:20px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0, 0.8) inset;
}
.logo{
float:left;
left: 1.5em;
}
.contact-top {
float:left;
width:220px;
margin-left:1.5em;
text-align:right;
font-size:0.9em;
}
.reseau {
float:left;
margin-left:1.5em;
height:40px;
padding:6px;
width:220px;
background-color:#FF0;
}
/* SlideShow */
#slideshow{
background-color:#F5F5F5;
border:1px solid #FFFFFF;
height:340px;
margin:150px auto 0;
position:relative;
width:640px;
-moz-box-shadow:0 0 22px #111;
-webkit-box-shadow:0 0 22px #111;
box-shadow:0 0 22px #111;
}
#slideshow ul{
height:320px;
left:10px;
list-style:none outside none;
overflow:hidden;
position:absolute;
top:10px;
width:620px;
}
#slideshow li{
position:absolute;
display:none;
z-index:10;
}
#slideshow li:first-child{
display:block;
z-index:1000;
}
#slideshow .slideActive{
z-index:1000;
}
#slideshow canvas{
display:none;
position:absolute;
z-index:100;
}
#slideshow .arrow{
height:86px;
width:60px;
position:absolute;
background:url('http://img15.hostingpics.net/pics/329960arrows.png') no-repeat;
top:50%;
margin-top:-43px;
cursor:pointer;
z-index:5000;
}
#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}
#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}
nav {
float:left;
height:50px;
width:100%;
background:rgba(0,0,0, 0.7);
}
.fixNav {
z-index: 9999;
position: fixed;
top:0px;
}
nav ul {
list-style:none;
display:block;
margin-left:40%;
}
nav ul li {
display:inline;
}
nav ul li a {
float:left;
text-decoration:none;
font-size:0.9em;
line-height:1.5;
font-weight:bold;
color: rgba(255,128,25, 0.9);
border-bottom: 0px solid rgba(0,0,0, 0);
transition: border 0.6s;
padding:18px 12px 0px 12px;
}
nav ul li a:hover{
color:rgba(255,255,255, 0.9);
border-bottom:4px solid rgba(255,128,25, 1);
transition: border 0.4s;
}
section{
position:absolute;
background-color: rgba(153,0,52, 0.9);
margin:5em 2em;
width:60%;
height:95%;
border-radius: 0px 10px 10px 0px;
}
section article {
margin:12px;
padding:8px;
border:1px dashed rgba(255,255,255, 1);
border-radius: 0px 10px;
}
.img-article {
float:left;
}
aside {
position:absolute;
margin:5em 2em;
width: 30%;
height:95%;
right:0;
background-color: rgba(204,165,20, 0.8);
border-radius: 10px 0px 0px 10px;
}
footer {
position:fixed;
width:99%;
height:2em;
bottom:0px;
text-align:center;
color: rgb(50,50,50);
font-size:0.8em;
background-color: rgba(255,255,255, 0.8);
padding:0.6em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment