0

I wish to use isotope.js and a lightbox-like overlay together to create a cool, filterable photo gallery or information page, where you click an item to get a popup with more info.

Here is a jfiddle with the example http://jsfiddle.net/9d5qw/

here is the js I'm using - 

$('.box-to-display').click(function() {
    $(this).siblings('.popup').center();
    $(this).siblings('.popup').fadeIn();
    $(this).siblings('.overlay').fadeIn();
});

$('.overlay').click(function() {
    $(this).siblings('.popup').fadeOut();
    $(this).fadeOut();
});


var $container = $('#isotope-container');
      $container.isotope({
        animationEngine : 'jquery',
         layoutMode: 'straightDown',
        animationOptions: {
            duration: 250,
            easing: 'linear',
            queue: false
        } });

Essentially - the isotope puts overflow:hidden; on the container it targets, which hides the positioned popup overlay. Ideally, I don't want to have to do two separate pieces - one for overlays, one for the list. I'm generating my list from an array with php, in case this is important to know!

After writing all of this, I realize I might need to have two separate pieces of code - one for overlays, one for the list, and connect them with a unique ID - but if not, please let me know!

Thanks! Jacob

Jacob Raccuia
  • 1,589
  • 1
  • 14
  • 24

1 Answers1

0

I solved this by using two separate pieces of code, one for the overlay, one for the list.

Hope this helps someone!

Jacob Raccuia
  • 1,589
  • 1
  • 14
  • 24
  • Would be great if you can also share the code you used for this @Jacob Raccuia – rhand Nov 07 '16 at 02:53
  • @rhand honestly this was a long time ago and I don't remotely remember the project this was on. Otherwise I would share more! But piecing it together, I duplicated the content on the page. One part of the content displayed the images, and completely separate from that, I displayed the lightbox images, but hidden. Since the content was looped twice, it has the same ID – Jacob Raccuia Nov 07 '16 at 17:29