Hi,

Can you please let me know what code snippet you are trying to implement. I am not able to access your site to see the problem there, it is showing me this message:

Access denied. You need to Login first

Hi,

I've analyzed how YITH infinite scroll works and I have created this code for you (already added in Theme Options > Footer > JavaScript):

<script>
jQuery( document ).on( 'yith_infs_added_elem', function( e, elem, current_url ) {
	
	jQuery( elem ).each( function( i, el ) {
		var $this = jQuery( el ),
			$images = $this.find('.image.full-gallery .thumb img');
	
		if($images.length > 1)
		{
			$this.find('.image').append( '<a href="#" class="thumb-prev">Prev</a><a href="#" class="thumb-next">Next</a>' );
	
			var	$nextprev = $this.find('.thumb-prev, .thumb-next');
	
			$nextprev.on('click', function(ev)
			{
				ev.preventDefault();
	
				var dir = jQuery(this).hasClass('thumb-prev') ? -1 : 1,
					$curr = $images.filter(':not(.hidden-slowly)'),
					$next = $curr.next();
	
				if(dir == 1)
				{
					if($next.length == 0)
						$next = $images.first();
				}
				else
				{
					$next = $curr.prev();
	
					if($next.length == 0)
						$next = $images.last();
				}
	
				$next.addClass('enter-in notrans ' + (dir == -1 ? 'ei-left' : '')).removeClass('hidden hidden-slowly hs-left hs-right');
				$curr.addClass('hidden-slowly ' + (dir == -1 ? 'hs-left' : ''));
	
				setTimeout(function(){ $next.removeClass('enter-in notrans ei-left'); }, 0);
			});
		}
	} );
	
} );
</script>

So now the new items that are loaded from YITH are processed and gallery works fine.

Hi Mfboutique,

I'm glad to hear that buddy

Sorry for the delay of your ticket.

P.S: If you like our theme, it would help us a lot if you could give us five star rating on themeforest from your Downloads tab.

A huge thank you from Laborator in advance and have an amazing week!

Hi again,

I have corrected the code I have sent you previously to this one:

<script>
jQuery( document ).on( 'yith_infs_adding_elem', function( e, elem, current_url ) {
	var productsShown = jQuery( '.items .row > .product' ).length;
	
	jQuery( elem ).each( function( i, el ) {
		var $this = jQuery( el ),
			$images = $this.find('.image.full-gallery .thumb img');
		
		if ( ( productsShown + i ) % 4 == 0 ) {
			//$this.before( '<div class="clear"></div>' );
			$this.css( {
				clear: 'left'
			} );
		}
	
		if($images.length > 1)
		{
			$this.find('.image').append( '<a href="#" class="thumb-prev">Prev</a><a href="#" class="thumb-next">Next</a>' );
	
			var	$nextprev = $this.find('.thumb-prev, .thumb-next');
	
			$nextprev.on('click', function(ev)
			{
				ev.preventDefault();
	
				var dir = jQuery(this).hasClass('thumb-prev') ? -1 : 1,
					$curr = $images.filter(':not(.hidden-slowly)'),
					$next = $curr.next();
	
				if(dir == 1)
				{
					if($next.length == 0)
						$next = $images.first();
				}
				else
				{
					$next = $curr.prev();
	
					if($next.length == 0)
						$next = $images.last();
				}
	
				$next.addClass('enter-in notrans ' + (dir == -1 ? 'ei-left' : '')).removeClass('hidden hidden-slowly hs-left hs-right');
				$curr.addClass('hidden-slowly ' + (dir == -1 ? 'hs-left' : ''));
	
				setTimeout(function(){ $next.removeClass('enter-in notrans ei-left'); }, 0);
			});
		}
	} );
	
} );
</script>

The products are now aligned properly in rows.