complete rewrite of gallery system
originally we had a gallery grid and we just changed its contents but this meant we had to load new images on click which took time to do, instead we download all the images at runtime and just hide them
This commit is contained in:
Nye Evans
parent
35972190b9
commit
0aa06dff80
4 changed files with 54 additions and 64 deletions
44
index.html
44
index.html
|
|
@ -39,16 +39,50 @@
|
|||
<div style = "font-size: 60%;">click a project to find out more</div>
|
||||
</div>
|
||||
|
||||
<div id = "programGallery">
|
||||
<p class = "galleryTitle"></p>
|
||||
<a href = "pages/gallery/Cat_tower_defense/cat-tower-defense.html" class = "galleryLink">
|
||||
<img src = "" class = "galleryImage" style = "">
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- gallery slides defined here, originally we had one slide and just changed its values but loading images is slow, easier to load them before hand and just hide or show them-->
|
||||
<div class = "programGallery">
|
||||
<p class = "galleryTitle">VR interaction system and physics engine</p>
|
||||
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryLink">
|
||||
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<p class = "galleryCaption"></p>
|
||||
<p class = "galleryCaption">A project done for my EPQ, during post-16, where I aimed to create a virtual reality environment where the user could grab and interact with objects in a semi-physics based
|
||||
environment.<br><br>This system was my introduction to Unreal Engine and mainly used its \"Blueprint\" visual language, however I later used C++ to try and add my own physics
|
||||
to it.</p>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
<div class = "programGallery">
|
||||
<p class = "galleryTitle">Work on Aardvark XR</p>
|
||||
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
|
||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<p class = "galleryCaption">Aardvark is a web-based virtual reality system which allows users to create and share web apps which are overlayed on top of the users vr experience, completely separate from the program they are currently running.
|
||||
This allows for an incredibly flexible in-vr toolset that can be accessed within any virtual reality program. <br><br>Over the course of its release I have attended its first hackathon and added to its development in multiple
|
||||
ways whether through designing 3D models for other developers apps or creating my own.</p>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
<div class = "programGallery">
|
||||
<p class = "galleryTitle">Tower defence game</p>
|
||||
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
|
||||
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: top;">
|
||||
</a>
|
||||
<p class = "galleryCaption">"A project I created with a friend to help us gain a better understanding of pygame. <br><br> This was a basic tower defence game but featured a fully scalable and customisable</p>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class = "textBox" id= "outroText">
|
||||
I hope you like my work! If you ever want to contact me, my twitter, email and github can be found below.
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
export class slide{
|
||||
constructor(title, caption, image, imagePos, link){
|
||||
this.title = title;
|
||||
this.caption = caption;
|
||||
this.image = image;
|
||||
this.imagePos = imagePos;
|
||||
this.link = link;
|
||||
}
|
||||
}
|
||||
|
||||
export var slides = [
|
||||
new slide(
|
||||
"VR interaction system and physics engine",
|
||||
"A project done for my EPQ, during post-16, where I aimed to create a virtual reality environment where the user could grab and interact with objects in a semi-physics based \
|
||||
environment.<br><br>This system was my introduction to Unreal Engine and mainly used its \"Blueprint\" visual language, however I later used C++ to try and add my own physics \
|
||||
to it.",
|
||||
"./pages/gallery/epq-project/projectHeaderImage.png",
|
||||
"object-position: center;",
|
||||
"./pages/gallery/epq-project/epq-project.html"
|
||||
),
|
||||
new slide(
|
||||
"Work on Aardvark XR",
|
||||
"Aardvark is a web-based virtual reality system which allows users to create and share web apps which are overlayed on top of the users vr experience, completely separate from the program they are currently running.\
|
||||
This allows for an incredibly flexible in-vr toolset that can be accessed within any virtual reality program. <br><br>Over the course of its release I have attended its first hackathon and added to its development in multiple \
|
||||
ways whether through designing 3D models for other developers apps or creating my own.",
|
||||
"./pages/gallery/aardvark-work/projectHeaderImage.png",
|
||||
"object-position: center;",
|
||||
"./pages/gallery/aardvark-work/aardvark-work.html"
|
||||
),
|
||||
new slide(
|
||||
"Tower defence game",
|
||||
"A project I created with a friend to help us gain a better understanding of pygame. <br><br> This was a basic tower defence game but featured a fully scalable and customisable \
|
||||
level system allowing users to add their own levels and towers. One of my earliest projects, this is something I have revisited and improved upon quite a few times.",
|
||||
"./pages/gallery/cat-tower-defence/projectHeaderImage.png",
|
||||
"object-position: top;",
|
||||
"./pages/gallery/cat-tower-defence/cat-tower-defence.html"
|
||||
),
|
||||
new slide(
|
||||
"House designer",
|
||||
"Originally a task given to do in a school lesson with a text interface, this became a small personal project that I added many other features to.<br><br> It included \
|
||||
a graphical interface that allowed the user to draw, move and label rooms as well as set the painting and carpeting price which could later be used to calculate \
|
||||
full decoration costs.",
|
||||
"./pages/gallery/room-builder/projectHeaderImage.png",
|
||||
"object-position: top;",
|
||||
"./pages/gallery/room-builder/room-builder.html"
|
||||
)
|
||||
];
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import {slide, slides} from "../pages/gallery-index.js";
|
||||
|
||||
var currentSlide = 0;
|
||||
var allSlides = document.querySelectorAll(".programGallery");
|
||||
|
||||
|
||||
window.nextSlide = function nextSlide(){
|
||||
|
|
@ -14,18 +13,22 @@ window.lastSlide = function lastSlide(){
|
|||
}
|
||||
|
||||
function updateSlide(){
|
||||
if (currentSlide > slides.length-1){
|
||||
if (currentSlide > allSlides.length-1){
|
||||
currentSlide = 0;
|
||||
} else if (currentSlide < 0){
|
||||
currentSlide = slides.length-1;
|
||||
currentSlide = allSlides.length-1;
|
||||
}
|
||||
|
||||
document.querySelector(".galleryTitle").innerHTML = slides[currentSlide].title;
|
||||
document.querySelector(".galleryCaption").innerHTML = slides[currentSlide].caption;
|
||||
document.querySelector(".galleryLink").href = slides[currentSlide].link;
|
||||
document.querySelector(".galleryImage").src = slides[currentSlide].image;
|
||||
document.querySelector(".galleryImage").style = slides[currentSlide].imagePos;
|
||||
hideAll();
|
||||
allSlides[currentSlide].style.display = "grid";
|
||||
|
||||
}
|
||||
|
||||
function hideAll(){
|
||||
for (var i = 0; i < allSlides.length; i++){
|
||||
allSlides[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
hideAll()
|
||||
updateSlide();
|
||||
|
|
@ -76,7 +76,7 @@ h1{
|
|||
font-size: clamp(1rem, 1.2vw, 3rem);
|
||||
}
|
||||
|
||||
#programGallery{
|
||||
.programGallery{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
|
|
@ -246,7 +246,7 @@ h1{
|
|||
font-size: clamp(2rem, 4vw, 5rem);
|
||||
}
|
||||
|
||||
#programGallery{
|
||||
.programGallery{
|
||||
width: 92vw;
|
||||
|
||||
margin-left: 4vw;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue