JQuery image grid system

Question

I have one question about the image grid system.

I created this DEMO from codepen.io

In this demo you can see:

<div class="photo-row"> <div class="photo-item"> <!--Posted image here <img src="image/abc.jpg"/>--> </div> </div> 

This DEMO is working fine, but. My question is how can I use my grid system like in this css:

 <div class="photo"> <div class="photo-row"> <a href="#"><img src="abc.jpg"/></a> </div> <div class="photo-row"> <a href="#"><img src="abc.jpg"/></a> </div> </div> 

I created a second demo for this: a second DEMO . In the second demo, you see that the grid does not work like the first DEMO .

Also my jQuery code:

 (function($,sr){ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); /* Wait for DOM to be ready */ $(function() { // Detect resize event $(window).smartresize(function () { // Set photo image size $('.photo-row').each(function () { var $pi = $(this).find('.photo-item'), cWidth = $(this).parent('.photo').width(); // Generate array containing all image aspect ratios var ratios = $pi.map(function () { return $(this).find('img').data('org-width') / $(this).find('img').data('org-height'); }).get(); // Get sum of widths var sumRatios = 0, sumMargins = 0, minRatio = Math.min.apply(Math, ratios); for (var i = 0; i < $pi.length; i++) { sumRatios += ratios[i]/minRatio; }; $pi.each(function (){ sumMargins += parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right')); }); // Calculate dimensions $pi.each(function (i) { var minWidth = (cWidth - sumMargins)/sumRatios; $(this).find('img') .height(Math.floor(minWidth/minRatio)) .width(Math.floor(minWidth/minRatio) * ratios[i]); }); }); }); }); /* Wait for images to be loaded */ $(window).load(function () { // Store original image dimensions $('.photo-item img').each(function () { $(this) .data('org-width', $(this)[0].naturalWidth) .data('org-height', $(this)[0].naturalHeight); }); $(window).resize(); }); 

Can anyone help me in this regard? Thank you in advance for your reply.

Answer 1

Since you will be creating HTML code dynamically, you must remove the .photo-row container, but save the .photo-item like this:

  <div class="photo-item"> <a href="..."><img src="..." /></a> </div> <div class="photo-item"> <a href="..."><img src="..." /></a> </div> <div class="photo-item"> <a href="..."><img src="..." /></a> </div> ... 

Then you can wrap your .photo-row elements when the page loads. First, start with different sets of two:

 var imgGrab = $('.photo-item'); //photos var imgLength = imgGrab.length; //number of photos for ( i=0; i<imgLength; i=i+3 ) { imgGrab.eq(i+1).add( imgGrab.eq(i+1) ).add( imgGrab.eq(i+2) ).wrapAll('<div class="photo-row"></div>'); //wrap photos } 

Then find the ones you are looking for and wrap them with .photo-row :

 $(".photo-item").each(function(){ if($(this).parent().is(":not(.photo-row)")){ $(this).wrap('<div class="photo-row"></div>'); } }); 

This will dynamically convert your images and let CSS do its job regardless of their number:

CODEPEN