Javascript : “Justified photo gallery” without cropping the images

I am a travel photographer who is frustrated in looking for photo gallery scripting without Cropping the Photos. For me, Photo is an Art!, there’s no compromise to change the image in any form including cropping. The images should be displayed as is, and keep maintain the aspect ratio in the gallery.

MaleberJustifiesPhotoGallery
I want to keep the aspect ratio like what Flickr album did it. So I try to replicate the flickr photo gallery with my own simple algorithm.

And here the algoritm :

1. Define the minimum height for the initial height, and set the height of all your photos with initial Height. This height just for the initial, and will be adjusted.
2. Put the photo one by one in the current row, the total width should not exceed the width of the screen (or width you have been define)
3. Set the width the current row to width of the screen, and adjust the height to keep maintain aspect ratio.
4. Goto point 2 until all the photos entered into the gallery.

For this example I’m using Flickr API for loading the photos from my flickr album here.

And here’s the result :

And this is the code :
[code lang=”js”]

<!DOCTYPE html>
<html>
<head>
<script src="jquery-latest.min.js" type="text/javascript"></script>

<script>
window.dhx_globalImgPath = "codebase/imgs/";
</script>
<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxslider.js"></script>
<script src="codebase/ext/dhtmlxslider_start.js"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxslider.css">

<script type="text/javascript">
/*
Maleber Gallery Photo
Version: 1
Author: Gunawan IP
Author URI: http://blog.maleber.net/

I am a travel photographer who is frustrated in looking for photo gallery scripting without Cropping the Photos.
For me, Photo is an Art!, there’s no compromise to change the image in any form including cropping.
The images should be displayed as is, and keep maintain the aspect ratio in the gallery.

I want to keep the aspect ratio like what Flickr album did it.
So I try to replicate the flickr photo gallery with my own simple algorithm.
i don’t maintain the code and it’s just an algoritm how to replicated flickr photo album, no more than thats :p
but if you still want to say hi or anything just drop me an email.

Copyright Maret 2014 Gunawan IP (gun_ip@yahoo.com)

*/

var MaleberDotNetKey ="b81c2d658e6bc9b01e4493a97d2941e2";
var MaleberDotNetUserId ="42689068@N00";
var initHeight =200;
var border =3;
var photoData;

function MaleberDotNet_ajax_get_json(MaleberDotNetUrl){
var thumbURL = new XMLHttpRequest();
thumbURL.open("GET", MaleberDotNetUrl, true);
thumbURL.onreadystatechange = function() {
if(thumbURL.readyState == 4 && thumbURL.status == 200) {
eval(thumbURL.responseText);
}
}
thumbURL.send(null);

}

function MaleberDotNetProcess() {
var url = "https://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&photoset_id=72157638397943104&api_key="+MaleberDotNetKey+"&format=json&extras=url_m&tag_mode=all&jsoncallback=MaleberDotNetProcessPhotoSet";
MaleberDotNet_ajax_get_json(url);
}

function MaleberDotNetProcessPhotoSet(data) {

photoData = data;
MaleberDotNetArrangePhoto(photoData,’galery’);

}

function MaleberDotNetArrangePhoto(data,galeryName) {

var galery = document.getElementById(galeryName);
var photos = data.photoset;
var max = photos.photo.length;
var img = [];
var divWidth = $(‘#’+galeryName).innerWidth()*0.98;
var rowContent = [];
var cRow = 0;
var cWidth = 0;
var cRowWidth = 0;
var padding ="padding :"+border+"px "+border+"px "+border+"px "+border+"px;";
galery.innerHTML = "";
galery.style.lineHeight = ‘0px’;
for(var i = 0; i < max; i++) {
img = [];
img[‘url’] = photos.photo[i].url_m;
img[‘title’] = photos.photo[i].title;
if(photos.photo[i].height_m > initHeight) {
img[‘height’] = initHeight;
img[‘width’] = Math.floor(photos.photo[i].width_m * (initHeight / photos.photo[i].height_m));
} else {
img[‘height’] = photos.photo[i].height_m;
img[‘width’] = photos.photo[i].width_m;
}
if(cRowWidth+img[‘width’]>divWidth) {
newHeight = Math.floor(initHeight * ( divWidth/cRowWidth));
cRow = rowContent.length;
$.each(rowContent, function(key, val) {
if((cRow-1)!=key) {
val[‘width’] = Math.floor(val[‘width’] * (newHeight / val[‘height’]));
} else {
val[‘width’] = divWidth-cWidth;
}
val[‘height’] = newHeight;

cWidth +=val[‘width’];
galery.innerHTML += "<img src=""+val[‘url’]+"" width=""+(val[‘width’]-(border*2))+"" height=""+(val[‘height’]-(border*2))+"" style=""+padding+"">";

});
cRowWidth = 0;
cWidth=0;
rowContent = [];

}
cRowWidth+=img[‘width’];
rowContent.push(img);

} /* i don’t display images in the last row, its your turn to continue the coding :p */

}

$(document).ready(function() {
document.getElementById(‘galery’).innerHTML = "Wait …<br>Requesting images from Flickr <br> by MaleberDotNet Lib"
MaleberDotNetProcess()
$(window).resize(function() {
MaleberDotNetArrangePhoto(photoData,’galery’);
});

})

</script>
</head>
<body>
<h1 align=center>Maleber.NET Justified Photo Gallery</h1>
<div id="sliderBoxHeight" align=center>Minimum Height (<span id="minimumHeightTxt">200</span>)</div>
<div id="sliderBoxWidth" align=center>Width (<span id="boxWidthTxt">90</span>%)</div>
<div id="sliderBoxBorder" align=center>Border (<span id="boxBorderTxt">3</span>px)</div><br>
<script>
var sliderBoxHeight = new dhtmlxSlider("sliderBoxHeight", { min: 25, max: 300, value:200, step: 1, size: 400 });
sliderBoxHeight.attachEvent("onChange",function(newValue,sliderObj){
initHeight = newValue;
document.getElementById(‘minimumHeightTxt’).innerHTML = newValue;
MaleberDotNetArrangePhoto(photoData,’galery’);
})
sliderBoxHeight.init();

var sliderBoxWidth = new dhtmlxSlider("sliderBoxWidth", { min: 25, max: 100, value:90, step: 1, size: 400 });
sliderBoxWidth.attachEvent("onChange",function(newValue,sliderObj){
document.getElementById(‘galery’).style.width=newValue+"%";
document.getElementById(‘boxWidthTxt’).innerHTML = newValue;
MaleberDotNetArrangePhoto(photoData,’galery’);
})
sliderBoxWidth.init();

var sliderBoxBorder = new dhtmlxSlider("sliderBoxBorder", { min: 0, max: 20, value:3, step: 1, size: 400 });
sliderBoxBorder.attachEvent("onChange",function(newValue,sliderObj){
border=newValue;
document.getElementById(‘boxBorderTxt’).innerHTML = newValue;

MaleberDotNetArrangePhoto(photoData,’galery’);
})
sliderBoxBorder.init();
</script>
<div id="galery" align="center" style=" margin-right: auto; margin-left: auto; width:90%; "></div>

</body>
</html>
[/code]

Download sample code here.
ps :
I don’t maintain the code and it’s just an algoritm how to replicated flickr photo album, no more than thats :p, but if you still want to say hi or anything just drop me an email.

Leave a Reply

Your email address will not be published. Required fields are marked *