Develop Reference

Close button doesn't work on many Android devices

This is my code:
function setToTop(t) {
var n = 0;
$(".box").each(function(t, o) {
var e = Number.parseInt($(o).css("z-index"));
e = Number.isNaN(e) ? 0 : e, n = Math.max(n, e)
}), t.css({
zIndex: n + 1
})
}
$(function() {
$(document).mouseleave(function() {
$(document).trigger("mouseup")
}), $(".box").draggable({
helper: "original",
containment: "body",
drag: function(t, n) {
n.offset.left < 0 && (n.position.left = n.position.left - n.offset.left)
},
stop: function(t, n) {},
start: function(t, n) {
setToTop(n.helper)
}
})
}), $(".box span").click(function() {
$(this).parents(".box").css("display", "none")
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 50px;
font-family: Arial;
background-color: rgb(220, 220, 220);
}
.box {
background-color: yellow;
color: black;
padding: 20px;
display: block;
position: absolute;
border: 2px black;
cursor: all-scroll;
border: 1px solid black;
}
.box:nth-child(1) {
left: 20%;
top: 10%;
}
.box:nth-child(2) {
left: 10%;
top: 15%;
}
.box:nth-child(3) {
left: 25%;
top: 30%;
}
.box:nth-child(4) {
left: 30%;
top: 20%;
}
.box span {
background-color: red;
color: white;
position: absolute;
top: -40px;
right: -40px;
padding: 10px;
cursor: pointer;
border: 1px solid black;
}
<div class="box">Hello <span>✕</span></div>
<div class="box">Love <span>✕</span></div>
<div class="box">Freedom <span>✕</span></div>
<div class="box">Peace <span>✕</span></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
The function is:
to have draggable boxes
the currently dragged box gets set on top
closing a box is possible with the ✕ button
Unfortunately, the ✕ button doesn't work on many touch devices. My research has shown that it works well on Apple devices, but pretty bad on many Android devices.
Has anyone an idea to fix that? Also, does anyone have an idea to optimize the code?
Would be very thankful for help! <3

Consider the following.
$(function() {
function setToTop(t) {
var n = $(".box").length;
$(".box").each(function(i, el) {
if (!isNaN($(el).css("z-index"))) {
n = parseInt($(el).css("z-index"));
}
});
t.css("z-index", n + 1);
return true;
}
$(document).mouseleave(function() {
$(document).trigger("mouseup");
});
$(".box").draggable({
containment: "body",
cancel: ".btn",
start: function(event, ui) {
setToTop(ui.helper)
}
});
$(".box .btn").click(function() {
$(this).parents(".box").css("display", "none")
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 50px;
font-family: Arial;
background-color: rgb(220, 220, 220);
}
.box {
background-color: yellow;
color: black;
padding: 20px;
display: block;
position: absolute;
border: 2px black;
cursor: all-scroll;
border: 1px solid black;
}
.box:nth-child(1) {
left: 20%;
top: 10%;
}
.box:nth-child(2) {
left: 10%;
top: 15%;
}
.box:nth-child(3) {
left: 25%;
top: 30%;
}
.box:nth-child(4) {
left: 30%;
top: 20%;
}
.box span {
background-color: red;
color: white;
position: absolute;
top: -40px;
right: -40px;
padding: 10px;
cursor: pointer;
border: 1px solid black;
}
<div class="box">Hello <span class="btn">✕</span></div>
<div class="box">Love <span class="btn">✕</span></div>
<div class="box">Freedom <span class="btn">✕</span></div>
<div class="box">Peace <span class="btn">✕</span></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
The cancel method prevents dragging from starting on specified elements.
See More: https://api.jqueryui.com/draggable/#option-cancel
It is not good practice to use the same Variable Names in your code.

echo on button class

I'm trying to build a multi step selector which has multiple combinations in every slide. for example hou have btn1, btn2 and btn3. Every button will display other content in the next slide.
It's an inpage multistep slider so I can't use onClick, submit input or something like that.
as you can see in the code below, I'm trying to get an echo on the name or value of the button who has been clicked in the slide before.
var currentSlide = 0,
$slideContainer = $('.slide-container'),
$slide = $('.slide'),
slideCount = $slide.length,
animationTime = 300;
function setSlideDimensions () {
var windowWidth = $(window).width();
$slideContainer.width(windowWidth * slideCount);
$slide.width(windowWidth);
}
function generatePagination () {
var $pagination = $('.pagination');
for(var i = 0; i < slideCount; i ++){
var $indicator = $('<div>').addClass('indicator'),
$progressBarContainer = $('<div>').addClass('progress-bar-container'),
$progressBar = $('<div>').addClass('progress-bar'),
indicatorTagText = $slide.eq(i).attr('data-tag'),
$tag = $('<div>').addClass('tag').text(indicatorTagText);
$indicator.append($tag);
$progressBarContainer.append($progressBar);
$pagination.append($indicator).append($progressBarContainer);
}
$pagination.find('.indicator').eq(0).addClass('active');
}
function goToNextSlide () {
if(currentSlide >= slideCount - 1) return;
var windowWidth = $(window).width();
currentSlide++;
$slideContainer.animate({
left: -(windowWidth * currentSlide)
});
setActiveIndicator();
$('.progress-bar').eq(currentSlide - 1).animate({
width: '100%'
}, animationTime);
}
function goToPreviousSlide () {
if(currentSlide <= 0) return;
var windowWidth = $(window).width();
currentSlide--;
$slideContainer.animate({
left: -(windowWidth * currentSlide)
}, animationTime);
setActiveIndicator();
$('.progress-bar').eq(currentSlide).animate({
width: '0%'
}, animationTime);
}
function postitionSlides () {
var windowWidth = $(window).width();
setSlideDimensions();
$slideContainer.css({
left: -(windowWidth * currentSlide)
}, animationTime);
}
function setActiveIndicator () {
var $indicator = $('.indicator');
$indicator.removeClass('active').removeClass('complete');
$indicator.eq(currentSlide).addClass('active');
for(var i = 0; i < currentSlide; i++){
$indicator.eq(i).addClass('complete');
}
}
setSlideDimensions();
generatePagination();
$(window).resize(postitionSlides);
$('.next').on('click', goToNextSlide);
$('.previous').on('click', goToPreviousSlide);
#charset "UTF-8";
*, html, body {
font-family: "TrebuchetMS", trebuchet, sans-serif;
}
* {
box-sizing: border-box;
}
h1, h2 {
text-align: center;
}
h1 {
font-size: 24px;
line-height: 30px;
font-weight: bold;
}
h2 {
font-size: 18px;
line-height: 25px;
margin-top: 20px;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
padding: 14px 50px;
border-radius: 4px;
background-color: #37B595;
color: #FFFFFF;
text-transform: capitalize;
font-size: 18px;
line-height: 22px;
outline: none;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background-color: #1A7F75;
}
button.previous {
background-color: #A2ACAF;
}
button.previous:hover {
background-color: #5A5F61;
}
.full-width-container {
width: 100%;
min-width: 320px;
}
.sized-container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.slide-container {
position: relative;
left: 0;
overflow: hidden;
}
.slide {
float: left;
}
.slide .sized-container {
padding: 75px 25px;
}
.button-container {
border-top: 1px solid black;
overflow: hidden;
padding-top: 30px;
}
.button-container button {
float: right;
margin-left: 30px;
}
.pagination-container {
margin-top: 120px;
}
.pagination {
width: 100%;
text-align: center;
padding: 0 25px;
}
.indicator {
width: 25px;
height: 25px;
border: 4px solid lightgray;
border-radius: 50%;
display: inline-block;
transition: all 0.3s;
position: relative;
}
.indicator .tag {
position: absolute;
top: -30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: lightgray;
white-space: nowrap;
}
.indicator.active, .indicator.complete {
border-color: #37B595;
}
.indicator.active .tag, .indicator.complete .tag {
color: #37B595;
}
.indicator.complete:after {
content: "✓";
position: absolute;
color: #37B595;
left: 4px;
top: 3px;
font-size: 14px;
}
.progress-bar-container {
width: 10%;
height: 4px;
display: inline-block;
background-color: lightgray;
position: relative;
top: -10px;
}
.progress-bar-container:last-of-type {
display: none;
}
.progress-bar-container .progress-bar {
width: 0;
height: 100%;
background-color: #37B595;
}
<div class="pagination-container full-width-container">
<div class="sized-container">
<div class="pagination"></div>
</div>
</div>
<div class="viewport full-width-container">
<ul class="slide-container">
<li class="slide" data-tag="Basic Info">
<div class="sized-container">
<h1>Slide1.</h1>
<input class="next" name="next" type="button" value="next" />
</div>
</li>
<li class="slide" data-tag="Expertise">
<div class="sized-container">
<h1>Slide2.</h1>
</div>
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Can someone please help me out!

Menu (JavaScript Isn't Being Accepted)

I have a menu for a game that I am making. It uses JavaScript to switch between the menu pages by changing the styles of the buttons and the display of the content. However, when I run it and click on any one of the three menu buttons nothing happens. It says the functions are not functions. It's probably a silly mistake but please help. Thanks for the help in advance.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
background: linear-gradient(to bottom,#7EC0EE,#C1E5FF);
height: 100%;
width: 100%;
margin: 0;
}
#menu {
color: rgba(0,0,0,0.7);
font-family: Segoe UI;
background: #915921;
padding-left: 15px;
padding-top: 45px;
font-size: 17px;
position: fixed;
height: 50%;
width: 100%;
left: 0px;
top: 0px;
}
#menubar {
background: transparent;
color: rgba(0,0,0,0.6);
text-align: center;
line-height: 40px;
font-size: 20px;
position: fixed;
height: 40px;
width: 100%;
left: 0px;
top: 0px;
}
#first {
transition: background 0.5s;
background: transparent;
position: absolute;
height: 40px;
width: 33%;
left: 0px;
top: 0px;
}
#first:hover {
background: transparent;
}
#firstcontent {
display: block;
}
#second {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 33%;
left: 33%;
top: 0px;
}
#second:hover {
background: transparent;
}
#secondcontent {
display: none;
}
#third {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 34%;
left: 66%;
top: 0px;
}
#third:hover {
background: transparent;
}
#thirdcontent {
display: none;
}
</style>
</head>
<body>
<div id="menu">
<div id="menubar">
<div id="first" onclick="first()">FIRST</div>
<div id="second" onclick="second()">SECOND</div>
<div id="third" onclick="third()">THIRD</div>
</div>
<div id="firstcontent">
First
</div>
<div id="secondcontent">
Second
</div>
<div id="thirdcontent">
Third
</div>
</div>
<script>
var first = document.getElementById("first");
var firstcontent = document.getElementById("firstcontent");
var second = document.getElementById("second");
var secondcontent = document.getElementById("secondcontent");
var third = document.getElementById("third");
var thirdcontent = document.getElementById("thirdcontent");
function first() {
first.style.background = "transparent";
firstcontent.style.display = "block";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function second() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "transparent";
secondcontent.style.display = "block";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function third() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "transparent";
thircontent.style.display = "block";
}
</script>
</body>
</html>

