jquery - Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?

Question

Original Post:

Is it possible for onclick within an <a> tag to call an anchor link, just as href does?

In the snippet below, I have <a href="#view"> applied to all images, and <a id="close-customlightbox" class="lb-animate" href="#!"> as a return URL once each image is closed from lightbox view.

Ideally, I would rather have the anchors prompted where they would not create any sort of extension to the page's URL.

So after clicking <a href="#view">, it adds on to the page's URL like so:

http://ARANDOMURL.com/page#view

And then once lightbox window is closed, the URL then displays:

http://ARANDOMURL.com/page#!

Then you have to click the browser's back button however many extra times before you can return to the actual previous page...

Any suggestions on how to achieve this?

Latest Update (Resolved):

This is working now, thanks to NetMage's answer here:

$('.pic > img').click(function() {
  var srcToCopy = $(this).attr('src');
  $('body').find('.imgsrc').attr('src', srcToCopy);
  $('body').addClass('no-scroll');
  $('#view').addClass("target");
});

$('#customlightbox-controls').on('click', function() {
  $('body').removeClass('no-scroll');
  $('#view').removeClass("target");
});

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">
  <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-->
<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"></a>
</div>

Answer 1

Looking at your sample, it seems you are using the CSS :target selector to handle displaying and hiding the lightbox. The :target selector is applied to the target element of the current URL, so the changes don't take affect if you don't modify the URL.

Instead of modifying the URL, change all the :target selectors in your CSS to be .target selectors.

Then, in your event handlers:

$('.pic > img').click(function() {
    var srcToCopy = $(this).attr('src');
    $('body').find('.imgsrc').attr('src', srcToCopy);
    $('body').addClass('no-scroll');
    $('#view').addClass("target");
});

$('#customlightbox-controls').on('click', function() {
    $('body').removeClass('no-scroll');
    $('#view').removeClass("target");
});

Now, when you click an image, the CSS style class target is added to the #view element, which causes it to appear, and when you click the Close box, the target class is removed, and they disappear.

You no longer need to change the URL or href, so you can remove the anchor tags for #view and the close onclick to set back to #!.

Sample new Lightbox instance:

<!-- Lightbox Instance 1 -->
<div class="container">
    <div class="pic">
      <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
    </div>
</div>

Change to close lightbox control:

<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate"></a>
</div>