Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Yeondam Park
Yeondam Park
9,469 Points

lightbox plugin problem

Here is my HTML file, and I used lightbox plugin to make my lightbox works and with arrow button to go to next image or previous image.. but it looks everything is working fine, however total images should be 12 instead of 18, and when I keep clicking next images button, when it reached image 5, it keep duplicate three times and next image also duplicate couple times.. other than that, everything is working fine.

I do not know what is wrong with my code.

Thank you!! 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Interactive Photo Gallery</title>
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="vendor/css/lightbox.css">
    <link rel="stylesheet" href="css/main2.css">

    <script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true,
      'showImageNumberLabel': true,
      'alwaysShowNavOnTouchDevices': true
    })
</script>

</head>

<body>
    <div class="wrapper">
        <header id="main-header">
            <div class="search-box">
                <label for="search">
                    <input type="text" id="search" name="search" placeholder=" Search" />
                </label>
            </div>
        </header>
        <section id="main-gallery">
            <ul class="gallery">
                <li id="links">
                    <a href="img/01.jpg" data-lightbox="roadtrip" data-title="Hay Bales
I love hay bales. Took this snap on a drive through the countryside past some straw fields." >
                        <img src="img/Thumbnails/01.jpg" alt="Hay Bales
I love hay bales. Took this snap on a drive through the countryside past some straw fields." />
                    </a>
                </li>
                <li id="links">
                    <a href="img/02.jpg" data-lightbox="roadtrip" data-title="Lake
The lake was so calm today. We had a great view of the snow on the mountains from here.">
                        <img src="img/Thumbnails/02.jpg" alt="Lake
The lake was so calm today. We had a great view of the snow on the mountains from here." />
                    </a>
                </li>
                <li>
                    <a href="img/03.jpg" data-lightbox="roadtrip" data-title="Canyon
I hiked to the top of the mountain and got this picture of the canyon and trees below.">
                        <img src="img/Thumbnails/03.jpg" alt="Canyon
I hiked to the top of the mountain and got this picture of the canyon and trees below." />
                    </a>
                </li>
                <li>
                    <a href="img/04.jpg" data-lightbox="roadtrip" data-title="Iceberg
It was amazing to see an iceberg up close, it was so cold but didn’t snow today.">
                        <img src="img/Thumbnails/04.jpg" alt="Iceberg
It was amazing to see an iceberg up close, it was so cold but didn’t snow today." />
                    </a>
                </li>
                <li>
                    <a href="img/05.jpg" data-lightbox="roadtrip" data-title="Desert
The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons.">
                        <img src="img/Thumbnails/05.jpg" alt="Desert
The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons." />
                </li>
                <li>
                    <a href="img/06.jpg" data-lightbox="roadtrip" data-title="Fall
Fall is coming, I love when the leaves on the trees start to change color.">
                        <img src="img/Thumbnails/06.jpg" alt="Fall
Fall is coming, I love when the leaves on the trees start to change color." />
                </li> 
                <li>
                    <a href="img/07.jpg" data-lightbox="roadtrip" data-title="Plantation
I drove past this plantation yesterday, everything is so green!">
                        <img src="img/Thumbnails/07.jpg" alt="Plantation
I drove past this plantation yesterday, everything is so green!" />
                </li>
                <li>
                    <a href="img/08.jpg" data-lightbox="roadtrip" data-title="Dunes
My summer vacation to the Oregon Coast. I love the sandy dunes!">
                        <img src="img/Thumbnails/08.jpg" alt="Dunes
My summer vacation to the Oregon Coast. I love the sandy dunes!" />
                    </a>
                </li>
                <li>
                    <a href="img/09.jpg" data-lightbox="roadtrip" data-title="Countryside Lane
We enjoyed a quiet stroll down this countryside lane.">
                        <img src="img/Thumbnails/09.jpg" alt="Countryside Lane
We enjoyed a quiet stroll down this countryside lane." />
                    </a>
                </li>
                <li>
                    <a href="img/10.jpg" data-lightbox="roadtrip" data-title="Sunset
Sunset at the coast! The sky turned a lovely shade of orange.">
                        <img src="img/Thumbnails/10.jpg" alt="Sunset
Sunset at the coast! The sky turned a lovely shade of orange." />
                    </a>
                </li>
                <li>
                    <a href="img/11.jpg" data-lightbox="roadtrip" data-title="Cave
I did a tour of a cave today and the view of the landscape below was breathtaking.">
                        <img src="img/Thumbnails/11.jpg" alt="Cave
I did a tour of a cave today and the view of the landscape below was breathtaking." />
                    </a>
                </li>
                <li>
                    <a href="img/12.jpg" data-lightbox="roadtrip" data-title="Bluebells
I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in.">
                        <img src="img/Thumbnails/12.jpg" alt="Bluebells
I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in." />
                    </a>
                </li>
            </ul>
        </section>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="js/sticky-js/jquery.sticky.js"></script>
    <script src="vendor/js/lightbox.js"></script>

</body>

</html>

2 Answers

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

You're not closing your anchor tags on the 5th, 6th or 7th images. If you add 

 on each of them, it should solve the issue.

A small thing that might help you in the future is to use an html validator to check for errors. Here is the one [from the W3C](https://validator.w3.org/#validate_by_input). Just copy your html and click check.
hasinaakhter
hasinaakhter
8,540 Points
hasinaakhter
hasinaakhter
8,540 Points

Hello I am using the lightbox 2 plugin. It worked fine in my site but close, forward or reverse buttons are not showing on the images. I have these image files in the same folder.

Please let me know how can I incorporate these buttons.

Thanks in advance.