That's may be because you have named the variable and function as same. Like first() { } and first = somevalue?

Either rename your variables or rename your functions. Having a variable and function with the same name just causes problems.

Trying to get my Game Loop right

I am trying to do my very first simple game.
My question is: why is my game loop not working? If you see the code, I tried to put all the game code inside an if. The idea is: "if game over is false, execute the game, else (when my humanHungerBar reaches 0) the game is over".
Can you help me here? Thanks a lot
<!doctype html>
<html>
<head>
<style>
body {
-webkit-user-select: none;
}
#screen {
position: relative;
left: 480px;
top: 30px;
border: 2px solid black;
height: 500px;
width: 400px;
display: block;
}
#myCash {
position: relative;
width: 90px;
height: 40px;
top: 7px;
left: 5px;
border: 5px solid lightgreen;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: green;
font-weight: bolder;
font-size: 20px;
}
#humanHunger {
position: relative;
width: 90px;
height: 90px;
top: 20px;
left: 280px;
border: 1px solid black;
}
#humanHungerContainer {
position: relative;
width: 100%;
height: 20px;
top: 20px;
border: 1px solid black;
background-color: red;
}
#humanHungerBar {
position: absolute;
width: 76%;
height: 18px;
border: 1px solid green;
background-color: green;
}
#moneyMaker {
position: relative;
width: 300px;
height: 450px;
top: -850px;
left: 100px;
border: 3px solid green;
background-image: url("moneyMakerBackground.png");
}
#jobInstructions {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 20px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#workingHours {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 90px;
left: 22px;
background-color: lightgreen;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
#workCounter {
position: absolute;
width: 60px;
height: 50px;
border: 3px solid orange;
top: 250px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#clickingArea {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 170px;
left: 22px;
background-color: lightgreen;
filter: saturate(100%);
}
#clickingArea:hover {
filter: saturate(190%);
}
#dollar {
position: relative;
left: 80px;
top: 5px;
}
#nakedHuman {
position: absolute;
top: 25px;
left: 120px;
}
#clothesScreen {
position:relative;
top: -400px;
left: 900px;
border: 2px solid black;
width: 300px;
height: 400px;
overflow: auto;
}
#lumberShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#coffeeStainedTShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#regularJeans {
position: absolute;
top: 328px;
left: 145px;
display:none;
}
#lumberShirtMiniContainer {
position: relative;
top: 10px;
left: 10px;
}
#coffeeStainedTShirtMiniContainer {
position: relative;
top: 30px;
left: 10px;
}
#regularJeansMiniContainer {
position: relative;
top: 60px;
left: 20px;
}
#burgerMiniContainer {
position: relative;
top: 90px;
left: 10px;
}
#lumberShirtPrice {
position: absolute;
top: 20px;
left: 100px;
border: 3px solid orange;
width: 50px;
height: 20px;
text-align: center;
vertical-align: middle;
line-height: 20px;
background-color: orange;
}
#buyButtonLumber {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonCoffee {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonRegularJeans {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonBurger {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
</style>
</head>
<body>
<div id="screen">
<img id="nakedHuman" src="nakedHuman2.png" width="139.46" height="450">
<img id="lumberShirt" src="lumberShirt.png" width="139.46" height="158.51">
<img id="coffeeStainedTShirt" src="coffeeStainedTShirt.png" width="139.46" height="158.51">
<img id="regularJeans" src="regularJeans.png" width="89" height="152.72">
<div id="myCash"></div>
<div id="humanHunger">
<div id="humanHungerContainer">
<div id="humanHungerBar"></div>
</div>
</div>
</div>
<div id="clothesScreen">
<div id="lumberShirtMiniContainer">
<img id="lumberShirtMini" src="lumberShirt.png" width="70.38" height="80">
<div id="lumberShirtPrice"></div>
<div id="buyButtonLumber">Buy</div>
</div>
<div id="coffeeStainedTShirtMiniContainer">
<img id="coffeeStainedTShirtMini" src="coffeeStainedTShirt.png" width="70.38" height="80">
<div id="buyButtonCoffee">Buy</div>
</div>
<div id="regularJeansMiniContainer">
<img id="regularJeansMini" src="regularJeans.png" width="46.62" height="80">
<div id="buyButtonRegularJeans">Buy</div>
</div>
<div id="burgerMiniContainer">
<img id="burger" src="burger.png" width="94.11" height="80">
<div id="buyButtonBurger">Buy</div>
</div>
</div>
<div id="moneyMaker">
<div id="jobInstructions">You work on a click factory, so get to clickin'!!</div>
<div id="workingHours"></div>
<div id="clickingArea"><img src="dollar.png" id="dollar" width="82.55" height="42"></div>
<div id="workCounter"></div>
</div>
<script>
window.onload = function () {
var gameOver = false;
if (!gameOver) {
var lumberShirtPrice = document.getElementById("lumberShirtPrice");
lumberShirtPrice.innerHTML = 7;
var myCash = document.getElementById("myCash");
myCash.innerHTML = 45;
var buyButtonLumber = document.getElementById("buyButtonLumber");
buyButtonLumber.addEventListener("click", substractItemPriceFromMyCash);
var negateFX = new Audio('negate1.wav');
function substractItemPriceFromMyCash() {
var a = parseInt(lumberShirtPrice.innerHTML);
var b = parseInt(myCash.innerHTML);
if (a > b) {
negateFX.play();
}
else {
myCash.innerHTML -= lumberShirtPrice.innerHTML;
console.log("you bought the lumber shirt");
}
}
var workingHoursScreen = document.getElementById("workingHours");
workingHoursScreen.innerHTML = 0;
var workCounter = document.getElementById("workCounter");
workCounter.innerHTML = 0;
var allowedToWork = false;
var workingHoursChronometer = setInterval(incrementWorkingHoursChronometer, 1000);
function incrementWorkingHoursChronometer () {
var a = parseInt(workingHoursScreen.innerHTML);
if(a < 10) {
workingHoursScreen.innerHTML++;
}
else if (a == 10) {
workingHoursScreen.innerHTML = 0;
workCounter.innerHTML++;
}
var b = parseInt(workCounter.innerHTML);
if (b == 4) {
workCounter.innerHTML = 0;
}
if (b % 2 == 0) {
allowedToWork = true;
}
else if (b % 2 == 1) {
allowedToWork = false;
}
}
var coinFX = new Audio('coin1.wav');
var clickingAreaBox = document.getElementById("clickingArea");
clickingAreaBox.addEventListener("click", giveMeMoney);
function giveMeMoney() {
if(allowedToWork) {
myCash.innerHTML++;
coinFX.play();
}
else {
negateFX.play();
}
}
var humanHungerBar = document.getElementById("humanHungerBar");
var barWidth = 76;
humanHungerBar.style.width = barWidth + '%';
var humanHungerBarDecrement = setInterval (decreaseHumanHungerBar, 700);
function decreaseHumanHungerBar () {
if (barWidth > 0) {
humanHungerBar.style.width = barWidth + '%';
barWidth--;
}
}
var buyButtonBurger = document.getElementById("buyButtonBurger");
var burgerPrice = 15;
buyButtonBurger.addEventListener("click", buyBurgerRestoreLifeAndDecreaseMoney);
function buyBurgerRestoreLifeAndDecreaseMoney() {
var a = parseInt(myCash.innerHTML);
if (a >= burgerPrice){
if(barWidth < 92) {
barWidth += 10;
myCash.innerHTML -=burgerPrice;
}
else if (barWidth == 1) {
gameOver = true;
console.log("bar is 1");
}
else {
negateFX.play();
}
}
else {
negateFX.play();
}
}
}
else {
document.getElementById("screen").style.display = 'none';
}
}
</script>
</body>
</html>

