jaysalvat/vegas — Issue #8: Images sometimes squeeze - new options for image width and height
Author: notarocketscientist
Created: 2011-10-14 12:54:53+00:00
State: open

Salut Jay,

nice plugin - love it! But sometimes, ist messes with Firefox 3.6 (on WinXP SP3 test machine) resulting in an awful squeeze of the background-image.
I can not reproduce it reliably - it randomly occurs when I browse my website and hitting F5 several times. But also in "normal" use of my website, the problem emerges sometimes.
Maybe other (older?) browsers are affected, too...by the way, I'm using jQuery 1.6.4.

When I console.log('iw: ' + iw + 'ih: ' + ih); in the resize()-function the value sometimes is "1" (for both) resulting in the squeeze. When I then hit F5 again, the problem is corrected.
My assumption is, that $img.width(); and/or &img.height(); sometimes fail.

So I extended your plugin with two new options: "imageWidth" and "imageHeight". This manually sets the image dimensions, and the problem is gone for me.
I would be happy, if you include this in the official vegas-plugin.

I'm not a git user, so here is what I've done:

1. Set up vegas with the new options:

$.vegas({
src: '/images/background.jpg',
imageWidth: 1920,
imageHeight: 1200
});

2. Extend the plugin's init-function:

// Init plugin
init : function( settings ) {

var options = {
src: getBackground(),
align: 'center',
valign: 'center',
imageWidth: null,
imageHeight: null,
fade: 0,
loading: true,
load: function() {},
complete: function() {}
}
$.extend( options, $.vegas.defaults.background, settings );

3. Extend the plugin's resize-function

// Resize the background
function resize( $img, settings ) {
var options = {
align: 'center',
valign: 'center',
imageWidth: null,
imageHeight: null
}
$.extend( options, settings );

// this condition checks if an image width and height is manually set
if(options.imageWidth == null && options.imageHeight == null) {
var iw = $img.width(),
ih = $img.height();
// console.log('iw and ih is calculated via width(); and height(); value iw: ' + iw + ', value ih: ' + ih);
} else {
var iw = options.imageWidth,
ih = options.imageHeight;
// console.log('iw and ih obtain values via options imageWidth and imageHeight; value iw: ' + iw + ', value ih: ' + ih);
}

// declaration of iw and ih removed from this block, of course
var ww = $( window ).width(),
wh = $( window ).height(),
rw = wh / ww,
ri = ih / iw,
newWidth, newHeight,
newLeft, newTop,
properties;

Please let me know your feedback.
Best regards!