jquery-collagePlus
jquery-collagePlus copied to clipboard
Window Resize set heigth new?
Is it possible to set the targetheight new after resize of the window? I try this.
// All images need to be loaded for this plugin to work so
// we end up waiting for the whole window to load in this example
$(window).load(function () {
$(document).ready(function(){
collage();
});
});
var size = "150"
// Here we apply the actual CollagePlus plugin
function checkWidth() {
var windowSize = $(window).width();
if (windowSize < 480) {
var size = "120";
}
else if (windowSize < 720) {
var size = "120";
}
else if (windowSize < 1160 ) {
var size = "120";
}
else {
var size = "150";
}
console.log(size);
};
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
$(window).resize(collage);
function collage() {
$('.Collage').removeWhitespace().collagePlus(
{
'fadeSpeed' : 'fast',
'targetHeight' : size,
'direction' : 'vertical'
}
);
};
this: setTimeout(collage, 50);should already start collage(). perhaps it doesn't work because you have collage() twice. try to remove the collage() after console.log(size). I don't know, perhaps it is necessary to pass size to the collage() function and then use the variable in the collage() function for setting the height. something like collage(size). (?)
ps: and then, also use it in the function, something like:
function collage(size) { ..
seems to work like this
function collage(size){
console.log(size);
$('.Collage').removeWhitespace().collagePlus({
'targetHeight': size,
'allowPartialLastRow' : true
});
};
// This is just for the case that the browser window is resized
var resizeTimer = null;
var windowSize = $(window).width();
$(window).bind('resize', function() {
if($(window).width() != windowSize){
if (windowSize < 1160 ) {
var size = 120;
}
else {
var size = 250;
}
//console.log(size);
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(collage(size), 250);
windowSize = $(window).width();
}
});