Skip to content

Commit

Permalink
fixed image loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@hugh5
hugh5 committed Apr 23, 2024
1 parent d5c310d commit e4aa575
Show file tree
Hide file tree
Showing 12 changed files with 106 additions and 46 deletions.
21 changes: 19 additions & 2 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,11 @@ ul {
align-items: start;
justify-content: center;
padding: 0px 40px;

@media (max-width: 800px) {
padding: 0px 20px;
}

margin-bottom: 40px;
}

Expand Down Expand Up @@ -274,6 +279,10 @@ ul {
display: flex;
justify-content: space-between;
align-items: center;

@media (max-width: 800px) {
flex-direction: column;
}

> .filler {
flex-grow: 1;
Expand All @@ -300,17 +309,25 @@ ul {
position: relative;
display: flex;
justify-content: center;
margin: 0 60px;
margin-bottom: 50px;
margin: 10px 60px 50px 60px;

.content {
opacity: 0;
border: none;
object-fit: cover;
max-width: 100%;
max-height: 80vh;
border-radius: var(--radius);
}

.content:first-child {
position: relative;
}

.content:not(:first-child) {
position: absolute;
}

.arrow {
width: 40px;
aspect-ratio: 1/1;
Expand Down
Binary file added images/pathfinding1.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed images/pathfinding1.png
View file
Binary file not shown.
Binary file modified images/pathfinding2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pathfinding4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sorting1.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed images/sorting1.png
View file
Binary file not shown.
Binary file modified images/sorting2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/sorting3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sorting4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 24 additions & 39 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ function loadNav() {
// Colour the active nav item
var path = window.location.pathname;
var page = path.split("/").pop();
console.log(page.length);
if (page == "" || page == "index.html") {
page = ".";
}
Expand Down Expand Up @@ -37,46 +36,32 @@ let counter = {
project5: 0,
};

const images = {
project1: [
"./images/timetable1.png",
"./images/timetable2.png",
"./images/timetable3.png",
"./images/timetable4.png",
"./images/timetable5.png",
"./images/timetable6.png",
],
project2: [
"./images/pathfinding1.png",
"./images/pathfinding2.png",
"./images/pathfinding3.png",
],
project3: [
"./images/sorting1.png",
"./images/sorting2.png",
"./images/sorting3.png",
],
project4: [
"./images/neuralnetwork1.jpg",
"./images/neuralnetwork2.jpg",
"./images/neuralnetwork3.jpg",
"./images/neuralnetwork4.jpg",
],
project5: [
"./images/snake1.gif",
"./images/snake2.jpg",
"./images/snake3.jpg",
],
let counts = {
project1: 6,
project2: 3,
project3: 3,
project4: 4,
project5: 3,
};

function setContent(projectname) {
let selector = `#${projectname} > .content`;
$(selector).fadeOut(200, function () {
$(selector).attr("src", images[projectname][counter[projectname]]);
$(selector).fadeIn(200);
});
let dots = "";
for (let i = 0; i < images[projectname].length; i++) {
for (let i = 0; i < counts[projectname]; i++) {
if (i === counter[projectname]) {
$(`#${projectname} > :nth-child(${i + 1})`).animate(
{
opacity: 1,
},
500
);
} else {
$(`#${projectname} > :nth-child(${i + 1})`).animate(
{
opacity: 0,
},
250
);
}
dots += `<span class="dot ${
i === counter[projectname] ? "active" : ""
}"></span>`;
Expand All @@ -96,7 +81,7 @@ function loadImageSliders() {
$(".left-arrow").on("click", function () {
let projectname = $(this).parent().attr("id");
if (counter[projectname] === 0) {
counter[projectname] = images[projectname].length - 1;
counter[projectname] = counts[projectname] - 1;
} else {
counter[projectname]--;
}
Expand All @@ -105,7 +90,7 @@ function loadImageSliders() {

$(".right-arrow").on("click", function () {
let projectname = $(this).parent().attr("id");
if (counter[projectname] === images[projectname].length - 1) {
if (counter[projectname] === counts[projectname] - 1) {
counter[projectname] = 0;
} else {
counter[projectname]++;
Expand Down
68 changes: 63 additions & 5 deletions projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,30 @@ <h5>Mobile App</h5>
</li>
</ul>
<div id="project1" class="container">
<img class="content" />
<img
class="content"
src="./images/timetable1.png"
/>
<img
class="content"
src="./images/timetable2.png"
/>
<img
class="content"
src="./images/timetable3.png"
/>
<img
class="content"
src="./images/timetable4.png"
/>
<img
class="content"
src="./images/timetable5.png"
/>
<img
class="content"
src="./images/timetable6.png"
/>
<div class="arrow left-arrow">
<img src="images/prev.png" />
</div>
Expand Down Expand Up @@ -147,7 +170,22 @@ <h5>Web App</h5>
</div>
<div class="row">
<div id="project2" class="container">
<img class="content" />
<img
class="content"
src="./images/pathfinding1.gif"
/>
<img
class="content"
src="./images/pathfinding2.png"
/>
<img
class="content"
src="./images/pathfinding3.png"
/>
<img
class="content"
src="./images/pathfinding4.png"
/>
<div class="arrow left-arrow">
<img src="images/prev.png" />
</div>
Expand Down Expand Up @@ -257,7 +295,10 @@ <h5>Desktop App</h5>
</li>
</ul>
<div id="project3" class="container">
<img class="content" />
<img class="content" src="./images/sorting1.gif" />
<img class="content" src="./images/sorting2.png" />
<img class="content" src="./images/sorting3.png" />
<img class="content" src="./images/sorting4.png" />
<div class="arrow left-arrow">
<img src="images/prev.png" />
</div>
Expand Down Expand Up @@ -299,7 +340,22 @@ <h5>Desktop App</h5>
</div>
<div class="row">
<div id="project4" class="container">
<img class="content" />
<img
class="content"
src="./images/neuralnetwork1.jpg"
/>
<img
class="content"
src="./images/neuralnetwork2.jpg"
/>
<img
class="content"
src="./images/neuralnetwork3.jpg"
/>
<img
class="content"
src="./images/neuralnetwork4.jpg"
/>
<div class="arrow left-arrow">
<img src="images/prev.png" />
</div>
Expand Down Expand Up @@ -380,7 +436,9 @@ <h5>Desktop App</h5>
</li>
</ul>
<div id="project5" class="container">
<img class="content" />
<img class="content" src="./images/snake1.gif" />
<img class="content" src="./images/snake2.jpg" />
<img class="content" src="./images/snake3.jpg" />
<div class="arrow left-arrow">
<img src="images/prev.png" />
</div>
Expand Down

0 comments on commit e4aa575

Please sign in to comment.