So you have written a script that executes one time. It goes from beginning to end, and then stops. So what you want to do is write a script that repeats over and over until the game ends. So here's a super brief example of how you might do that in javascript:
while (!gameOver) {
// do game code
}
BUT WAIT!!!
So the code inside that while loop will keep on happening over and over until the gameOver variable is true. But if you try to use that code, your game will probably freeze! Why? Because the browser is executing the code inside the while loop as fast as it possibly can. But if you'd like your game to run at a certain frame-per-second rate, you probably want to use a javascript timeout. So try something like this:
setInterval(function() {
// do game code
}, 1000/60);
That is the absolutely bare minimum that you'll need for a technical "game loop". However, this is not really the recommended approach for starting to create a browser-based game. Try doing some research and checking out things like this and this.

Why is my javascript not functioning?

I'm using a layout from Codepen: http://codepen.io/trhino/pen/ytoqv
and I have put certain parts of that code into my html but it is not functioning. Can anybody tell me why and what I can do to fix it? All I want from the codepen tutorial is the actual image gallery effect and the 'click to expand' and 'collapse' buttons.
Here is what my site looks like at the minute (ignore the stretched photos, I will be correcting this once I have sorted the javascript)
http://me14ch.leedsnewmedia.net/portfolio/photo.html
Really appreciate ANY help! This is my code:
<h2>(click on the box to expand gallery)</h2>
<div class="wrap">
<div id="picture1" class="deck">
<img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork1.JPG">
</a>
</div>
<div id="picture2" class="deck">
<img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork2.JPG">
</a></div>
<div id="picture3" class="deck">
<img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork3.JPG">
</a></div>
<div id="picture4" class="deck">
<img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork4.JPG">
</a></div>
<div id="picture5" class="deck">
<img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork5.JPG">
</a></div>
</div>
<div id="close"><p>« collapse gallery</p></div>
<div id="lightbox">
<div id="lightwrap">
<div id="x"></div>
</div>
This is the CSS
/* gallery */
*, *::before, *::after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p {
font-family: arial, helvetica, sans-serif;
font-size: 24px;
color: #6CBDEB;
text-shadow: 1px 1px 1px #000;
}
.wrap {
position: relative;
width: 1125px;
height: 200px;
margin: 0 auto;
}
.deck {
margin: 20px;
border: 3px solid #FADBC8;
height: 202px;
width: 202px;
position: absolute;
top: 0;
left: 0;
transition: .3s;
cursor: pointer;
font-size: 50px;
line-height:200px;
text-align: center;
}
.deck a {
color: black;
}
.deck img {
height: 200px;
width: 200px;
}
.album {
border: 1px solid #FADBC8;
height: 200px;
width: 200px;
float: left;
transition: .3s;
position: relative;
}
#close {
position: relative;
display: none;
width: 1125px;
margin: 30px auto 0;
}
#close p {
cursor: pointer;
text-align: right;
margin: 0 20px 0;
}
#lightbox {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
z-index: 999;
}
#lightwrap {
position: relative;
margin: 0 auto;
border: 5px solid black;
top: 15%;
display: table;
}
#lightwrap img {
display: table-cell;
max-width: 600px;
}
#x {
position: absolute;
top: 2px;
right: 2px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAMAAAC6CgRnAAAAPFBMVEX///8AAAD9/f2CgoKAgIAAAAAAAAAAAABLS0sAAAAAAACqqqqqqqq6urpKSkpISEgAAAC7u7u5ubn////zbsMcAAAAE3RSTlMASv6rqwAWS5YMC7/AyZWVFcrJCYaKfAAAAHhJREFUeF590kkOgCAQRFEaFVGc+/53FYmbz6JqBbyQMFSYuoQuV+iTflnstI7ssLXRvMWRaEMs84e2uVckuZe6knL0hiSPObXhj6ChzoEkIolIIpKIO4joICAIeDd7QGIfCCjOKe9HEk8mnxpIAup/F31RPZP9fAG3IAyBSJe0igAAAABJRU5ErkJggg==);
width: 27px;
height: 27px;
cursor: pointer;
}
and this is the Javascript:
var i, expand = false;
function reset() {
$('.deck').css({
'transform': 'rotate(0deg)',
'top' : '0px'
});
}
//expands and contracts deck on click
$('.deck').click(function (a) {
if (expand) {
a.preventDefault();
var imgSource = $(this).children().attr('href');
$('#lightwrap').append('<img src="' + imgSource + '" id="lb-pic">');
$('#lightbox, #lightwrap').fadeIn('slow');
} else {
var boxWidth = $('.deck').width();
$('.deck').each(function (e) {
$(this).css({
'left': boxWidth * e * 1.1 + 'px'
});
expand = true;
$('#close').show();
});
}
});
//close lightbox
$('#x, #lightbox').click(function(){
$('#lightbox').fadeOut('slow');
$('#lightwrap').hide();
$('#lb-pic').remove();
});
//prevent event bubbling on lightbox child
$('#lightwrap').click(function(b) {
b.stopPropagation();
});
$('#close').click(function(){
$(this).hide();
$('.deck').css({'left': '0px'});
expand = false;
});
$('.deck:last-child').hover(
//random image rotation
function() {
if (expand === false) {
$('.deck').each(function () {
i++;
if (i < $('.deck').length) {
var min = -30,
max = 30,
random = ~~(Math.random() * (max - min + 1)) + min;
$(this).css({
'transform' : 'rotate(' + random + 'deg)',
'top' : random + 15 + 'px'
});
}
});
}
//straightens out deck images when clicked
$('.deck').click(
function (a) {
a.preventDefault();
reset();
});
},
//undo image rotation when not hovered
function () {
i = 0;
reset();
}
);

Just enclose your javascript in a $( document ).ready() function in order to execute on load of the page:
$( document ).ready(function() {
//paste javascript code here
});
The Result will be this:
Here is also a jsBin for it