0

I'm using LightGallery to showcase my portfolio and isotope to filter the categories. As my images are in high quality I'm trying to use ImageLoaded but not able to achieve, still learning jQuery. I want the ImageLoaded to load the images in the background while a preloader(css or gif) is displayed and when its done loading give an entrance to the image like a zoom-in. My Codepen

    $(document).ready(function() {
        var $gallery = $('#gallery');
        var $boxes = $('.revGallery-anchor');
        $boxes.hide(); 

        $gallery.imagesLoaded( function() {
        $boxes.fadeIn();

            $gallery.isotope({
                // options
                sortBy : 'original-order',
                layoutMode: 'fitRows',
                itemSelector: '.revGallery-anchor',
                stagger: 30,
                masonry: {
                  columnWidth: 200
                }
            });
        }); 

        $('button').on( 'click', function() {
            var filterValue = $(this).attr('data-filter');
            $('#gallery').isotope({ filter: filterValue });
            $gallery.data('lightGallery').destroy(true);
            $gallery.lightGallery({
                selector: filterValue.replace('*','')
            });
        });
  });

This is the code I'm trying to work with. Its not yet complete, but I'm stuck and don't know the next step. Also its not animating.

Please Help, Thank you.

Kamalakannan
  • 119
  • 2
  • 16

1 Answers1

0

You lost the initialization of $.lightGallery() so added that. Added a preloader that I fade out after isotope runs. I'm also hiding #gallery with opacity: 0; and fading that in when isotope is done loading. Writing something that would "zoom" your images in would be somewhat tricky so I'll leave that up to you. http://codepen.io/anon/pen/pRwEXg

Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Hi Micheal, Its not working well when hosted. [Site](http://sapshubli.com/gallery/) the loader is visible with the images loading or only the loader appears, image won't appear at all. check the above site. its same as my codepen in the question – Kamalakannan Jan 23 '17 at 18:22
  • @Kamalakannan there is obviously something not the same between codepen and your personal site, but I'm not going to troubleshoot your personal site, too. I've already helped you plenty on third party sites (codepen), which is not advised on SO, hopefully you can take the work I've already done for you and figure out your personal website. – Michael Coker Jan 23 '17 at 18:37
  • Yeah, I know I'm asking for more :(. My apologies. Anyway, thank you Micheal. – Kamalakannan Jan 23 '17 at 18:43
  • @Kamalakannan no problem, but it seems like you're asking personal favors from me in the comments, and just posting a link to your website hoping I'll go in and figure everything out for you. That only serves you - it doesn't help the SO community at all. Just keep in mind that SO isn't here to complete your personal projects for you. If you have questions, make a post that clearly shows a specific problem with clear code needed to replicate the problem. http://stackoverflow.com/help/how-to-ask – Michael Coker Jan 23 '17 at 18:56