Reply To: Problem with data-plugin-masonry

[Support]

Hello, first thanks for your purchase and sorry for this issue.

To fix please try changing the code of “Load More” at js/examples/examples.portfolio.js line 434 until 524 to:

/*
Load More
*/
var portfolioLoadMore = {

	pages: 0,
	currentPage: 1,
	$wrapper: $('#portfolioLoadMoreWrapper'),
	$btn: $('#portfolioLoadMore'),
	$btnWrapper: $('#portfolioLoadMoreBtnWrapper'),
	$loader: $('#portfolioLoadMoreLoader'),

	build: function() {

		var self = this

		self.pages = self.$wrapper.data('total-pages');

		if(self.pages <= 1) {

			self.$btnWrapper.remove();
			return;

		} else {

			self.$btn.on('click', function() {
				self.loadMore();
			});

			// Infinite Scroll
			if(self.$btn.hasClass('btn-portfolio-infinite-scroll')) {
				self.$btn.appear(function() {
					self.$btn.trigger('click');
				}, {
					data: undefined,
					one: false,
					accX: 0,
					accY: 0
				});
			}

		}

	},
	loadMore: function() {

		var self = this,
			ajax_url = (self.$wrapper.data('ajax-url')) ? self.$wrapper.data('ajax-url') : 'ajax/portfolio-ajax-load-more-',
			ajax_sub = self.$wrapper.data('ajax-sub');

		self.$btn.hide();
		self.$loader.addClass('portfolio-load-more-loader-showing').show();

		// Ajax
		$.ajax({
			url: ajax_url + (parseInt(self.currentPage)+1) + '&sub='+ajax_sub,
			complete: function(data) {

				var $items = $(data.responseText);

				setTimeout(function() {
					self.$wrapper.append($items);
					self.$wrapper.isotope('appended', $items);
					self.$wrapper.isotope('layout');
					self.currentPage++;

					if(self.currentPage < self.pages) {
						self.$btn.show().blur();
					} else {
						self.$btnWrapper.remove();
					}

					// 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);
						});
					});
					self.$loader.removeClass('portfolio-load-more-loader-showing').hide();

					// Wait for images and layout the masonry/isotope again
					self.$wrapper.waitForImages(function(){
						self.$wrapper.isotope('layout');
					});

				}, 1000);
			}
		});
	}
}

* Note the new waitForImages code. As your images are big (in KBs), we need wait all images load and then layout the isotope/masonry again.

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

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---