javascript - fit images with different aspect ratios into multiple rows evenly -
good morning.
first, in advance! i've been stack overflow spectator quite while, , guys great.
i looking create photo layout webpage www.eden-koru.com, photos presented in rows. due cropping, , different cameras, each photo may have different aspect ratios , therefor there many uneven gaps when placed in row.
a perfect example of want www.flickr.com/childe-roland. photos, laid out despite aspect ratio.
on different, similar question found 80% solution jsfiddle http://jsfiddle.net/martinschaer/ajtdb/:
var container_width = $('#container2').width(); var container_width_temp = 0.0; // must float! var container_height = 100.0; // random initial container heigth calculations $('#container2 img').each(function(){ var newwidth = (this.width / this.height) * container_height; this.width = newwidth; $(this).data('width', newwidth); container_width_temp += newwidth; }); $('#container2 img').each(function(){ this.width = $(this).data('width') * (container_width / container_width_temp); }); now, works 1 row. have no experience jquery, able see math , create "row_counter" variable counted number of image wrapper divs... got me 90%. multiplied final width row count, subtracted few pixels make margins.
it looks this:
$('.imagewrapper').each(function(){ rows +=1; }); my div layout looks this:
<div class="mainwrapper"> <div class="imagewrapper"> <img width="326" src="images/_dsc4434.jpg"></img> <img width="276" src="images/_dsc4537.jpg"></img> <img width="254" src="images/_dsc4483.jpg"></img> </div> <div class="imagewrapper"> <img width="276" src="images/_dsc0253.jpg"></img> <img width="306" src="images/the_alaska_rangeir.jpg"></img> <img width="275" src="images/dsc_9111.jpg"></img> </div> <div class="imagewrapper"> <img width="276" src="images/_dsc4689.jpg"></img> <img width="276" src="images/_dsc4718.jpg"></img> <img width="276" src="images/_dsc4738.jpg"></img> </div> </div> and css this:
.mainwrapper { background-color: black; margin: 0 auto 50px auto; width: 70%; height: auto; border: 2px solid white; border-radius: 10px; clear: both; padding: 7px 7px 7px 7px; text-align: center; overflow: hidden; } .mainwrapper .imagewrapper { overflow: hidden; width: 100%x; margin: 0px auto 0px auto; } .mainwrapper .imagewrapper img { display: inline-block; border: 1px solid #fff; } now, looks better did, there still lot of unevenness can't account styling. additionally can no longer use width: 100% make images shrink viewport changes.
i hope have given enough detail. please keep in mind know nothing jquery , haven't touched javascript in 5 years. major joined navy after graduation , never coded again until last week.
cheers! wes
this quite complex. managed make jquery plugin achieves want, i'm having issues making dynamic when user resizes browser window, ignoring this, should you're asking for.
jquery plugin
(function ( $ ) { $.fn.gallery = function( options ) { var settings = $.extend({ imgs: [], row_height: 300, margin: 10 }, options); var container = $(this); //create div each image for(var i=0;i<settings.imgs.length;i++){ $(this).append("<div class='imgwrapper'></div>"); } //setup css imgwrappers $("head").append("<style type='text/css'>.imgwrapper{ float: left; margin-left: "+settings.margin+"px; margin-top: "+settings.margin+"px; height: 261px; background-repeat: no-repeat; background-position: center; background-size: cover;}</style>") //define global vars var imgs_aspect = []; var imgs_rows = [0]; var tot = 0; var loaded = 0; function setup(){ var imgs = settings.imgs; var row_width = 0; $(".imgwrapper").each(function(index){ var imgwrapper = $(this); var img = new image(); img.src = imgs[index]; img.onload = function(){ //determine aspect ratio of image var img_aspect = img.height/img.width; imgs_aspect.push(img_aspect); //work out rough width image var w = settings.row_height*img_aspect; row_width += w; //check if there still space on row image if(row_width >= container.width()){ imgs_rows.push(1); row_width = 0; } else{ imgs_rows[imgs_rows.length-1]++; } //set of css vars imgwrapper.css("width",w+"px"); imgwrapper.css("height",settings.row_height+"px"); imgwrapper.css("background-image","url("+imgs[index]+")"); loaded++; checkifloaded(); } }); } function checkifloaded(){ //make sure images loaded if(loaded == $(".imgwrapper").length){ setheight(); } } function setheight(){ for(var r=0;r<imgs_rows.length;r++){ if(r==0){ var y = 0; } else{ var y = 0; for(var j=0;j<r;j++){ y += imgs_rows[j] } } if(imgs_rows[r] == 0){ } else{ tot = 0; for(var i=y;i<(y+imgs_rows[r]);i++){ tot += imgs_aspect[i]; } //work out optimum height of image fit on row var h = ((container.width()-(settings.margin*(imgs_rows[r]+1)))/tot); $(".imgwrapper").each(function(index){ if(index >= y && index < (y+imgs_rows[r])){ //work out width using height var w = h*imgs_aspect[index]; $(this).css("width",w+"px"); } }); } } } setup(); }; }( jquery )); how use
var images = ["http://lorempixel.com/300/300", "http://lorempixel.com/250/250", "http://lorempixel.com/200/200", "http://lorempixel.com/210/220", "http://lorempixel.com/210/230", "http://lorempixel.com/260/230", "http://lorempixel.com/410/830", "http://lorempixel.com/300/200", "http://lorempixel.com/250/250", "http://lorempixel.com/200/200", "http://lorempixel.com/210/220", "http://lorempixel.com/210/230", "http://lorempixel.com/260/230", "http://lorempixel.com/410/830"]; $(".container").gallery({imgs:images, margin: 0, row_height: 300}); images array should contain images url wish use. container can have width desired (define in css). margin value allows have similar white border around images. since saw in code had row height, implemented, changing row_height value.
demo: http://codepen.io/motorlatitude/pen/ihgcx
this far perfect, might give idea of need do.
hope helps!
Comments
Post a Comment