/*!
* tjGallery 1.1
* http://tj-s.ru
*
* description JQuery Plugin create responsive gallery grid
* Options: {
* selector :'img', // jquery selector for ersizing and positions element
* row_min_height : 180, // minimal height of grid row
* margin : 5 // border betwin elements
* }
*
* @copyright Tod, tod@tj-s.ru
* @license MIT License
*/
(function($) {
var methods = {
init : function(options) {
var $settings = $.extend({
selector :'img',
row_min_height : 180,
margin : 5
}, options);
return this.each(function() {
var $this = $(this),
data = $this.data('tjGallery');
if ( ! data ) {
$this.data('tjGallery', {
target : $this,
tjGallery : $settings,
});
}
$(window).bind('resize.tjGallery', responding);
return build($this);
function responding(){
methods.clear.apply($this);
build($this);
}
function build(items){
return items.each(function() {
var $container = $(this);
var max_bucket_width = $container.width();
var buckets = [],
last_bucket = {
items: [],
width: 0,
height: 0
};
$container.find($settings.selector).each(function() {
var $this = $(this);
var $pic = $this;
if ($pic[0].nodeName.toUpperCase() != 'IMG') {
$pic = $pic.find('img');
$this = $('
').insertBefore($this).append($this);
} else {
$this = $('
').insertBefore($pic).append($pic);
}
if (!$pic.length) return;
$this.css({width: 'auto', float: 'left', position: 'relative'});
var item = {
pic: $pic,
container: $this,
original_height: $pic.attr('height') || $pic.height(),
original_width: $pic.attr('width') || $pic.width()
};
item.aspect = item.original_width / item.original_height;
item.scale = $settings.row_min_height / item.original_height;
item.width = item.original_width * item.scale;
item.height = item.original_height * item.scale;
var new_bucket_width = getWidthForBucket(last_bucket.items, item);
if (new_bucket_width > max_bucket_width) {
buckets.push(last_bucket);
last_bucket = {
items: [],
width: 0,
height: 0
};
}
last_bucket.items.push(item);
});
if (last_bucket.items.length == 1 && buckets[buckets.length-1].items.length > 1){
buckets[buckets.length-1].items.push(last_bucket.items[0]);
}else{
buckets.push(last_bucket);
last_bucket.last = true;
}
$.each(buckets, function(idx, bucket) {
bucket.scale = (max_bucket_width - (bucket.items.length - 1) * $settings.margin) / getWidthForBucket(bucket.items);
var $last_item;
var n = 0;
$.each(bucket.items, function(idx2, item) {
if (bucket.scale) {
item.width = Math.floor(item.width * bucket.scale);
item.height = Math.floor(item.height * bucket.scale);
}
item.index = n;
var pic = item.pic,
container = item.container;
$last_item = item;
n++;
pic.css({
height: parseInt(item.height)+"px",
width: parseInt(item.width)+"px"
});
item.container.css({
height: parseInt(item.height)+"px",
width: parseInt(item.width)+"px",
marginTop: $settings.margin + 'px'
});
if (idx2 > 0) {
item.container.css({
marginLeft: $settings.margin + 'px'
});
} else {
item.container.css({
clear: 'left'
});
}
});
});
});
}
function getWidthForBucket(bucket, extra){
var width = 0;
if (bucket.length) {
$.each(bucket, function(idx, item) {
width += item.width;
});
}
if (extra) {
width += extra.width;
}
return width;
}
})
},
clear: function(){
conteiner = this;
data = conteiner.data('tjGallery');
conteiner.each(function() {
$(this).find(data.tjGallery.selector).each(function() {
if (!$(this).is('img'))
$(this).find('img').css({'width': 'auto', 'height': 'auto'});
$(this).removeAttr('style');
$(this).appendTo(conteiner);
})
$(this).find('div:empty').remove();
})
},
destroy : function() {
methods.clear.apply(this);
$(window).unbind('.tjGallery');
}
};
$.fn.tjGallery = function( method ) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
var that = this;
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist for jQuery.tjGallery' );
}
};
})(jQuery);