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 kannaya pesari
kannaya pesari
93 Points

JQUERY---lightbox

<section>
    <ul id="gallery">
        <li id="one">
            <p>Transformers </p>
            <a class="gallery-images-links" href="img/1.jpg"><img src="img/1.jpg" alt=""></a>
        </li>
        <li>
            <p>jdfkjdkfk</p>
            <a class="gallery-images-links" href="img/2.jpg"><img src="img/2.jpg" alt=""></a>
        </li>
        <li>
            <p>kdjfkdjf</p>
            <a class="gallery-images-links" href="img/3.jpg"><img src="img/3.jpg" alt=""></a>
        </li>
        <li>
            <p>kjdfkdjf</p>
            <a class="gallery-images-links" href="img/4.jpg"><img src="img/4.jpg" alt=""></a>
        </li>
        <li>
            <p>jkdjfkd</p>
            <a class="gallery-images-links" href="img/5.jpg"><img src="img/5.jpg" alt=""></a>
        </li>
        <li>
            <p>arun </p>
            <a class="gallery-images-links" href="img/6.jpg"><img src="img/6.jpg" alt=""></a>
        </li>
    </ul>
</section>

.la{
  position:absolute;
  left:0%;
  top:0;
  background:rgba(0,0,0,0.9);
  width:100%;
  height:100%;
    z-index: 1000;
    display:none;

}
.la img {
  position:absolute;
  left:25%;
  top:20%;
    right:0%;
    bottom:0%;
    width:50%;
  height:50%;
    border:2px solid #fff;
}

//-+-+-+-+-+-+-+-+ declaring variables +-+-+-+-+-+-+-+-+
var $overlay="<div class='la'></div>"

//-+-+-+-+-+-+-+-+ light-box functionality +-+-+-+-+-+-+-+-+
$('a.gallery-images-links').click(function(event){
  event.preventDefault();
  $('body').append($overlay);
  var linking=$(this).attr('href');
  $('.la').append("<img class='added-image' src='' alt=''>");
  $('.added-image').attr('src',linking);
  $('.la').show(1000);

});

//-+-+-+-+-+-+-+-+ light-box image disappear functionality +-+-+-+-+-+-+-+-+
$overlay.click(function(){
  $overlay.hide();
});

@@@@@@@@@Question is@@@@@@@@

1.image disappear functionality is not working..Could someone debug it???

Chyno Deluxe
Chyno Deluxe
16,936 Points

//fixed code highlighting

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

You'll want to move your overlay click event inside of your img click event. Secondly, you'll want to target by class name rather then the entire element itself like below. And lastly, you'll want to use the remove() method on the overlay rather than hide it. Your image click event will create a new overlay every time you click another image and without the removal of the previous overlay, you'll just be adding to the existing one and will need to be be clicked multiple times in order to remove each new overlay.

//-+-+-+-+-+-+-+-+ declaring variables +-+-+-+-+-+-+-+-+
var $overlay="<div class='la'></div>"

//-+-+-+-+-+-+-+-+ light-box functionality +-+-+-+-+-+-+-+-+
$('a.gallery-images-links').click(function(event){
  event.preventDefault();
  $('body').append($overlay);
  var linking=$(this).attr('href');
  $('.la').append("<img class='added-image' src='' alt=''>");
  $('.added-image').attr('src',linking);
  $('.la').show(1000);

//-+-+-+-+-+-+-+-+ light-box image disappear functionality +-+-+-+-+-+-+-+-+
  $('.la').click(function(){
    $(this).remove();
  });
});