Isotope with pagination, filters, lazyloading

Isotope with pagination

Today I’d like to share with you some experimental Isotope functions from a recent project I was working on, where we had to use Isotope with pagination functionality with filtering and lazy loading.

The idea was that we want to take each image and calculate its width and height from the original image file and reduce it to fit in its container and make some calculations to preserve the aspect ratio for images, after the images have been loaded we will init Isotope with its other functions.

Having several functions working in the same harmony could some time be such a pain, we can achieve a variety of dynamic work that can be controlled from HTML attributes and concerned about resizing and screens sizes.

I’m assuming for the sake of this post that you know Javascript not just familiar with it, but if there are any questions marks in your head, let me know and I can do a follow-up post 🙂

Attention: I didn’t have the time to check this functions on all browsers.

Features:

Isotope pagination.
Select filter, multi-select filter, and supports normal buttons filter.
Lazyloading and imagesloaded.
Function to calculate images’ width and height and type put it on img attributes.
Loader for images.
Define items per page and items per page for small screens from HTML attributes.
True false debugging function, instead of normal console.log.
Isotope with venobox modal popup image.
Dynamic pagination calculation.
Most of what I wrote is commented.
Multiple item types (Image, video, PDF) defined in CSS.
Ready to use.

Screenshots:

The HTML structure for an image element:

<!-- Gallery item -->
<div class="col-lg-4 col-md-4 col-sm-6 col-12 gallery-item-outer" data-filter="2017">
	<div class="gallery-item press">
		<a href="images/gallery/emre-gencer-62624.jpg" class="venobox" data-gall="Press">
			<img src="assets/images/blank.gif" data-original="images/gallery/thumbs/emre-gencer-62624.jpg" alt="">
		</a>
	</div>
</div>
<!-- /Gallery item -->

Change the number of showed images:

<div class="row gallery-items onyx-pagination" items-count="6" items-count-resp="4">

Chagne the ‘items-count’ attr’s value to whatever you want.

Some Javascript:

imagesToLoad: function(){
	var container = $(Onyx.isotopeGalleryPagination.selector),
		imagesToLoad = container.find("img"),
		imagesLength = imagesToLoad.length,
		count = 1;

	imagesToLoad.each(function () {

		var url = $(this).attr("data-original"), // Get image URL
			$this = $(this), // Refer to this
			img = new Image(), // Create a new image in memory
			imgWidth,
			imgHeight;

		// Start doing stuff when image is loaded
		img.onload = function(){
			imgWidth = this.width; // Assign image width
			imgHeight = this.height; // Assign image height

			// Start the resizing procedures
			var maxWidth = $this.parent().outerWidth(), // Max width for the image, and its responsive by the parent width... :D
				ratio = 0;  // Specify aspect ratio


			// Check if the current width is larger than the max
			if(imgWidth >= maxWidth){
				ratio = maxWidth / imgWidth; // get ratio value to scale image
				$this.attr("width", maxWidth); // Set new width
				$this.attr("height", imgHeight * ratio); // Scale height based on ratio
				imgHeight = imgHeight * ratio; // Reset height to match scaled image
				imgWidth = imgWidth * ratio; // Reset width to match scaled image
			}


			Onyx.log("Image width => "   this.width   ", Image height => "   this.height);

			/*
			 * Start Isotope magic after setting width and height for images
			 */
			var itemsInPage = (container.attr('items-count'))?parseInt(container.attr('items-count'), 10):15;
			if( count == imagesLength ) {
				Onyx.log("Items in page => "   itemsInPage);
				Onyx.isotopeGalleryPagination.initIsotope();
			}

			// Counter to fire Isotope after all images has been loaded
			count  ;

		}, img.onerror = function(){

			// If an image is missing this will increase the counter to fire Isotope functions
			count  ;

			// Obada - Debugging
			Onyx.log("This image has some error, and it may cause to pause the whole images loading => "   img.src);
		}

		img.src = url;

	});

},

References and Credits:

Photos by Emre Gencer on Unsplash
https://unsplash.com/photos/29sybIGm3-4
https://unsplash.com/photos/FxPfLIkEXHQ
https://unsplash.com/photos/2FdriJbrC5k
https://unsplash.com/photos/U0QuVfaipgo
https://unsplash.com/photos/YWzgBsbUKjE
https://unsplash.com/photos/3YQIQP0_R04
https://unsplash.com/photos/NZMeJsrMC8U
https://unsplash.com/photos/IyFGR2VdpFg
https://unsplash.com/photos/ou-8_lYwgh0
https://unsplash.com/photos/349fg_1XmzY
https://unsplash.com/photos/MTFPt08LoDQ
https://unsplash.com/photos/yZ5v4ZI0Ogc
https://unsplash.com/photos/153_VPk1NZQ
https://unsplash.com/photos/_ZUbtdWgOCc
https://unsplash.com/photos/mnwsyi4m3fc
https://unsplash.com/photos/8dEcwK1OIDY
https://unsplash.com/photos/88-VygK3gh0
https://unsplash.com/photos/1xaCkTx0liA
https://unsplash.com/photos/afMW77PAK_g
https://unsplash.com/photos/f5sdPmHPf5Q
https://unsplash.com/photos/XSM7TRzgvyg
https://unsplash.com/photos/UdqXIzwnwr4

Isotope
Ionicons
VenoBox
imagesLoaded