Skip to content

Commit

Permalink
Add lightbox
Browse files Browse the repository at this point in the history
  • Loading branch information
jochemloedeman committed Sep 8, 2024
1 parent 87be2e0 commit b95f23e
Show file tree
Hide file tree
Showing 22 changed files with 268 additions and 19 deletions.
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
6 changes: 4 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<title>JOCHEM LOEDEMAN</title>
<meta name="description" content="Hi, I am">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- Start - Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
Expand All @@ -25,7 +25,8 @@
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">

<!-- CSS -->
<link href="styles/lightbox.min.css" rel="stylesheet" />
<!-- End - Fonts -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
Expand Down Expand Up @@ -106,6 +107,7 @@
</footer>
<script src="scripts/distribute_images.js"></script>
<script src="scripts/fade_in.js"></script>
<script src="scripts/lightbox-plus-jquery.min.js"></script>
</body>

</html>
37 changes: 20 additions & 17 deletions scripts/distribute_images.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
// Array of image sources
const images = [
'/assets/images/P1070378-Enhanced-RD Large.jpeg',
'/assets/images/DSCF4429-Enhanced-RD Large.jpeg',
'/assets/images/P1070333-Enhanced-RD Large.jpeg',
'/assets/images/DSCF4744-Enhanced-RD Large.jpeg',
'/assets/images/P1070384-Enhanced-RD Large.jpeg',
'/assets/images/P1070444 Large.jpeg',
'/assets/images/DSCF4570-Enhanced-RD-2 Large.jpeg',
'/assets/images/DSC09328-Enhanced-NR Large.jpeg',
'/assets/images/P1070347-Enhanced-RD Large.jpeg',
'/assets/images/P1070303-Enhanced-RD Large.jpeg',
'/assets/images/DSCF4602-Enhanced-RD-2 Large.jpeg',
'/assets/images/DSC08987 Large.jpeg',
'/assets/images/DSC09061 Large.jpeg',
'/assets/images/DSC08870 Large.jpeg',
// '/assets/images/DSCF4667-Enhanced-RD Large.jpeg',
'/assets/images/DSCF4310-Enhanced-RD Large.jpeg',
'images/P1070378-Enhanced-RD Large.jpeg',
'images/DSCF4429-Enhanced-RD Large.jpeg',
'images/P1070333-Enhanced-RD Large.jpeg',
'images/DSCF4744-Enhanced-RD Large.jpeg',
'images/P1070384-Enhanced-RD Large.jpeg',
'images/P1070444 Large.jpeg',
'images/DSCF4570-Enhanced-RD-2 Large.jpeg',
'images/DSC09328-Enhanced-NR Large.jpeg',
'images/P1070347-Enhanced-RD Large.jpeg',
'images/P1070303-Enhanced-RD Large.jpeg',
'images/DSCF4602-Enhanced-RD-2 Large.jpeg',
'images/DSC08987 Large.jpeg',
'images/DSC09061 Large.jpeg',
'images/DSC08870 Large.jpeg',
'images/DSCF4310-Enhanced-RD Large.jpeg',
];

const twoColumnThreshold = 768;
Expand Down Expand Up @@ -45,9 +44,13 @@ function distributeImages() {
}

images.forEach((src, index) => {
const hyperlink = document.createElement('a');
const img = document.createElement('img');
img.src = src;
columns[index % columnCount].appendChild(img);
hyperlink.href = src;
hyperlink.setAttribute('data-lightbox', 'gallery');
hyperlink.appendChild(img);
columns[index % columnCount].appendChild(hyperlink);
});
}

Expand Down
38 changes: 38 additions & 0 deletions scripts/lightbox-plus-jquery.min.js

Large diffs are not rendered by default.

205 changes: 205 additions & 0 deletions styles/lightbox.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
body.lb-disable-scrolling {
overflow: hidden;
}

.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}

.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}

.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;

/* Image border */
border: 4px solid white;
}

.lightbox a img {
border: none;
}

.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;

/* Background color behind image.
This is visible during transitions. */
background-color: white;
}

.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}

.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

.lb-container>.nav {
left: 0;
}

.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev,
.lb-next {
height: 100%;
cursor: pointer;
display: block;
}

.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}

.lb-data {
padding: 0 4px;
color: #ccc;
}

.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}

.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}

.lb-data .lb-caption a {
color: #4ae;
}

.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}

.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
1 change: 1 addition & 0 deletions styles/lightbox.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b95f23e

Please sign in to comment.