Develop Reference

How stop horizontal scroll in rigth of div

Hello I'm new in the code and I try to stop the horizontal scroll when the div number 2 is visible in full (so that the div 3 is not visible but aund even there).
My code :
$(document).ready(function() {
$(window).scroll(function() {
var stopScroll = $('.block-2').offset().left;
if ($(window).scrollLeft() > $('.block-2').offset().left) {
$(window).scrollLeft(stopScroll);
}
});
});
body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
}
.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}
.block-1,
.block-2 {
height: 500px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">
</div>
</div>
<div class="block-2">
<div class="container">
</div>
</div>
<div class="block-1">
<div class="container">
</div>
</div>
</div>
I was inspired in this forum to write this code.
I try test a lot of solution but that was not walk :(.
Do you know where i can try this ?

I guess, that it solve your issue. For jquery and pure javascript.
$(document).ready(function() {
$(window).scroll(function() {
var wrapWidth = $('.wrap').width();
var secondBoxWidth = $('.block-2').offset().left;
var scrollable = $('.wrap')[0].scrollWidth;
var breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if ($(window).scrollLeft() >= breakPoint) {
$(window).scrollLeft(breakPoint);
return;
}
});
});
body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
}
.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}
.block-1,
.block-2 {
height: 500px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">
</div>
</div>
<div class="block-2">
<div class="container">
</div>
</div>
<div class="block-1">
<div class="container">
</div>
</div>
</div>
Pure JS solution
document.addEventListener('DOMContentLoaded', function () {
const scrollFunc = () => {
const wrap = document.querySelector('.wrap');
const wrapWidth = document.querySelector('.wrap').offsetWidth;
const secondBoxWidth = document.querySelector('.block-2').offsetWidth;
const scrollable = wrap.scrollWidth;
const start = Math.round(window.scrollX);
const breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if (start >= breakPoint) {
window.scrollTo(breakPoint, 0);
return;
}
};
document.addEventListener('scroll', scrollFunc);
});

Javascript conflict: Div scrolling speed control & image shrink on scroll together

I've been wrestling with this problem for a while without success, so I'm hoping someone with greater knowledge can offer a solution.
By using a script to independently control the scroll speeds of specific divs, I've managed to create an effect along the lines of parallax scrolling:
https://neilwhitedesign.co.uk/pt_testing_area/index(scrolling).html
However, what I would also like to add, is a second script to reduce the size of the logo when the page is scrolls:
https://neilwhitedesign.co.uk/pt_testing_area/index(headershrink).html
Independently, these scripts are working exactly as I want them, but when I try to combine the two, there is a conflict and only the scrolling effect works.
Looking at similar questions posted previously, one solution was to add a further script between the two, to call a noConflict.
However, while adding this now makes the shrinking image effect work, it does so at the expense of the scrolling effect.
Is what I'm trying to achieve possible?
Is there a simple solution to get around the conflict?
Please find my html and css below:
HTML
window.onscroll = function() {
growShrinkLogo()
};
var Logo = document.getElementById("Logo");
var endOfDocumentTop = 90;
var size = 0;
function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 90;
if (size == 0 && scroll > endOfDocumentTop) {
Logo.className = 'smallLogo';
size = 1;
} else if (size == 1 && scroll <= endOfDocumentTop) {
Logo.className = 'largeLogo';
size = 0;
}
}
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + +pos + 'px)');
};
$(function() {
$('[data-scroll-speed]').moveIt();
});
#charset "utf-8";
/* CSS Document */
/* 2. Clearfix*/
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
/* 3. Images*/
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
/* 4. Structure*/
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
/* 5. Logo*/
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
}
.largeLogo {
width: 350px;
}
.smallLogo {
width: 250px;
}
/* 6. Footer */
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<link rel="stylesheet" type="text/css" href="https://neilwhitedesign.co.uk/pt_testing_area/css.css" />
<body>
<div class="header">
<div class="logo_container"><img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">This is the tagline</div>
<div class="parallax" data-scroll-speed="2"><img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" /></div>
</div>
<div class="content" data-scroll-speed="100">Content Area</div>
<footer>© 2021
<script src="https://neilwhitedesign.co.uk/pt_testing_area/js/copyright.js"></script> | All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
Any guidance would be greatly appreciated.
Thanks
Neil White

You should never use on* handlers (unless you're creating a brand new element from in-memory) use .addEventListener() instead or the jQuery method .on() - that way handlers are attached to an element, not overwritten.
Place <script> tags (all of them) right before the closing </body> tag
Use classList.toggle or jQuery's .toggleClass()
You don't need two classes for big and small logo - only one.
jQuery plugins should use return to allow for methods chainability
Here's a remake of the plugin and your scripts:
// moveIt jQuery plugin
$.fn.moveIt = function() {
const $window = $(window);
const instances = [];
const updateItems = () => {
const scrTop = $window.scrollTop();
instances.forEach((inst) => inst.update(scrTop));
};
$window.on("scroll", updateItems); // Do on scroll
updateItems(); // and on page load
// Use "return" to allow $ methods chainability
return this.each(function(i, el) {
instances.push(new moveItItem(el));
});
}
function moveItItem(el) {
this.el = $(el);
this.speed = parseInt(this.el.data("scroll-speed"));
};
moveItItem.prototype.update = function(scrTop) {
this.el.css({transform: `translateY(${scrTop / this.speed}px)`});
};
// App
const $window = $(window);
const $logo = $("#Logo");
const docTop = 90;
function growShrinkLogo() {
$logo.toggleClass("small", $window.scrollTop() > docTop);
}
$window.on("scroll", growShrinkLogo); // Do on scroll
growShrinkLogo(); // and on page load
// moveIt plugin init:
$('[data-scroll-speed]').moveIt();
#charset "utf-8";
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
width: 350px;
}
#Logo.small {
width: 250px;
}
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<div class="header">
<div class="logo_container"><img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">This is the tagline</div>
<div class="parallax" data-scroll-speed="2"><img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" /></div>
</div>
<div class="content" data-scroll-speed="100">Content Area</div>
<footer>© 2021 | All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

