CODEWITHSUNDEEP
jqueryhtmlcsslightbox2
ALR
ALR

Reputation: 441

Lightbox2: CSS set to display:none

I am trying to use Lightbox2, but it is not working at all when I click on the image.

When I look in the Developer Console (Chrome), I can see that the overlay and the image is being added to the DOM, but its display property is set to none.

display:none

This is my basic test code:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <script src="Script/jquery.js"></script>
        <link href="Script/lightbox_dist/css/lightbox.css" rel="stylesheet">        
    </head>

    <body>
        <img src="Images/Gallery/27.jpg" data-lightbox="gallery" width="250"/>
        <script src="Script/lightbox_dist/js/lightbox.js"></script>
    </body>
</html>

Upvotes: 0

Views: 444

Answers (1)

AlexG
AlexG

Reputation: 5919

Are you using the correct markup?

<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1" data-title="Optional caption.">
    <img class="example-image" src="images/thumb-1.jpg" alt="Two men in bicycle jerseys sitting outside at table having coffee">
</a>
<a class="example-image-link" href="images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption.">
    <img class="example-image" src="images/thumb-2.jpg" alt="Two men in bicycle jerseys sitting outside at table having coffee">
</a>

Upvotes: 1

Related Questions