Home Forums Porto Template "popup-gallery-ajax" doesn't work after 1 loop of the "owl-carousel"

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 2 months, 1 week ago. This post has been viewed 140 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10022763

    pbazior
    Participant

    Hi there,
    In my websites, I created a feature where an owl-carousel opens a popup-gallery-ajax window: very useful when lots of photos and lots of text content.
    Unfortunately, just after one loop is completed, a click on the following image of the carousel only open the text content in the window (not sexy at all!).
    At the moment, I can fix it by disabling the loop (“loop”: false), which was done on another website: http://www.itxasoa-osteopathe.fr/.
    I hope I described the issue properly and you can help me resolve this issue.
    Best regards, Philippe



    Template Version: 5.7.2
    #10022768

    Support2
    Keymaster

    Hello,

    The problem is that the magnificPopup is loading before the clone of owl carousel items (loop).
    In that case we need to execute the Ajax on Modal js code after document is ready. For this please change the code to this below:

    /*
    Ajax on Modal
    */
    $(document).ready(function(){
    	$('a[data-ajax-on-modal]').magnificPopup({
    		type: 'ajax',
    		tLoading: '<div class="bounce-loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>',
    		mainClass: 'portfolio-ajax-modal',
    		gallery: {
    			enabled: true
    		},
    		callbacks: {
    			ajaxContentAdded: function() {
    
    				// Wrapper
    				var $wrapper = $('.portfolio-ajax-modal');
    
    				// Close
    				$wrapper.find('a[data-ajax-portfolio-close]').on('click', function(e) {
    					e.preventDefault();
    					$.magnificPopup.close();
    				});
    
    				// Remove Next and Close
    				if($('a[data-ajax-on-modal]').length <= 1) {
    					
    					$wrapper.find('a[data-ajax-portfolio-prev], a[data-ajax-portfolio-next]').remove();
    
    				} else {
    
    					// Prev
    					$wrapper.find('a[data-ajax-portfolio-prev]').on('click', function(e) {
    						e.preventDefault();
    						$('.mfp-arrow-left').trigger('click');
    						return false;
    					});
    
    					// Next
    					$wrapper.find('a[data-ajax-portfolio-next]').on('click', function(e) {
    						e.preventDefault();
    						$('.mfp-arrow-right').trigger('click');
    						return false;
    					});
    
    				}
    
    				// Carousel
    				$(function() {
    					$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
    						var $this = $(this),
    							opts;
    
    						var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
    						if (pluginOptions)
    							opts = pluginOptions;
    
    						$this.themePluginCarousel(opts);
    					});
    				});
    
    			}
    		}
    	});
    });

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)