Skip to content
Permalink
Browse files

Load images asynchronously

Resolves #3
  • Loading branch information
nedzadalibegovic committed Jan 4, 2020
1 parent 4cae305 commit 47f05d67cf8351da0a9b9304f7d252514ba7b504
Showing with 26 additions and 46 deletions.
  1. +0 −36 docs/index.html
  2. +26 −10 docs/main.js
@@ -19,42 +19,6 @@ <h2>Nedžad Alibegović</h2>
<div class="gallery-container">
<p>Hope you enjoy my pics, yo.</p>
<div class="gallery">
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/24.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/25.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/26.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/27.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/28.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/29.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/30.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/31.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/32.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/33.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/34.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/35.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/00.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/01.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/02.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/03.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/04.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/05.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/06.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/07.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/08.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/09.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/10.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/11.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/12.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/13.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/14.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/15.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/16.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/17.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/18.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/19.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/20.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/21.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/22.webp" />
<img class="gallery-item" src="https://cdn.nedzad.dev/file/eb9e5638bced136e/_portfolio/23.webp" />
</div>
</div>
<div class="contact flex-top">
@@ -1,14 +1,30 @@
$(".gallery-item").click(function () {
// create overlay with given img
$("body").prepend(`<div class="overlay-background" style="display: none"><div class="overlay"><img src="${$(this)[0].src}" /></div></div>`);
const addOnClick = () => {
$(".gallery-item").click(function () {
// create overlay with given img
$("body").prepend(`<div class="overlay-background" style="display: none"><div class="overlay"><img src="${$(this)[0].src}" /></div></div>`);

// fade overlay in
$(".overlay-background").fadeIn();
// fade overlay in
$(".overlay-background").fadeIn();

// fade overlay out and remove on callback
$(".overlay-background").click(function () {
$(this).fadeOut(function () {
$(this).remove();
// fade overlay out and remove on callback
$(".overlay-background").click(function () {
$(this).fadeOut(function () {
$(this).remove();
});
});
});
});
}

const main = async () => {
const response = await fetch('https://portfolio.nedzad.dev/api/');
const json = await response.json();
const images = json.map(image => image.url);

for (image of images) {
$(".gallery").append(`<img class="gallery-item" src="${image}"/>`);
}

addOnClick();
}

main();

0 comments on commit 47f05d6

Please sign in to comment.
You can’t perform that action at this time.