Aleksander Aleksander - 5 months ago 14
CSS Question

:target does not work on my site

I found cool css to create lightbox. It uses :target to show lightbox div. I tried in in code pen and it works fine, however on my site it doesn't show anything. I can't find what else in my code is blocking it from showing. Here's the basic code:

HTML:

<a href="#img2" class="image">
<img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
</a>

<a href="#_" class="lightbox" id="img2">
<img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
</a>`


CSS:

.lightbox {
display: none;


position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8)
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}

.lightbox:target {
outline: none;
display: block;
}


(Codepen: http://codepen.io/anon/pen/jrBrmp)

and here's my site: http://test.fulfeal.co.uk/how-to/ Thanks in advance.

Aleksander

Answer

Your site url is been routed. Two ways to solve the issue

  1. You are using wordpress framework for your site, so go to the wordpress content admin panel and change your url type.

OR

  1. Add below code at the end of your site.

    <script>
     $(function(){
        $(".image").on("click",function(){
        var image = $(this).attr("href");
        $(image).show();
      });
    });
    </script>
    
Comments