added images gallery
This commit is contained in:
186
cao_blogr/static/js/jquery-tjgallery.js
vendored
Normal file
186
cao_blogr/static/js/jquery-tjgallery.js
vendored
Normal file
@@ -0,0 +1,186 @@
|
||||
/*!
|
||||
* 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 = $('<div class="tjGalleryItem">').insertBefore($this).append($this);
|
||||
} else {
|
||||
$this = $('<div class="tjGalleryItem">').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);
|
||||
7
cao_blogr/static/js/jquery-tjgallery.min.js
vendored
Normal file
7
cao_blogr/static/js/jquery-tjgallery.min.js
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* tjGallery 1.1
|
||||
* http://tj-s.ru
|
||||
* @copyright Tod, tod@tj-s.ru
|
||||
* @license MIT License
|
||||
*/
|
||||
!function(o){var e={init:function(t){var l=o.extend({selector:"img",row_min_height:180,margin:5},t);return this.each(function(){var t=o(this);return t.data("tjGallery")||t.data("tjGallery",{target:t,tjGallery:l}),o(window).bind("resize.tjGallery",function(){e.clear.apply(t),i(t)}),i(t);function i(t){return t.each(function(){var t=o(this),r=t.width(),a=[],h={items:[],width:0,height:0};t.find(l.selector).each(function(){var t=o(this),i=t;if(t="IMG"!=i[0].nodeName.toUpperCase()?(i=i.find("img"),o('<div class="tjGalleryItem">').insertBefore(t).append(t)):o('<div class="tjGalleryItem">').insertBefore(i).append(i),i.length){t.css({width:"auto",float:"left",position:"relative"});var e={pic:i,container:t,original_height:i.attr("height")||i.height(),original_width:i.attr("width")||i.width()};e.aspect=e.original_width/e.original_height,e.scale=l.row_min_height/e.original_height,e.width=e.original_width*e.scale,e.height=e.original_height*e.scale;var n=s(h.items,e);r<n&&(a.push(h),h={items:[],width:0,height:0}),h.items.push(e)}}),1==h.items.length&&1<a[a.length-1].items.length?a[a.length-1].items.push(h.items[0]):(a.push(h),h.last=!0),o.each(a,function(t,n){n.scale=(r-(n.items.length-1)*l.margin)/s(n.items);var a=0;o.each(n.items,function(t,i){n.scale&&(i.width=Math.floor(i.width*n.scale),i.height=Math.floor(i.height*n.scale)),i.index=a;var e=i.pic;i.container;a++,e.css({height:parseInt(i.height)+"px",width:parseInt(i.width)+"px"}),i.container.css({height:parseInt(i.height)+"px",width:parseInt(i.width)+"px",marginTop:l.margin+"px"}),0<t?i.container.css({marginLeft:l.margin+"px"}):i.container.css({clear:"left"})})})})}function s(t,i){var e=0;return t.length&&o.each(t,function(t,i){e+=i.width}),i&&(e+=i.width),e}})},clear:function(){conteiner=this,data=conteiner.data("tjGallery"),conteiner.each(function(){o(this).find(data.tjGallery.selector).each(function(){o(this).is("img")||o(this).find("img").css({width:"auto",height:"auto"}),o(this).removeAttr("style"),o(this).appendTo(conteiner)}),o(this).find("div:empty").remove()})},destroy:function(){e.clear.apply(this),o(window).unbind(".tjGallery")}};o.fn.tjGallery=function(t){if(e[t])return e[t].apply(this,Array.prototype.slice.call(arguments,1));if("object"==typeof t||!t){return e.init.apply(this,arguments)}o.error("Method "+t+" does not exist for jQuery.tjGallery")}}(jQuery);
|
||||
@@ -179,4 +179,49 @@ textarea {
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #df4937;
|
||||
}
|
||||
}
|
||||
|
||||
/* TJ Gallery */
|
||||
.pictures{
|
||||
font-size: 0px;
|
||||
}
|
||||
.pictures .item{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
}
|
||||
.pictures .item img{
|
||||
position:relative;
|
||||
z-index: 11;
|
||||
}
|
||||
.pictures .item .item_description{
|
||||
position:absolute;
|
||||
z-index: 10;
|
||||
left: -15px;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
bottom: -60px;
|
||||
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
|
||||
|
||||
background:#962d21;
|
||||
padding: 15px;
|
||||
|
||||
display:none;
|
||||
}
|
||||
.pictures .item .item_description span{
|
||||
color:#ffffff;
|
||||
font-size: 13px;
|
||||
display:block;
|
||||
position:absolute;
|
||||
bottom: 15px;
|
||||
height: 30px;
|
||||
}
|
||||
.pictures .item:hover{
|
||||
z-index: 100;
|
||||
}
|
||||
.pictures .tjGalleryItem .item:hover .item_description{
|
||||
display:block;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user