It is because you declare window.onscroll twice and therefor it overwrites the first declaration. You just have to add the call of growShrinkLogo() to the second window.onscroll.
Working example:
var Logo = document.getElementById("Logo");
var endOfDocumentTop = 90;
var size = 0;
function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 90;
if (size == 0 && scroll > endOfDocumentTop) {
Logo.className = 'smallLogo';
size = 1;
} else if (size == 1 && scroll <= endOfDocumentTop) {
Logo.className = 'largeLogo';
size = 0;
}
}
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
growShrinkLogo();
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + +pos + 'px)');
};
$(function() {
$('[data-scroll-speed]').moveIt();
});
#charset "utf-8";
/* CSS Document */
/* 2. Clearfix*/
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
/* 3. Images*/
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
/* 4. Structure*/
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
/* 5. Logo*/
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
}
.largeLogo {
width: 350px;
}
.smallLogo {
width: 250px;
}
/* 6. Footer */
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="logo_container">
<img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">
This is the tagline
</div>
<div class="parallax" data-scroll-speed="2">
<img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" />
</div>
</div>
<div class="content" data-scroll-speed="100">
Content Area
</div>
<footer>
© 2021 | All rights reserved.
</footer>

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!

Image Carousel: Force Images to take up entire div (each image)

I need a way to force each image to fill the div no matter the size of the div. I thought this is what width: 100% was supposed to do but it's not working the way I expected it to.
Link to CodePen
const carousels = document.querySelectorAll('.image-carousel');
[].forEach.call(carousels, c => {
let next = document.querySelector('.next'),
prev = document.querySelector('.previous'),
bubblesContainer = document.querySelector('.bubbles'),
inner = document.querySelector('.inner'),
imgs = document.querySelectorAll('img'),
currentImageIndex = 0,
width = 100,
bubbles = [];
for (let i = 0; i < imgs.length; i++) {
let b = document.createElement('span');
b.classList.add('bubble');
bubblesContainer.append(b);
bubbles.push(b);
b.addEventListener('click', () => {
currentImageIndex = i;
switchImg();
});
}
function switchImg() {
inner.style.left = -width * currentImageIndex + '%';
bubbles.forEach(function (b, i) {
if (i === currentImageIndex) {
b.classList.add('active');
} else {
b.classList.remove('active');
}
});
}
next.addEventListener('click', () => {
currentImageIndex++;
if (currentImageIndex >= imgs.length) {
currentImageIndex = 0;
}
switchImg();
});
prev.addEventListener('click', () => {
currentImageIndex--;
if (currentImageIndex < 0) {
currentImageIndex = imgs.length - 1;
}
switchImg();
});
switchImg();
});
img {
height: 100%;
min-width: 100%;
}
.image-carousel {
width: 100%;
height: 50vh;
overflow: hidden;
position: relative;
}
.image-carousel .inner {
display: flex;
position: absolute;
left: 0;
transition: left 0.5s;
width: 100%;
height: 100%;
}
.image-carousel .bubbles {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 5px;
}
.image-carousel .bubbles .bubble {
margin: 0 1rem 0.5rem;
background: white;
border-radius: 100%;
width: 10px;
height: 10px;
display: inline-block;
opacity: 0.25;
transition: 0.1s;
cursor: pointer;
}
.image-carousel .bubbles .bubble:hover {
opacity: 0.65;
}
.image-carousel .bubbles .bubble.active {
opacity: 1;
}
.image-carousel .next::after, .image-carousel .previous::after {
content: '>';
position: absolute;
top: 50%;
right: 0;
background: white;
width: 1rem;
height: 3rem;
font-weight: bold;
transform: translatey(-50%);
line-height: 3rem;
box-sizing: border-box;
padding: 0 0.2rem;
cursor: pointer;
}
.image-carousel .previous::after {
left: 0;
content: '<';
}
<div class="container">
<div class="row">
<div class="col-12">
<div class="image-carousel">
<div class="inner">
<img class="carousel one" src="https://via.placeholder.com/100x100">
<img class="carousel two" src="https://via.placeholder.com/100x100">
<img class="carousel three" src="https://via.placeholder.com/100x100">
<img class="carousel three" src="https://via.placeholder.com/100x100">
</div>
<div class="bubbles"></div>
<div class="previous"><button><</button></div>
<div class="next"><button>></button></div>
</div>
</div>
</div>
</div>

You can try adding display:block; min-width: 100%; Min-width forces element to fill parents width.

The issue is that you've set the .inner element's display property to flex.
You can remove flex or add flex: 0 0 100% to your images like so:
.inner {
..
img {
flex: 0 0 100%;
}
}
flex: 0 0 100% is telling the element inside a flex container to not shrink, or expand, and take up 100% of its parent.

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