Images sometimes squeeze - new options for image width and height about vegas

[jaysalvat]

Hi there,

Thanks a lot for your contribution.

I have seen this bug once but never again.
I have to look at it further. And maybe use your workaround.

Unfortunately, I have no time to work on any of my open source
projects for months. Insane schedule here.

2011/10/14 notarocketscientist
[email protected]:

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
});

1. 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 );

1. 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!

Reply to this email directly or view it on GitHub:
#8

Jay Salvat
Website:
http://www.jaysalvat.com
New project:
http://buzz.jaysalvat.com