Skip to content

Instantly share code, notes, and snippets.

@linzjax

linzjax/Recurse-Application-Project.markdown

Last active August 29, 2015 14:19
Show Gist options
  • Save linzjax/7c6c63710e6993c8d58c to your computer and use it in GitHub Desktop.
Save linzjax/7c6c63710e6993c8d58c to your computer and use it in GitHub Desktop.
Download ZIP
Recurse Application Project
Raw
index.html
<DOCTYPE! html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewpoint' content='width=device-width, initial-scale=1'>
<title>Kittens!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Click on an image to enlarge it. </h2>
<!--PUPPIES -->
<nav>
<button href='#' class='thing'>Release the hounds</button>
</nav>
<div id = 'dog_wrap'>
<div class = 'pannel'>
<img src = "http://i.imgur.com/b5WtAB1.gif" >
<img src = "http://i.imgur.com/QKNoTiB.gif" >
<img src = "http://i.imgur.com/znBxtMn.gif" >
<img src = "http://i.imgur.com/QKNoTiB.gif" >
<img src = "http://i.imgur.com/6mybZWe.gif" >
</div>
<div class = 'pannel active'>
<img src = "http://i.imgur.com/b5WtAB1.gif" >
<img src = "http://i.imgur.com/znBxtMn.gif" >
<img src = "http://i.imgur.com/QKNoTiB.gif" >
<img src = "http://i.imgur.com/6mybZWe.gif" ><img src = "http://i.imgur.com/QKNoTiB.gif" >
</div>
</div>
<div id="wrap">
<header>
</header>
<section id='gallery'>
<div class="three-column">
<!--KITTIES-->
<div class='image'>
<a href='http://photo.elsoar.com/wp-content/images/Funny-Cute-Kittens-8.jpg' class='lightbox_trigger'><img src="http://photo.elsoar.com/wp-content/images/Funny-Cute-Kittens-8.jpg" alt="Smirk Sing" class=''></a>
</div>
<div class='image'>
<a href="http://hdwallpapercollection.com/wp-content/uploads/2012/12/two-cute-kitten-wallpaper.jpg" class='lightbox_trigger'><img src="http://hdwallpapercollection.com/wp-content/uploads/2012/12/two-cute-kitten-wallpaper.jpg" alt="Rent holding hands" class=''></a>
</div>
<div class='image'>
<a href="http://www.lovethispic.com/uploaded_images/41500-Playful-Kittens.jpg" class='lightbox_trigger'><img src="http://www.lovethispic.com/uploaded_images/41500-Playful-Kittens.jpg" alt="Comedy of Errors pointing" class=''></a>
</div>
<div class='image'>
<a href='http://1.media.collegehumor.cvcdn.com/60/65/f683752ebb1eb0cfdf2302400f703cef-k14.jpg' class='lightbox_trigger'><img src="http://1.media.collegehumor.cvcdn.com/60/65/f683752ebb1eb0cfdf2302400f703cef-k14.jpg" alt="Hospital sitting" class=''></a>
</div>
<div class='image'>
<a href="http://stuffpoint.com/kittens/image/223699-kittens-cute-kitten.jpg" class='lightbox_trigger'><img src="http://stuffpoint.com/kittens/image/223699-kittens-cute-kitten.jpg" alt="Pig Mailman 2" class=''></a>
</div>
<div class='image'>
<a href="http://images2.fanpop.com/image/photos/13200000/Cute-Kittens-kittens-13247984-536-440.jpg" class='lightbox_trigger'><img src="http://images2.fanpop.com/image/photos/13200000/Cute-Kittens-kittens-13247984-536-440.jpg" alt="Comedy of Errors awkward" class=''></a>
</div>
<div class='image'>
<a href='http://www.signsfunny.com/wp-content/uploads/2012/09/cute-kittens-3.jpg' class='lightbox_trigger'><img src="http://www.signsfunny.com/wp-content/uploads/2012/09/cute-kittens-3.jpg" alt="Camalot" class=''></a>
</div>
<div class='image'>
<a href="http://imgc.allpostersimages.com/images/P-473-488-90/21/2144/PCBCD00Z/posters/jane-burton-blue-dutch-rabbit-and-four-3-week-babies-and-black-and-white-kitten.jpg" class='lightbox_trigger'><img src="http://imgc.allpostersimages.com/images/P-473-488-90/21/2144/PCBCD00Z/posters/jane-burton-blue-dutch-rabbit-and-four-3-week-babies-and-black-and-white-kitten.jpg" alt="Smirking" class=''></a>
</div>
<div class='image'>
<a href="http://images2.fanpop.com/image/photos/9800000/-Getting-Up-To-Mischief-cute-kittens-9820830-1024-768.jpg" class='lightbox_trigger'><img src="http://images2.fanpop.com/image/photos/9800000/-Getting-Up-To-Mischief-cute-kittens-9820830-1024-768.jpg" alt='Rent holding her' class=''></a>
</div>
<div class='image'>
<a href="http://images4.fanpop.com/image/photos/16100000/Cute-Kittens-kittens-16123995-1280-800.jpg" class='lightbox_trigger'><img src="http://images4.fanpop.com/image/photos/16100000/Cute-Kittens-kittens-16123995-1280-800.jpg" alt="Pig Mailman 2" class=''></a>
</div>
<div class='image'>
<a href="http://www.awesomelycute.com/gallery/2013/09/super-cute-kitten-2268.jpg" class='lightbox_trigger'><img src="http://www.awesomelycute.com/gallery/2013/09/super-cute-kitten-2268.jpg" alt="Pig Mailman 2" class=''></a>
</div>
<div class='image'>
</div>
</div>
</div>
</section>
<p>*none of these images belong to me</p>
</div>
</body>
</html>
Raw
Recurse-Application-Project.markdown
Raw
script.js
// create lightbox styling
function inject_styles(rule) {
var div = $("<div />", {
html: '<style>' + rule + '</style>'
}).appendTo("body");
};
function lightbox_style() {
inject_styles("#lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0, .7) repeat; text-align:center; }");
inject_styles("#content img { box-shadow:0 0 25px #111; -webkit-box-shadow:0 0 25px #111; -moz-box-shadow:0 0 25px #111; max-width: 90%; max-height: 90%; height: auto; width: auto;}");
inject_styles("#content {padding-top: 20px; height: 98%;}");
};
// if lightbox does not exist: create light box. ONLY DO THIS ONCE.
function lightbox_create(image_clicked) {
var create_lightbox = '<div id="lightbox">' + '<div id="content">' + '<img src = "' + image_clicked + '">' + '</div>' + '</div>';
$('body').append(create_lightbox);
};
// if lightbox DOES exist: insert new image
function lightbox_add_image(image_clicked) {
$('#content').html('<img src = "' + image_clicked + '">');
};
$(document).ready(function(){
// lightbox pattern:
// on clicking a gallery image
$('.lightbox_trigger').click(function(e){
e.preventDefault();
// store clicked images href
var image_href = $(this).attr("href");
//check if lightbox exists
if ($('#lightbox').length === 0) {
//insert lightbox style onto the page
lightbox_style();
//insert lightbox html onto the page
lightbox_create(image_href);
}
//if lightbox exists: do this instead
else {
//remove .hide();
$('#lightbox').show();
lightbox_add_image(image_href);
}
});
//if the lightbox is active, clicking anywhere will clear it.
$('#lightbox').live('click', function() {
$('#lightbox').hide();
});
/************
PUPPIES
************/
$('button').click(function(e){
e.preventDefault();
$('.pannel').toggleClass('active');
});
});
Raw
style.css
/*****************
GENERAL
*****************/
body {
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
p {
font-size: 10px;
}
h2 {
text-align: center;
}
#wrap{
width: 60%;
background-color: #aaa;
padding: 1% 5%;
margin: 0 auto;
margin-top: 5%;
box-shadow: 0px 0px 50px rgba(0,0,0, .5);
border: solid white 5px;
}
/*****************
GALLERY
*****************/
#gallery {
width: 100%;
margin: 0 auto;
padding: 0;
}
.three-column {
line-height: 0;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 15px;
column-count: 3;
column-gap: 15px;
}
.lightbox_trigger img {
width: 100% !important;
height: auto !important;
margin: 15px 15px 0 0;
border: solid white 4px;
}
/*********
PUPPIES
*********/
nav {
width: 10%;
float: left;
margin-left: 20px;
}
button {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #black;
border-radius: 10%;
color:white;
text-decoration:none;
font-weigth: bold;
font-size: 20px;
}
#dog_wrap {
width: 100%;
position: absolute;
margin: 0 auto;
margin-top: 20%;
z-index: 1;
pointer-events:none;
overflow: hidden;
}
.pannel img {
margin: 0 -20px;
}
.pannel {
width: 150%;
position: relative;
diplay: inline-block;
left: -100%;
overflow: hidden;
transition: all 8000ms;
z-index: 1;
}
.pannel.active {
left: 100%;
overflow: hideen:
}
.pannel img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.active img {
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment