Comments (1)
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:
- Set up vegas with the new options:
$.vegas({
src: '/images/background.jpg',
imageWidth: 1920,
imageHeight: 1200
});
- 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 );
- 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
from vegas.
Related Issues (20)
- how to play video from youtube HOT 1
- Slideshow picture and movies HOT 1
- Strange Glitch with Blur transition HOT 1
- Blur transition blinks in Chrome HOT 2
- Vegas asynchronous load HOT 2
- Optimize images for faster loading HOT 2
- Effect kenburns reverse HOT 3
- Using option to use playsinline for videos? HOT 1
- Using sprite image HOT 1
- Vegas & m4q
- Video Error: Uncaught (in promise) DOMException on vegas.min.js:10
- jQuery inside wrapper
- Three Video Format (mp4,webm,ogv)? HOT 1
- Overlay issue - Overlay does not show HOT 2
- why cannot my image fill my div ?
- Adding a custom overlay adds a gray background at the bottom of the slider
- None of the images are showing HOT 1
- Incorrect padding in Firefox HOT 1
- :: THE AUDIO OF THE VIDEOS DOES NOT SOUND :: HOT 1
- Image transition issue with cover:false HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vegas.