I have a problem with the Lightbox2 made by Lokesh.
https://lokeshdhakar.com/projects/lightbox2/
I am v2.11.3 and the display of horizontal photo is on the top of the screen in mobiles devices. I have try different options but doesn't work.
Another problem es the order the photos are displaying by Lightbox, I am using Colcate for horizontal grid, so the image follow left to right order but the Lightbox show me the photos follow the vertical order top to bottom, I don't know how I can fix it.
(https://user-images.githubusercontent.com/73562012/108930646-68c95c00-769a-11eb-9c71-ec83b816f2da.png)
leave you part of my code,
the file lightbox-plus-jquery.min.js you que find in the lokesh's page
thanks!
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<div class="container gallery">
<div class="grid">
<!-- current -->
<div class="grid-col grid-col--1">
</div>
<div class="grid-col grid-col--2">
</div>
<div class="grid-col grid-col--3">
</div>
<div class="grid-col grid-col--4">
</div>
<div class="grid-col grid-col--5">
</div>
<div class="grid-item">
<a href="images/urban//urban7-david-porter.jpg"
data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban7-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban00-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban00-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban10-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban10-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
</div>
</div>
<!-- colcate- grid -->
<script src="https://unpkg.com/colcade#0/colcade.js"></script>
<script>
var colc = new Colcade( '.grid', {
columns: '.grid-col',
items: '.grid-item'
});
</script>
<!-- lightbox -->
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
lightbox.option({
resizeDuration: 200,
wrapAround: true,
fadeDuration: 2000,
fitImagesInViewport: true,
wrapAround: true,
});
</script>
my css
body.lb-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #EDE7E5;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.2em;
}
.lb-data .lb-caption {
font-size: 1rem;
font-weight:;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #424242;
}
.lb-data .lb-number {
display: block;
text-align: left;
width: 100% !important;
padding-bottom: 1em;
font-size: 12px;
color: #C7C2C0;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
Related
Below is the code I've been using to create a website. I'm in the process of getting it online but I am having trouble accessing it on a mobile device using the mobile network. No problems viewing the website using wi-fi, but on a mobile device the site will crash and none of the links will work.
On some web pages, I have a large number of photographs. Could this issue be solved via lazy loading of the photos on the page? Is there any script in the CSS or Javascript that's making the website difficult to use on a mobile device? Any knowledge about trying to solve this issue would be much appreciated.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<body>
<style>html{visibility: hidden; opacity: 0;}</style>
<title>MORIKOBOSHI・</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">Home</li>
<li style="border-bottom: .05px solid lightgray;">Blog</li>
<li style="border-bottom: .05px solid lightgray;">About This Website</li>
<li style="border-bottom: .05px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
}
</script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</ul>
</nav>
</header>
<div class="setsumei">
<br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
<br><br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | 日本語</footer>
</div>
</div>
<style>
html {visibility: visible;
opacity: 1;}
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
Basically, I have created a preloader I want to show on my site when the user clicks the link or refreshes the page. However, I need help implementing the preloader onto my site. For some reason, when I combine my preloader with my site code, the preloader does not show up at the beginning. It shows up in a space at the bottom of my carousel, acting like a parallax effect for some reason. How can I make it so my preloader is displaying correctly and fade out showing my site? Any help is appreciated. Down below is the code I am using. Here is a link of what I would like my preloader to be: https://planepreload.raymondnelson.repl.co/
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
$(window).on('load', function() {
$('.preload').delay(5000).fadeOut(1000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
}
h3 {
color: #3F69CA
}
/* Preloader Code */
.preload {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #77b3d4;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5 ease;
}
.cloud1,
.cloud2,
.cloud3{
height: 100px;
position: absolute;
right: 0%;
z-index: -1;
}
.cloud1 {
top: 25%;
transform: translate(100%, -25%);
animation: clouds 3s ease infinite;
}
.cloud2 {
top: 50%;
transform: translate(100%, -50%);
animation: clouds 3s ease infinite 2s;
}
.cloud3 {
top: 75%;
transform: translate(100%, -75%);
animation: clouds 3s ease infinite 4s;
}
.airplane {
height: 200px;
animation: airplane 1s ease infinite alternate;
}
#keyframes airplane {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
#keyframes clouds {
from {
right: 0%;
}
to {
right: 130%;
}
}
.preload .land {
position: absolute;
top: 75%;
transform: translateY(-75%);
color: white;
font-size: 30px;
font-family: sans-serif;
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: "Hind";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Hind";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Hind";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hind";
}
header ul li {
position: relative;
list-style: none;
font-family: "Hind";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Hind";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Hind";
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.ddtext1 {
position: relative;
left: -5px;
}
.ddtext1:hover {
color: #00B800;
}
.ddtext2 {
position: relative;
left: -15px;
}
.ddtext2:hover {
color: #14adb3
}
.ddtext3 {
position: relative;
left: -20px;
}
.ddtext3:hover {
color: #E0A800;
}
.information {
background: linear-gradient( rgb(24, 23, 23, 0.4), rgb(24, 23, 23, 0.4)), url("blackbg.jpg");
background-size: cover;
height: 100vh;
}
.name {
position: relative;
top: 300px;
right: 200px;
text-align: center;
color: #20A4F3;
font-family: "Hind";
animation: fadeIn ease 4s;
font-size: 80px;
}
.text {
position: relative;
top: 300px;
text-align: center;
font-family: "Hind";
text-transform: uppercase;
}
.text h1 {
font-size: 50px;
color: #222;
}
.text span {
font-size: 50px;
animation: light 2s linear infinite;
}
/* Carousel */
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
</head>
<body>
<div class = "load">
<div class="preload">
<img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />
<h3 class = "land">Landing on the website...</h3>
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud1" class="cloud1" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud2" class="cloud2" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud3" class="cloud3" />
</div>
</div>
<!--Navbar-->
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="gallery.html">Gallery</a>
<div class="dropdown-content">
<a class="ddtext1" href="asia.html">Asia</a> <a class="ddtext2" href="europe.html">Europe</a> <a class="ddtext3" href="na.html">America</a>
</div>
</div>
</li>
<li>
Contact
</li>
</ul>
</header>
<!--Home Page-->
<div id="information">
<div id="slider">
<figure>
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
</figure>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I added a z-index: 9999 rule for the preload class to overlap the main content for the duration of the animation. And also, adjust the z-index for the header tag - z-index: 9990. For the body tag, I set overflow: hidden to hide the scrollbar for the duration of the animation, and at the end of the animation, this scrollbar appears again, thanks to the adjustment of the jquery code:
$('body').css('overflow', 'visible');
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
$(window).on('load', function() {
$('.preload').delay(5000).fadeOut(1000, function() {
$('body').css('overflow', 'visible');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
overflow: hidden;
}
h3 {
color: #3F69CA
}
/* Preloader Code */
.preload {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #77b3d4;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5 ease;
z-index: 9999;
}
.cloud1,
.cloud2,
.cloud3{
height: 100px;
position: absolute;
right: 0%;
z-index: -1;
}
.cloud1 {
top: 25%;
transform: translate(100%, -25%);
animation: clouds 3s ease infinite;
}
.cloud2 {
top: 50%;
transform: translate(100%, -50%);
animation: clouds 3s ease infinite 2s;
}
.cloud3 {
top: 75%;
transform: translate(100%, -75%);
animation: clouds 3s ease infinite 4s;
}
.airplane {
height: 200px;
animation: airplane 1s ease infinite alternate;
}
#keyframes airplane {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
#keyframes clouds {
from {
right: 0%;
}
to {
right: 130%;
}
}
.preload .land {
position: absolute;
top: 75%;
transform: translateY(-75%);
color: white;
font-size: 30px;
font-family: sans-serif;
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 9990;
font-family: "Hind";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Hind";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Hind";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hind";
}
header ul li {
position: relative;
list-style: none;
font-family: "Hind";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Hind";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Hind";
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.ddtext1 {
position: relative;
left: -5px;
}
.ddtext1:hover {
color: #00B800;
}
.ddtext2 {
position: relative;
left: -15px;
}
.ddtext2:hover {
color: #14adb3
}
.ddtext3 {
position: relative;
left: -20px;
}
.ddtext3:hover {
color: #E0A800;
}
.information {
background: linear-gradient( rgb(24, 23, 23, 0.4), rgb(24, 23, 23, 0.4)), url("blackbg.jpg");
background-size: cover;
height: 100vh;
}
.name {
position: relative;
top: 300px;
right: 200px;
text-align: center;
color: #20A4F3;
font-family: "Hind";
animation: fadeIn ease 4s;
font-size: 80px;
}
.text {
position: relative;
top: 300px;
text-align: center;
font-family: "Hind";
text-transform: uppercase;
}
.text h1 {
font-size: 50px;
color: #222;
}
.text span {
font-size: 50px;
animation: light 2s linear infinite;
}
/* Carousel */
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
</head>
<body>
<div class = "load">
<div class="preload">
<img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />
<h3 class = "land">Landing on the website...</h3>
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud1" class="cloud1" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud2" class="cloud2" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud3" class="cloud3" />
</div>
</div>
<!--Navbar-->
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="gallery.html">Gallery</a>
<div class="dropdown-content">
<a class="ddtext1" href="asia.html">Asia</a> <a class="ddtext2" href="europe.html">Europe</a> <a class="ddtext3" href="na.html">America</a>
</div>
</div>
</li>
<li>
Contact
</li>
</ul>
</header>
<!--Home Page-->
<div id="information">
<div id="slider">
<figure>
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
</figure>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I'm trying to add a back to top button in my footer. It is clickable and it brings you back to the top of the page but the problem is that it is clickable in the whole row of my grid and I just don't know why that is.
I tried a few things already but can't come up with the right solution.
https://jsfiddle.net/HcJanni/arcoxs7z/124/
// header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
width: 1280px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
body {
background-color: white;
margin: 128px 0 0 0;
}
/* Navigation */
#navlinks {
margin: 0;
}
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 30px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
top: 0;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 1.2rem;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 1.2rem;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar img {
height: 128px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink img {
height: 80px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin: auto;
}
/* fixed nav Ende */
/*
#spacer {
height: 128px;
border-bottom: 4px solid;
}
margin-top: 0 !important;
*/
#home {
height: 100% !important;
display: block;
padding-top: 80px;
z-index: -1;
position: relative;
top: -80px;
}
#wir-ueber-uns {
height: 50px;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -2;
background-color: lightblue;
position: relative;
top: -80px;
}
#aktionen {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -3;
background-color: blue;
position: relative;
top: -80px;
}
#terminvereinbarung {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -4;
background-color: red;
position: relative;
top: -80px;
}
#infos {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -5;
background-color: yellow;
position: relative;
top: -80px;
}
#logo {
margin-left: 50px;
}
#homebild {
width: 100%;
height: 100%;
}
footer {
background-color: lightblue;
display: grid;
grid-template-columns: 426px 426px 450px;
grid-template-rows: 500px;
gap: 0px 0px;
grid-template-areas: ". .";
}
#impressum {
line-height: 1.5rem;
font-size: 1rem;
padding-left: 30px;
padding-top: 4rem;
height: 500px;
}
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 1.2rem;
text-transform: uppercase;
}
#datenschutz {
line-height: 1.5rem;
font-size: 1rem;
padding-left: 30px;
padding-top: 4rem;
}
/*
#socialmedia {
background-color: lightgreen;
}*/
#backtotop {
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
display: block;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div id="container">
<div class="body">
<!-- Navigation -->
<nav id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<img src="https://i.postimg.cc/przxCGcx/Logo.png">
<ul>
<li class="hvr-sweep-to-top active">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</nav>
<!-- body -->
<div id="spacer"></div>
<!-- home section -->
<section id="home" class="section">
<div>
<img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild">
</div>
</section>
<!-- UberUns section -->
<section id="wir-ueber-uns" class="section">
<div>
<p>section 2</p>
</div>
</section>
<!-- Aktionen section -->
<div id="reference"></div>
<section id="aktionen" class="section">
<div>
<p>section 3</p>
</div>
</section>
<!-- Terminvereinbarung section -->
<section id="terminvereinbarung" class="section">
<div>
<p>section 4</p>
</div>
</section>
<!-- Infos section -->
<section id="infos" class="section">
<div>
<p>section 5</p>
</div>
</section>
<footer>
<div id="impressum">
<h3>Impressum</h3>
<h4>
Optik Tack GmbH
</h4>
<p>
<!-- Icons von https://tablericons.com/ -->
<!-- map Icon -->
<img src="https://i.postimg.cc/02y75n0W/map-pin.png" alt="mapicon" width="16" height="16"> Mozartstraße 37 <br> 73430 Aalen <br>
<!-- phone Icon -->
<img src="https://i.postimg.cc/wjPXGNJW/phone.png" alt="phoneicon" width="16" height="16"> Tel.: 07361/123451 <br>
<!-- at Icon -->
<img src="https://i.postimg.cc/tJ5dSmtP/at.png" alt="aticon" width="16" height="16"> info#optik-tack.de <br>
<!-- bookmark Icon -->
<img src="https://i.postimg.cc/T29PwXkG/bookmarks.png" alt="bookmarkicon" width="16" height="16"> www.optik-tack.de
</p>
<p>
Geschäftsführer: Anton Tack <br> Amtsgericht Aalen <br> Handelsregister Nr. XXX000XXX, <br> Finanzamt Aalen <br> USt.IdNr.: DE10111011 <br>
</p>
</div>
<div id="socialmedia">
<!-- back to top Icon -->
<a href="#home">
<img src="https://i.postimg.cc/7hgtxV1Y/arrow-up-circle.png" alt="backtotopicon" id="backtotop" width="75" height="75">
</a>
</div>
<div id="datenschutz">
<h3>Datenschutz</h3>
<h4>Datenschutzhinweise</h4>
<p>gemäß EU-Datenschutz-Grundverordnung (DSGVO)</p>
</div>
</footer>
</div>
</div>
<!-- Animation am Anfang vom Laden der Seite -->
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<!-- Animation Ende -->
<!-- Smooth Scroll -->
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
<!-- Smooth Scroll Ende -->
Your margins make the image fill the container
#backtotop {
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
display: block;
Put the margins on the link instead by moving the ID to the link
<a href="#home" id="backtotop">
<img src="https://i.postimg.cc/7hgtxV1Y/arrow-up-circle.png" alt="backtotopicon" width="75" height="75">
</a>
and center using text-align on the container
#socialmedia {
/* background-color: lightgreen; */
text-align:center;
}
#backtotop {
margin-top: 1rem;
display: block;
}
// header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<!-- Animation Ende -->
<!-- Smooth Scroll -->
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
width: 1280px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
body {
background-color: white;
margin: 128px 0 0 0;
}
/* Navigation */
#navlinks {
margin: 0;
}
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 30px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
top: 0;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 1.2rem;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 1.2rem;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar img {
height: 128px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink img {
height: 80px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin: auto;
}
/* fixed nav Ende */
/*
#spacer {
height: 128px;
border-bottom: 4px solid;
}
margin-top: 0 !important;
*/
#home {
height: 100% !important;
display: block;
padding-top: 80px;
z-index: -1;
position: relative;
top: -80px;
}
#wir-ueber-uns {
height: 50px;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -2;
background-color: lightblue;
position: relative;
top: -80px;
}
#aktionen {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -3;
background-color: blue;
position: relative;
top: -80px;
}
#terminvereinbarung {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -4;
background-color: red;
position: relative;
top: -80px;
}
#infos {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -5;
background-color: yellow;
position: relative;
top: -80px;
}
#logo {
margin-left: 50px;
}
#homebild {
width: 100%;
height: 100%;
}
footer {
background-color: lightblue;
display: grid;
grid-template-columns: 426px 426px 450px;
grid-template-rows: 500px;
gap: 0px 0px;
grid-template-areas: ". .";
}
#impressum {
line-height: 1.5rem;
font-size: 1rem;
padding-left: 30px;
padding-top: 4rem;
height: 500px;
}
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 1.2rem;
text-transform: uppercase;
}
#datenschutz {
line-height: 1.5rem;
font-size: 1rem;
padding-left: 30px;
padding-top: 4rem;
}
#socialmedia {
/* background-color: lightgreen; */
text-align:center;
}
#backtotop {
margin-top: 1rem;
display: block;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div id="container">
<div class="body">
<!-- Navigation -->
<nav id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<img src="https://i.postimg.cc/przxCGcx/Logo.png">
<ul>
<li class="hvr-sweep-to-top active">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</nav>
<!-- body -->
<div id="spacer"></div>
<!-- home section -->
<section id="home" class="section">
<div>
<img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild">
</div>
</section>
<!-- UberUns section -->
<section id="wir-ueber-uns" class="section">
<div>
<p>section 2</p>
</div>
</section>
<!-- Aktionen section -->
<div id="reference"></div>
<section id="aktionen" class="section">
<div>
<p>section 3</p>
</div>
</section>
<!-- Terminvereinbarung section -->
<section id="terminvereinbarung" class="section">
<div>
<p>section 4</p>
</div>
</section>
<!-- Infos section -->
<section id="infos" class="section">
<div>
<p>section 5</p>
</div>
</section>
<footer>
<div id="impressum">
<h3>Impressum</h3>
<h4>
Optik Tack GmbH
</h4>
<p>
<!-- Icons von https://tablericons.com/ -->
<!-- map Icon -->
<img src="https://i.postimg.cc/02y75n0W/map-pin.png" alt="mapicon" width="16" height="16"> Mozartstraße 37 <br> 73430 Aalen <br>
<!-- phone Icon -->
<img src="https://i.postimg.cc/wjPXGNJW/phone.png" alt="phoneicon" width="16" height="16"> Tel.: 07361/123451 <br>
<!-- at Icon -->
<img src="https://i.postimg.cc/tJ5dSmtP/at.png" alt="aticon" width="16" height="16"> info#optik-tack.de <br>
<!-- bookmark Icon -->
<img src="https://i.postimg.cc/T29PwXkG/bookmarks.png" alt="bookmarkicon" width="16" height="16"> www.optik-tack.de
</p>
<p>
Geschäftsführer: Anton Tack <br> Amtsgericht Aalen <br> Handelsregister Nr. XXX000XXX, <br> Finanzamt Aalen <br> USt.IdNr.: DE10111011 <br>
</p>
</div>
<div id="socialmedia">
<!-- back to top Icon -->
<a href="#home" id="backtotop">
<img src="https://i.postimg.cc/7hgtxV1Y/arrow-up-circle.png" alt="backtotopicon" width="75" height="75">
</a>
</div>
<div id="datenschutz">
<h3>Datenschutz</h3>
<h4>Datenschutzhinweise</h4>
<p>gemäß EU-Datenschutz-Grundverordnung (DSGVO)</p>
</div>
</footer>
</div>
</div>
<!-- Animation am Anfang vom Laden der Seite -->
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<!-- Smooth Scroll Ende -->
I want to show different contents depending on the selected link, because for now all links take the same class which have only one content. I don't know how to add another div for another link using the same class or should I create a different class of each div/link ?
https://jsfiddle.net/sx6L93k1/16/
// Reveal & Close Panels
var revealPanel = function(buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
console.log('hidefor-' + panel);
$(".content").addClass('hidefor-' + panel.substr(1));
$(".ip").addClass('hidefor-' + panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
}
});
});
}
revealPanel('.reveal-up', '.panel-up', '.close');
revealPanel('.reveal-left', '.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-up').addClass('expanded');
$(".content").addClass('hidefor-panel-up');
$(".ip").addClass('hidefor-panel-up');
}
});
});
.content {
padding: 50px;
position: absolute;
width: 90%;
-webkit-transition: all .7s ease;
transition: all .7s ease;
transform: scale(1);
opacity: 1;
bottom: 10%;
}
.content.hidefor-panel-up {
bottom: 20%;
transform: scale(0.95);
opacity: 0;
}
.ip {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity: 1;
top: 0;
opacity: 1;
z-index: -5;
position: absolute;
}
.ip.hidefor-panel-up {
opacity: 1;
top: 10%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #06113E;
line-height: 1.5em;
font-size: 15px;
overflow: hidden;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
/*background: #efefef;*/
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-up {
z-index: 10;
position: fixed;
display: block;
bottom: 0;
-webkit-transition: all .7s ease;
transition: all 0.7s ease-out;
bottom: -20%;
width: 100%;
}
.panel-up.expanded {
bottom: 0;
}
.reveal-left {
float: left;
}
.reveal-up {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" style="color:white;z-index:99999999;position:absolute;">
<a style="color:white;" href="#" class="reveal-up">First Panel</a>
<br>
<a style="color:white;" href="#" class="reveal-up">Second panel</a>
</div>
<div class="panel-up">
<div class="panel-content">
<div class="close"></div>
<p style="margin-bottom: 30px; color:white;">up Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80">
<div class="content" style="color:white">
<h2 style="margin-top:10px;">Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts
as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
This question already has an answer here:
Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?
(1 answer)
Closed 5 years ago.
I have developed a lightbox feature, made with CSS for the most part. Though it functions well at a glance, I've been facing some complications with the way that it opens and closes with anchor links, the primary issue being that it adds on entries to the browser history.
Here's an example of what I am referring to:
I load a page with an image with the lightbox feature applied.
I click on the image, and the lightbox window opens.
Then I close the lightbox window and it returns back to the page; however, doing this has now added 2 additional history entries by opening and closing the lightbox via the anchor links behavior, (which append the page's URL with http://SITEURL.com/PAGEURL#theanchor).
Judging from previous responders, linking to anchors seem to be the least recommended for producing this sort of functionality. If that is the case, how else could I implement this, (and would I potentially be able to avoid the use of anchors altogether)?
Here is a full snippet that presents the lightbox feature in action, as well as the anchor link behavior:
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</a>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</a>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</a>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
Hopefully there is some sort of referable solution.
I accidentally posted this answer but, you can remove anchor tags and and just add cursor: pointer; css to your .pic class.
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
You could just prevent the default action and not add the hash to the url (or history)
$('a[href^="#"]').click(function(evt){
evt.preventDefault()
});
Has been a long time since I have used Lightbox and not sure if this will conflict with it's features or not