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 tag to call an anchor link, just as href does?<

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>