So the first set of code is one that I was trying to mimic but with a few changes.
I kind of got half of the things working on both different pages but can't combine them.
What I want to fix from the 2nd one is: fixing the size of the sidebar menus so they stay the same size as when they are clicked, displaying all or a set tab by default, fix spacing/padding between photos, add the shader when on hover/mouse over, add the enlarge when clicked and have a description. All things from the first set of code.
I am not sure if the two codes I have can be combined or if I need to take a different route all togother.
note: the sites are responsive so the page needs to be wide enough to see the sidebar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>project 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
.w3-third img{margin-bottom: -6px; opacity: 0.8; cursor: pointer}
.w3-third img:hover{opacity: 1}
</style>
</head>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-bar-block w3-white w3-animate-left w3-text-grey w3-collapse w3-top w3-center" style="z-index:3;width:300px;font-weight:bold" id="mySidebar"><br>
<h3 class="w3-padding-64 w3-center"><b>Resfeber<br> - PHOTO - </b></h3> <!-- - ABSTRACT -->
<a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-hide-large">CLOSE</a>
<a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-black">ABSTRACT</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">SCAPES</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">ADVENTURE</a>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-white w3-xlarge w3-padding-16">
<span class="w3-left w3-padding">SOME NAME</span>
<a href="javascript:void(0)" class="w3-right w3-button w3-white" onclick="w3_open()">☰</a>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Push down content on small screens -->
<div class="w3-hide-large" style="margin-top:83px"></div>
<!-- Photo grid -->
<div class="w3-row">
<div class="w3-third">
<img src="https://picsum.photos/2001" style="width:100%" onclick="onClick(this)" alt="A boy surrounded by beautiful nature">
<img src="https://picsum.photos/2002" style="width:100%" onclick="onClick(this)" alt="What a beautiful scenery this sunset">
<img src="https://picsum.photos/2003" style="width:100%" onclick="onClick(this)" alt="The Beach. Me. Alone. Beautiful">
</div>
<div class="w3-third">
<img src="https://picsum.photos/2004" style="width:100%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
<img src="https://picsum.photos/2005" style="width:100%" onclick="onClick(this)" alt="Waiting for the bus in the desert">
<img src="https://picsum.photos/2006" style="width:100%" onclick="onClick(this)" alt="Nature again.. At its finest!">
</div>
<div class="w3-third">
<img src="https://picsum.photos/2007" style="width:100%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/2008" style="width:100%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/2009" style="width:100%" onclick="onClick(this)" alt="What a beautiful day!">
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
<a href="#" class="w3-bar-item w3-black w3-button">1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
<span class="w3-button w3-black w3-xlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption"></p>
</div>
</div>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/**
* Fonts
*/
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/**
* Reset
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-color: whiite;
color: #1a1a1a;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.1rem;
line-height: 1.5;
}
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/**
* Global Rules
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
font-family: Roboto, sans-serif;
line-height: 1.2;
word-wrap: break-word;
text-align: center;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 32px;
}
a,
a:visited {
background-color: transparent;
color: #0067b8;
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover,
a:active {
border-bottom: none;
outline: 0;
}
a:focus {
border-bottom: none;
outline: thin dotted;
}
a img {
border: 0;
}
/*
.entry-content > *:not(:last-child) {
margin-bottom: 1rem;
}
*/
/**
* Article Container
*/
.article-container {
padding: 0rem;
}
/**
* Article Block - LOGO title
*/
.article-block {
text-align: center;
background-color: white;
color: #7c7c7c;;
border-bottom: 40px solid white;
border-top: 40px solid white;
padding: 1rem 1rem;
padding-top: 60px;
font-size: 2rem;
}
.article-block .entry-content > p {
color: #666;
}
/**
* Tabs Container
*/
.tabs-container {
padding: 0rem;
border: 0px solid white;
width: 100%;
justify-content: start;
background-color: white;
}
/**
* Tabs Block
*/
.tabs-block {
display: flex;
align-items: center;
justify-content: start;
border: 0px solid white;
width: 100%;
background-color: white;
}
/**
* Tabs
*/
.tabs {
display: flex;
border: 1px solid white;
}
/* not for color */
.tabs > ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
border: 0px solid yellow;
background-color: inherit;;
}
.tabs > ul li {
display: block;
}
/* tab color - done change white to inherit */
.tabs > ul li a,
.tabs > ul li a:visited {
display: flex;
border-bottom: none;
text-decoration: none;
background-color: white;
color: #7c7c7c;;
padding: 1rem 1.5rem;
transition: all 0.2s ease-in-out;
word-wrap: break-word;
}
.tabs > ul li a:hover,
.tabs > ul li a:focus,
.tabs > ul li a:active {
border-bottom: none;
outline: 0;
}
/* tab color active - done */
.tabs > ul li a.active {
background-color: #000000;
color: #f1f0f1;
padding: 1rem 1rem;
padding-top: 2px;
}
/* hover color - done */
.tabs > ul li a:hover:not(.active) {
background-color: #cccccc;
color: #141314;
}
.tabs > ul li a > span {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.tabs > ul li a > span.tab-label {
display: none;
}
.tabs section {
width: 100%;
background-color: #fff;
padding: 0rem;
display: none;
word-wrap: break-word;
border-bottom: 6px solid #0067b8;
border: 0px solid orange;
}
.tabs section > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.2s, transform 0.2s;
}
.tabs section > *:nth-child(1) {
transition-delay: 0.2s;
}
.tabs section > *:nth-child(2) {
transition-delay: 0.3s;
}
.tabs section > *:nth-child(3) {
transition-delay: 0.4s;
}
.tabs section > *:nth-child(4) {
transition-delay: 0.5s;
}
.tabs section > *:nth-child(5) {
transition-delay: 0.6s;
}
.tabs section > *:nth-child(6) {
transition-delay: 0.7s;
}
.tabs section > *:nth-child(7) {
transition-delay: 0.8s;
}
.tabs section > *:nth-child(8) {
transition-delay: 0.9s;
}
.tabs section > *:nth-child(9) {
transition-delay: 1s;
}
.tabs section > *:nth-child(10) {
transition-delay: 1.1s;
}
.tabs section > *:nth-child(11) {
transition-delay: 1.2s;
}
.tabs section > *:nth-child(12) {
transition-delay: 1.3s;
}
.tabs section > *:nth-child(13) {
transition-delay: 1.4s;
}
.tabs section > *:nth-child(14) {
transition-delay: 1.5s;
}
.tabs section > *:nth-child(15) {
transition-delay: 1.6s;
}
.tabs section > *:nth-child(16) {
transition-delay: 1.7s;
}
.tabs section > *:nth-child(17) {
transition-delay: 1.8s;
}
.tabs section > *:nth-child(18) {
transition-delay: 1.9s;
}
.tabs section > *:nth-child(19) {
transition-delay: 2s;
}
.tabs section > *:nth-child(20) {
transition-delay: 2.1s;
}
.tabs section.active {
display: block;
}
.tabs section.active-content > * {
opacity: 1;
transform: translateY(0);
}
@media (min-width: 576px) {
/* tab width 310 is good*/
.tabs > ul {
width: 21%;
}
.tabs > ul li a {
flex-wrap: wrap;
}
.tabs > ul li a > span {
width: 100%;
}
/* clicked on tab size */
.tabs > ul li a > span.tab-label {
width: 100%;
display: block;
margin-top: 0.5rem;
margin-bottom: -0.5rem;
}
.tabs section {
width: calc(100% - 150px);
padding: 0rem 0rem;
}
}
@media (min-width: 768px) {
body {
font-size: 1.125rem;
}
.tabs-container {
padding: 0rem 0rem;
}
}
@media (min-width: 992px) {
.tabs {
width: 1600px;
}
}
</style>
</head>
<body>
<div class="site-wrapper">
<section class="tabs-wrapper">
<div class="tabs-container">
<div class="tabs-block">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
<li>
<div class="article-block">Resfeber <br> - PHOTOS - </div>
</li>
<li>
<a href="#tab-2" class="tab-link" id="defaultOpen"> <span class="tab-label" id="defaultOpen">ABSTRACT</span></a>
</li>
<li>
<a href="#tab-3" class="tab-link"> <span class="tab-label">SCAPES</span></a>
</li>
<li>
<a href="#tab-5" class="tab-link"> <span class="tab-label">ADVENTURE</span></a>
</li>
</ul>
<section id="tab-2" class="tab-body entry-content">
<img src="https://picsum.photos/610" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/618" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/619" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<p></p>
<img src="https://picsum.photos/614" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/615" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/616" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<p></p>
<img src="https://picsum.photos/611" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/612" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/613" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
</section>
<section id="tab-3" class="tab-body entry-content">
<img src="https://picsum.photos/607" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/608" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/609" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<p></p>
<img src="https://picsum.photos/604" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/605" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/606" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<p></p>
<img src="https://picsum.photos/601" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/602" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/603" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
</section>
<section id="tab-5" class="tab-body entry-content">
<img src="https://picsum.photos/627" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/628" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/629" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<p></p>
<img src="https://picsum.photos/624" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/625" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/626" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<p></p>
<img src="https://picsum.photos/621" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="https://picsum.photos/622" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="https://picsum.photos/623" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
</section>
</div>
</div>
</div>
</section>
</div>
<br><Br><br>
</body>
<script>
"use strict";
//
// Tabs Toggler
//
(function ($) {
// Variables
const $tabLink = $('#tabs-section .tab-link');
const $tabBody = $('#tabs-section .tab-body');
let timerOpacity; // Toggle Class
const init = () => {
// Menu Click
$tabLink.off('click').on('click', function (e) {
// Prevent Default
e.preventDefault();
e.stopPropagation(); // Clear Timers
window.clearTimeout(timerOpacity); // Toggle Class Logic
// Remove Active Classes
$tabLink.removeClass('active ');
$tabBody.removeClass('active ');
$tabBody.removeClass('active-content'); // Add Active Classes
$(this).addClass('active');
$($(this).attr('href')).addClass('active'); // Opacity Transition Class
timerOpacity = setTimeout(() => {
$($(this).attr('href')).addClass('active-content');
}, 50);
});
}; // Document Ready
$(function () {
init();
});
})(jQuery);
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
</script>
</html>