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 9 months, 2 weeks ago. This post has been viewed 489 times

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


    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



    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
    		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) {
    				// 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) {
    						return false;
    					// Next
    					$wrapper.find('a[data-ajax-portfolio-next]').on('click', function(e) {
    						return false;
    				// Carousel
    				$(function() {
    					$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
    						var $this = $(this),
    						var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
    						if (pluginOptions)
    							opts = pluginOptions;

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

    Kind Regards,


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