CODEWITHSUNDEEP
html
Moonhead
Moonhead

Reputation: 1568

Lightbox not working in my website

I am trying to integrate lightbox on my website, but I can't seem to figure out what is wrong. I know that I have my css and js files correct because when I copy the index.html file it works, but when I try to use my own it doesn't for some reason.

Please excuse the music and the cheesyness of this website Here is the website [link][1]

It's the first 4 images. I copied exactly from the example? Here is my index.html file this is for the gallery section only.

<article id="gallery" class="panel">
    <header>
        <center>
            <h2>Gallery</h2>
        </center>
        <div class="image-row">
            <div class="image-set"> 
                <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
                <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
                <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
                <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
            </div>
        </div>
        <div class="image-row">
        ...

Upvotes: 0

Views: 1355

Answers (1)

isherwood
isherwood

Reputation: 61063

You're not loading the Lightbox CSS. Add this to your page head:

<link rel="stylesheet" href="css/lightbox.css"></link>

And there may be image files or other assets also needed to get Lightbox looking right.

Also, remove one of the two jQuery calls. Even if it doesn't break things (which is rare), you don't want your visitors to have to download two big library files for no reason.

Upvotes: 1

Related Questions