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.
