0

I am using a external theme but I have little knowledge of JS / jQuery. It uses this function to show images on hover:

$(document).ready(function() {  
    ....
    FirstLoad();
    ....
});

function FirstLoad() {
    ....

    $('.showcase-list li a').on('mouseenter', function() {
        $('#showcase-gallery').addClass('visible');
        $('.showcase-list li a').addClass('disable');
        $(this).removeClass('disable'); 
        var aux = $(this).data('aux'),
        preview = $('.showcase-img[data-aux="' + aux + '"]');   
        $('#showcase-gallery').find('.showcase-img').removeClass('active');
        preview.addClass('active');
    }).on('mouseleave', function() {
        $('.showcase-list li a').removeClass('disable');
        $('#showcase-gallery').removeClass('visible');
        $('.showcase-img').removeClass('active');   
    });

    ....
}// End First Load

But I trying to paginate this gallery with Inifite Scroll JS which is going well except that function does not work on the newly paginated content. I suspect its because it does not load.

I have this code:

var $showcasegallery = $('#showcase-gallery').infiniteScroll({
    path: '.gallery_next',
    append: '.ajax-case-images' ,
    loadOnScroll: false,
    status: '.page-load-status',
  });

var $showcaselist = $('.wrapper-case-links').infiniteScroll({
    path: '.gallery_next',
    append: '.ajax-case-links' ,
    loadOnScroll: false,
    status: '.page-load-status',
  });


// load next page 
var $viewMoreButton = $('.view-more-button');
$viewMoreButton.on( 'click', function() {


$showcaselist.infiniteScroll('loadNextPage');
$showcasegallery.infiniteScroll('loadNextPage');

});

This is working fine, but how can I make sure that other function reloads too on button click so that I can use this zoom function from the theme?

Raf Rasenberg
  • 534
  • 2
  • 14
  • 27
  • `that function does not work on the newly paginated content` In this case you don't need to call the function again, but instead you need to use delegated event handlers. See the duplicate for more information – Rory McCrossan Jan 29 '20 at 10:37
  • Explicitly: `$(document).on("mouseenter, ".showcase-list li a", function() { ..` but do read the duplicate link for more info – freedomn-m Jan 29 '20 at 10:38
  • Thanks guys. But how would the line of code look for my use case? Sorry for asking but I really have zero knowledge of jQuery – Raf Rasenberg Jan 29 '20 at 10:41
  • The duplicate link can be a little overwhelming, which is why I gave you the code you need: change `$('.showcase-list li a').on('mouseenter', function() { ..` to the code in my comment above – freedomn-m Jan 29 '20 at 10:53

0 Answers0