GalleryExample
This commit is contained in:
Halbear
@@ -0,0 +1,74 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
<link rel="stylesheet" href="StyleSheets/ExampleStructure.css">
|
||||||
|
</head>
|
||||||
|
<body class="debug">
|
||||||
|
<div class="NavBarWrapper HFlexBox SpaceBetween">
|
||||||
|
<div class="NavBarSection HFlexBox AlignLeft">
|
||||||
|
<img alt="" class="NavIcon" src="/Assets/Icons/palmtree.svg" style="">
|
||||||
|
<p class="Title">ExampleTitle</p>
|
||||||
|
</div>
|
||||||
|
<div class="NavBarSection HFlexBox AlignRight">
|
||||||
|
<div class="HamburgerWrapper HFlexBox">
|
||||||
|
<div id="HamburgerNavContent" class="HamburgerNavMenu">
|
||||||
|
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='Cart.html';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">My Cart</button>
|
||||||
|
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
|
||||||
|
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
|
||||||
|
</div>
|
||||||
|
<button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
|
||||||
|
<span class="HamburgerSlab First"></span>
|
||||||
|
<span class="HamburgerSlab Middle"></span>
|
||||||
|
<span class="HamburgerSlab Last"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="VFlexBox Center hidden ImageFullscreenContainer" onclick="CloseImageFullscreen()" id="ImageFocusContainer" style="background-color: rgba(0,0,0,0.35); z-index: 9999; position: fixed; top:0; left:0; width: 100vw; height: 100vh;">
|
||||||
|
<button class="archivo-black-regular" onclick="CloseImageFullscreen()" style="font-size: 2rem; color:red; background-color: white; width: 3rem; height: 3rem; position: fixed; left:2rem; top: 2rem; cursor: pointer; border-radius: 1rem;">X</button>
|
||||||
|
<div class="Image" id="FullscreenImageFocus" style="width: 85vw; height: 90vh; background-image: url('Assets/Images/ImageOne.png'); filter: drop-shadow(white 1vh 0vh 0) drop-shadow(white -1vh 0vh 0) drop-shadow(white 0 1vh 0vh ) drop-shadow(white 0 -1vh 0); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="VFlexBox ContentContainer Center" style="margin-top: 10vh; border-bottom: none;">
|
||||||
|
<p class="BookingWidgetTitle archivo-black-regular" style="margin-left: 0;padding-left: 0; align-self: center; font-size: 3rem;">Gallery</p>
|
||||||
|
<div class="HFlexBox FlexWrap Center">
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function CloseImageFullscreen(){
|
||||||
|
let Container = document.getElementById("ImageFocusContainer");
|
||||||
|
while(Container.classList.contains("hidden")){Container.classList.remove("hidden");}
|
||||||
|
Container.classList.add("hidden");
|
||||||
|
}
|
||||||
|
function FocusImage(url){
|
||||||
|
let Container = document.getElementById("ImageFocusContainer");
|
||||||
|
while(Container.classList.contains("hidden")){Container.classList.remove("hidden");}
|
||||||
|
let Image = document.getElementById("FullscreenImageFocus");
|
||||||
|
Image.style.backgroundImage = "url('"+url+"')";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -12,6 +12,12 @@
|
|||||||
border:none;
|
border:none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
.hidden{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.FlexWrap{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
body{
|
body{
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
overflow-x:hidden;
|
overflow-x:hidden;
|
||||||
@@ -231,3 +237,33 @@ body{
|
|||||||
align-content: center;
|
align-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Gallery Stuff*/
|
||||||
|
.GalleryImageGridContainer:hover{
|
||||||
|
filter: drop-shadow(#28947f -1.5vh 1.5vh);
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translate(0.25vh,-0.25vh) scale(1.01);
|
||||||
|
}
|
||||||
|
.GalleryImageGridContainer.Wide{
|
||||||
|
width:18rem;
|
||||||
|
height: 14rem;
|
||||||
|
}
|
||||||
|
.GalleryImageGridContainer{
|
||||||
|
margin: 1vh;
|
||||||
|
width: 14rem;
|
||||||
|
height: 14rem;
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-aspect-ratio: 12/9) {
|
||||||
|
.GalleryImageGridContainer.Wide{
|
||||||
|
width:8rem !important;
|
||||||
|
height: 6rem !important;
|
||||||
|
}
|
||||||
|
.GalleryImageGridContainer{
|
||||||
|
margin: 1rem;
|
||||||
|
width: 6rem !important;
|
||||||
|
height: 6rem !important;
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user