File: /var/www/iq22073873/data/www/bckln.ru/wp-content/themes/dt-the7/js/atoms/plugins/collagePlus.js
/*!
*
* jQuery collagePlus Plugin v0.3.2
* https://github.com/ed-lea/jquery-collagePlus
*
* Copyright 2012, Ed Lea twitter.com/ed_lea
*
* built for http://qiip.me
*
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/GPL-2.0
*
*
* Heavily modified by Dream-Theme.com
*/
;(function( $ ) {
$.fn.collagePlus = function( options ) {
var defaults = {
// the ideal height you want your images to be
'targetHeight' : 400,
// width of the area the collage will be in
'albumWidth' : this.width(),
// padding between the images
'padding' : parseFloat( this.css('padding-left') ),
// object that contains the images to collage
'images' : this.children(),
// how quickly you want images to fade in once ready can be in ms, "slow" or "fast"
'fadeSpeed' : "fast",
// how the resized block should be displayed. inline-block by default so that it doesn't break the row
'display' : "inline-block",
// which effect you want to use for revealing the images (note CSS3 browsers only),
'effect' : 'default',
// effect delays can either be applied per row to give the impression of descending appearance
// or horizontally, so more like a flock of birds changing direction
'direction' : 'vertical',
// Sometimes there is just one image on the last row and it gets blown up to a huge size to fit the
// parent div width. To stop this behaviour, set this to true
'allowPartialLastRow' : false
};
var settings = $.extend({}, defaults, options);
return this.each(function() {
/*
*
* set up vars
*
*/
// track row width by adding images, padding and css borders etc
var row = 0,
// collect elements to be re-sized in current row
elements = [],
// track the number of rows generated
rownum = 1;
settings.images.each(
function(index){
/*
*
* Cache selector
* Even if first child is not an image the whole sizing is based on images
* so where we take measurements, we take them on the images
*
*/
var $this = $(this),
$img = ($this.is("img")) ? $this : $(this).find("img").not(".blur-effect").first();
/*
*
* get the current image size. Get image size in this order
*
* 1. from <img> tag
* 2. from data set from initial calculation
* 3. after loading the image and checking it's actual size
*
*/
if ($img.attr("width") != 'undefined' && $img.attr("height") != 'undefined') {
var w = (typeof $img.data("width") != 'undefined') ? $img.data("width") : $img.attr("width"),
h = (typeof $img.data("height") != 'undefined') ? $img.data("height") : $img.attr("height");
}
else {
var w = (typeof $img.data("width") != 'undefined') ? $img.data("width") : $img.width(),
h = (typeof $img.data("height") != 'undefined') ? $img.data("height") : $img.height();
}
/*
*
* Get any current additional properties that may affect the width or height
* like css borders for example
*
*/
var imgParams = getImgProperty($img);
/*
*
* store the original size for resize events
*
*/
$img.data("width", w);
$img.data("height", h);
/*
*
* calculate the w/h based on target height
* this is our ideal size, but later we'll resize to make it fit
*
*/
var nw = Math.ceil(w/h*settings.targetHeight),
nh = Math.ceil(settings.targetHeight);
/*
*
* Keep track of which images are in our row so far
*
*/
elements.push([this, nw, nh, imgParams['w'], imgParams['h']]);
/*
*
* calculate the width of the element including extra properties
* like css borders
*
*/
row += nw + imgParams['w'] + settings.padding;
/*
*
* if the current row width is wider than the parent container
* it's time to make a row out of our images
*
*/
if( row > settings.albumWidth && elements.length != 0 ){
// call the method that calculates the final image sizes
// remove one set of padding as it's not needed for the last image in the row
resizeRow(elements, row, settings, rownum);
// reset our row
delete row;
delete elements;
row = 0;
elements = [];
rownum += 1;
}
/*
*
* if the images left are not enough to make a row
* then we'll force them to make one anyway
*
*/
if ( settings.images.length-1 == index && elements.length != 0){
resizeRow(elements, row, settings, rownum);
// reset our row
delete row;
delete elements;
row = 0;
elements = [];
rownum += 1;
}
}
);
// trigger "jgDone" event when all is ready
$(this).trigger("jgDone");
});
function resizeRow(obj, row, settings, rownum) {
/*
*
* How much bigger is this row than the available space?
* At this point we have adjusted the images height to fit our target height
* so the image size will already be different from the original.
* The resizing we're doing here is to adjust it to the album width.
*
* We also need to change the album width (basically available space) by
* the amount of padding and css borders for the images otherwise
* this will skew the result.
*
* This is because padding and borders remain at a fixed size and we only
* need to scale the images.
*
*/
var imageExtras = (settings.padding * obj.length) + (obj.length * obj[0][3]),
albumWidthAdjusted = settings.albumWidth - imageExtras,
overPercent = albumWidthAdjusted / (row - imageExtras),
// start tracking our width with know values that will make up the total width
// like borders and padding
trackWidth = imageExtras,
// guess whether this is the last row in a set by checking if the width is less
// than the parent width.
lastRow = (row < settings.albumWidth ? true : false);
/*
* Resize the images by the above % so that they'll fit in the album space
*/
for (var i = 0; i < obj.length; i++) {
var $obj = $(obj[i][0]),
fw = Math.floor(obj[i][1] * overPercent),
fh = Math.floor(obj[i][2] * overPercent),
// if the element is the last in the row,
// don't apply right hand padding (this is our flag for later)
isNotLast = !!(( i < obj.length - 1 ));
/*
* Checking if the user wants to not stretch the images of the last row to fit the
* parent element size
*/
if(settings.allowPartialLastRow === true && lastRow === true){
fw = obj[i][1];
fh = obj[i][2];
}
/*
*
* Because we use % to calculate the widths, it's possible that they are
* a few pixels out in which case we need to track this and adjust the
* last image accordingly
*
*/
trackWidth += fw;
/*
*
* here we check if the combined images are exactly the width
* of the parent. If not then we add a few pixels on to make
* up the difference.
*
* This will alter the aspect ratio of the image slightly, but
* by a noticable amount.
*
* If the user doesn't want full width last row, we check for that here
*
*/
/*
if(!isNotLast && trackWidth < settings.albumWidth){
if(settings.allowPartialLastRow === true && lastRow === true){
fw = fw;
}else{
fw = fw + (settings.albumWidth - trackWidth);
}
}
*/
/*
*
* We'll be doing a few things to the image so here we cache the image selector
*
*
*/
var $img = ( $obj.is("img") ) ? $obj : $obj.find("img").not(".blur-effect").first();
/*
*
* Set the width of the image and parent element
* if the resized element is not an image, we apply it to the child image also
*
* We need to check if it's an image as the css borders are only measured on
* images. If the parent is a div, we need make the contained image smaller
* to accommodate the css image borders.
*
*/
$img.width(fw);
if( !$obj.is("img") ){
$obj.width(fw + obj[i][3]);
}
/*
*
* Set the height of the image
* if the resized element is not an image, we apply it to the child image also
*
*/
$img.height(fh);
if( !$obj.is("img") ){
$obj.height(fh + obj[i][4]);
}
/*
*
* Apply the css extras like padding
*
*/
if (settings.allowPartialLastRow === false && lastRow === true) {
applyModifications($obj, isNotLast, "none");
}
else {
applyModifications($obj, isNotLast, settings.display);
};
/*
*
* Assign the effect to show the image
* Default effect is using jquery and not CSS3 to support more browsers
* Wait until the image is loaded to do this
*
*/
/*
$img
.load(function(target) {
return function(){
if( settings.effect == 'default'){
target.animate({opacity: '1'},{duration: settings.fadeSpeed});
} else {
if(settings.direction == 'vertical'){
var sequence = (rownum <= 10 ? rownum : 10);
} else {
var sequence = (i <= 9 ? i+1 : 10);
}
target.addClass(settings.effect);
target.addClass("effect-duration-" + sequence);
}
}
}($obj))
*/
/*
* fix for cached or loaded images
* For example if images are loaded in a "window.load" call we need to trigger
* the load call again
*/
/*
.each(function() {
if(this.complete) $(this).trigger('load');
});
*/
}
}
/*
*
* This private function applies the required css to space the image gallery
* It applies it to the parent element so if an image is wrapped in a <div> then
* the css is applied to the <div>
*
*/
function applyModifications($obj, isNotLast, settingsDisplay) {
var css = {
/*
// Applying padding to element for the grid gap effect
'margin-bottom' : settings.padding + "px",
'margin-right' : (isNotLast) ? settings.padding + "px" : "0px",
*/
// Set it to an inline-block by default so that it doesn't break the row
'display' : settingsDisplay,
// Set vertical alignment otherwise you get 4px extra padding
'vertical-align' : "bottom",
// Hide the overflow to hide the caption
'overflow' : "hidden"
};
return $obj.css(css);
}
/*
*
* This private function calculates any extras like padding, border associated
* with the image that will impact on the width calculations
*
*/
function getImgProperty(img) {
$img = $(img);
var params = new Array();
params["w"] = (parseFloat($img.css("border-left-width")) + parseFloat($img.css("border-right-width")));
params["h"] = (parseFloat($img.css("border-top-width")) + parseFloat($img.css("border-bottom-width")));
return params;
}
};
})( jQuery );
/* !- Justified Gallery Initialisation */
jQuery(document).ready(function($) {
var jgCounter = 0;
$(".jg-container").each(function() {
jgCounter++;
var $jgContainer = $(this),
$jgItemsPadding = $jgContainer.attr("data-padding"),
$jgItems = $jgContainer.find(".wf-cell");
// .iso-item elements are hidden by default, so we show them.
$jgContainer.attr("id", "jg-container-" + jgCounter + "");
$("<style type='text/css'>" + ' .content #jg-container-' + jgCounter + ' .wf-cell' + '{padding:' + $jgItemsPadding + ';}' + ' .content #jg-container-' + jgCounter + '.wf-container' + '{'+ 'margin:' + '-'+ $jgItemsPadding + ';}' + ' .content .full-width-wrap #jg-container-' + jgCounter + '.wf-container' + '{'+ 'margin-left:' + $jgItemsPadding + '; '+ 'margin-right:' + $jgItemsPadding + '; '+ 'margin-top:' + '-' + $jgItemsPadding + '; '+ 'margin-bottom:' + '-' + $jgItemsPadding + ';}' +"</style>").insertAfter($jgContainer);
$jgContainer.on("jgDone", function() {
// var layzrJGrid = new Layzr({
// // container: ".jg-container",
// selector: '[data-layzr-jgrid]',
// attr: 'data-layzr-jgrid',
// retinaAttr: 'data-layzr-jgrid-retina',
// threshold: 0,
// callback: function() {
// $(this).velocity({
// "opacity" : 1
// }, 350);
// }
// });
var layzrJGrid = new Layzr({
selector: '.jgrid-lazy-load',
attr: 'data-src',
attrSrcSet: 'data-srcset',
retinaAttr: 'data-src-retina',
threshold: 0,
before: function() {
// For fixed-size images with srcset; or have to be updated on window resize.
this.setAttribute("sizes", this.width+"px");
},
callback: function() {
this.classList.add("jgrid-layzr-loaded");
var $this = $(this);
$this.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
setTimeout(function(){
$this.parent().removeClass("layzr-bg");
}, 200)
});
}
});
});
});
$.fn.collage = function(args) {
return this.each(function() {
var $this = $(this);
var $jgContainer = $(this),
$jgItemsPadding = $jgContainer.attr("data-padding"),
$jgItems = $jgContainer.find(".wf-cell");
var jgPadding = parseFloat($jgItems.first().css('padding-left')) + parseFloat($jgItems.first().css('padding-right')),
jgTargetHeight = parseInt($jgContainer.attr("data-target-height")),
jdPartRow = true;
if ($jgContainer.attr("data-part-row") == "false") {
jdPartRow = false;
};
if($jgContainer.parent(".full-width-wrap").length){
var jgAlbumWidth = $jgContainer.parents(".full-width-wrap").width() - parseInt($jgItemsPadding)*2;
}else{
var jgAlbumWidth = $jgContainer.parent().width() + parseInt($jgItemsPadding)*2;
}
var $jgCont = {
'albumWidth' : jgAlbumWidth,
'targetHeight' : jgTargetHeight,
'padding' : jgPadding,
'allowPartialLastRow' : jdPartRow,
'fadeSpeed' : 2000,
'effect' : 'effect-1',
'direction' : 'vertical'
};
$.extend($jgCont, args);
dtGlobals.jGrid = $jgCont;
$jgContainer.collagePlus($jgCont);
$jgContainer.css({
'width': jgAlbumWidth
});
});
};
$(window).on("debouncedresize", function() {
$(".jg-container").not('.jgrid-shortcode').collage();
$(".jgrid-shortcode").each(function() {
var $this = $(this);
var $visibleItems = $this.data('visibleItems');
if ( $visibleItems ) {
$this.collage({ 'images': $visibleItems });
} else {
$this.collage();
}
});
});
});