jaysalvat / vegas Goto Github PK
View Code? Open in Web Editor NEWVegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.
Home Page: http://vegas.jaysalvat.com
Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.
Home Page: http://vegas.jaysalvat.com
Hello I am a person who lives in South Korea.
Use Google Translator to English thus can not understand.
'vegas' plug-in start page is always called first in a file that is declared.
Random images that source during the start I hope to start.
<script type="text/javascript"> //<![CDATA[ jQuery(function($){ $.vegas('slideshow', { delay:5000, random : 1, // random on = 1, random off = 0 backgrounds:[ { src:'./layouts/awake/img/slide/01.jpg', fade:1000, valign:'center', align:'center' }, { src:'./layouts/awake/img/slide/02.jpg', fade:3000 }, { src:'./layouts/awake/img/slide/03.jpg', fade:3000 }, { src:'./layouts/awake/img/slide/04.jpg', fade:3000 }, { src:'./layouts/awake/img/slide/05.jpg', fade:3000 }, { src:'./layouts/awake/img/slide/06.jpg', fade:3000 }, { src:'./layouts/awake/img/slide/07.jpg', fade:3000 } ] })('overlay', { src:'./layouts/awake/packages/vegas/overlays/06.png' }); }); //]]> </script>
we tried the vegas on many devices and browsers... looks godd..
but, now we find a browser (android browser with a 320px device), where vegas doesnt work.
the bg-images is not fixed... when we scroll down, the bg scroll up... the background color will be displayed
Im completely lost on this one. I had this working for months now and for some reason it just quit working in Chrome. Every other browser displays my images, the overlay and transitions between the 3-4 images I have setup. Some reason I cant figure out, chrome just doesnt want to run the slideshow. Any help would be great thanks!
Thanks!
I have not been able to figure it out.. but on android phones the image scale badly in portrait mode and landscape mode...
I have not seen this issue with other 3rd party browsers on the phones... is there anything you can look at?
Oh by the way here is my website with your plugin "http://philbertphotography.com"
vegas-loading and vegas-overlay divs are both being added after the opening body tag correctly but the vegas-background div is not.
Any help would be greatly appreciated.
Suggest to add to js code:
if (options.src === false) { <----
$overlay.css({'backgroundImage': 'none'}); <----
} <----
if (options.src) {
$overlay.css('backgroundImage', 'url(' + options.src + ')');
}
it gives oportunity to disable overlay when vegas is aleready runned:
$.vegas( 'overlay', {
src: false
});
btw: great job
Looks like vegas needlessly creates 1 http requests for the current html page every time it changes the image. This doesn't make sense as there's nothign new to fetch in the html page. Anyway to get rid of that? Open up fiddler and you'll see a massive # of requests.
Hello! First of all, very nice script!
I am trying to access some options for each slide through the walker. I want to be able to output some links and maybe even a title that are related to each image, it would be cool if you could define some custom options for that.
I can't figure out how to access the url paramenter, and if it's even possible without modifying the source.
// This is what is returned from query.json
[{"src":"YLXRpRtszM1e.jpg","url":"http://domain.com/path"},
{"src":"Onr7ZNOvuCVg.jpg","url":"http://domain.com/path2"},
{"src":"k0AXLVNcYMgt.jpg","url":"http://domain.com/path3"}]
$.getJSON('/query.json', function(data) {
$.vegas('slideshow', {
delay: 10000,
backgrounds: data
})('overlay', { src:'http://domain.com/assets/img/overlay_01.png' });
$('body').bind('vegaswalk',
function(e, bg, step) {
alert( 'N°' +step+ ' is now displayed' );
}
);
});
Also would love it if the documentation was available here on github, it's kinda hard to read on the website even though the site is really cool:)
Keep up the great work!
Hello Jaysalvat,
First of all I must say, you've done a great job with the slideshow. I love it.
Could you please let me know how to add Next/Previous buttons on slideshow? so that we can click and change the slides?
Thanks and much appreciated!
Hello,
I try to get next and previous buttons to work with vegas but it don't works.
Below I have posted my code. Maybe I've done something wrong ...
<script type="text/javascript">
$( document ).ready(function() {
$('a.forward').on('click', function(e) {
$.vegas('next');
e.preventDefault();
});
$('a.back').on('click', function(e) {
$.vegas('previous');
e.preventDefault();
});
$.vegas.defaults = {
background: {
src: null, // defined by Css
align: 'center',
valign: 'center',
fade: 600,
loading: true,
load: function() {
},
complete: function() {
}
},
slideshow: {
step: 1,
delay: 2000,
backgrounds: [],
preload: true
}
}
$.vegas('slideshow', {
backgrounds: [
{src: '/img/trailer/1.jpg'},
{src: '/img/trailer/2.jpg'},
{src: '/img/trailer/3.jpg'},
]
})('overlay');
});
</script>
Thanks in advance for hints to solve this !
Update: I use vegas version 1.3.4
I have noticed, that in some cases of image-sizes, vegas-plugin will not correctly resize the image at page-load. The event of the image-load plugin "imagesLoadedForVegas" is called too early - or, at least, the image-element is responding for getWidth() and getHeight() with 0.
To solve this problem, i have just implemented a kind of a wait-for-element logic inside of the initialization of the plugin.
Somewhere at line 98-100, there is the first "resize" call -> at this line, i've replaced that single line of code with the "resize" with that one:
/**
* Wrong-Initial-Dimension-Fix
* @author Remo Vetere
*
* Logical fix for initial resize operation -> if the image returns 0 on getWidth(), the resize logic
* is screwed up -> and on this line of the code, it will always return 0. So, we simply make a wait-for-element
* logic to resize imediately the image is successfully inserted into the dom -> a time value that is extremely
* different, depending on the platform and the browser-engine.
*/
var waitForElement = function() {
if ($current.width() == 0) {
setTimeout(waitForElement, 25);
} else {
resize( $current, options );
}
};
waitForElement();
I have:
$.vegas('slideshow', {
fade:4000,
backgrounds:[
{ src:'images/bg.jpg', fade:4000 },
{ src:'images/bg2.jpg', fade:25000, delay:25000 },
{ src:'images/bg3.jpg', fade:25000, delay:25000 }
]
});
Looks great on the whole but if you stare at the page for about 30 seconds, every now and then you will see a flicker of a different image at opacity:1 - for about 0.1 seconds.
My preload is true. Browser is chrome-latest.
Able to turn on and off the ablity for Next, Prev, Stop, Jump, etc to obey the delay and fade settings.
For example if an image is in a fade transition and you click on next the image just appears it should fade in
With jQuery 1.11.1 there seems to be a bug in the Vegas Slideshow. The images appear centered in the screen, but after loading they drop to top aligned. It also seems to not be clearing the styles from the "vegas-loading" div tag.
This was tested in Vegas 1.3.3 and 1.3.4
Something we found out when relying on the walk function to show copy over the slide.
When firing the next slideshow with $.vegas('next') command, the copy does not change, only the image does.
Is this a bug or incorrect use on our part?
partial snippet
,walk:function(step) {
$("div.text").hide();
$("#description"+step).fadeIn("fast");
}
First image works fine in slideshow, next ones are just displayed completely on the screen, on resize they are displayed properly but when next one comes it is again displayed with full width
I'm trying to use this vegas slider (great plugin btw) for something other than the body (e.g. a div tag). I tried doing this:
$(function() {
$('#hero').vegas('slideshow', {
delay:2000,
backgrounds:[
{ src:'images/hero/5b.jpg' },
{ src:'images/hero/6.jpg' },
],
fade:1000
})('overlay', {
src:'images/overlays/01.png'
});
});
but it dosen't work. Please help.
Is any possibility to change transition effect - like nivo-slider or other "stripe" effect?
See #2. Ended up making a pull request.
Hi,
I am trying to add pause / play button for the animation. I could pause the slide show using
$.vegas('pause');
Is there a way I can use 'Play' button to resume the animation.
Thanks
I'm building a site where a new slideshow is created on selection of a thumbnail from an index view, and I am having problems destroying and rebuilding a vegas slideshow.
I create a slideshow by calling $.vegas('slideshow', { backgrounds:myArrayOfSlides });
This works fine.
I delete a slideshow by calling $.vegas('destroy');
This appears to work fine.
I create a new slideshow by calling $.vegas('slideshow', { backgrounds:myNewArrayOfSlides });
When I do this I get the following errors:
jquery.vegas.js:276 Uncaught TypeError: Cannot call method 'get' of null
jquery.vegas.js:95Uncaught TypeError: Cannot call method 'is' of null
It looks like the problem is that $current
is undefined
.
Any clues on how to do this? Thanks!
Hi there,
Is there a way we can use the vegas slideshow not as a background, but as a regular slideshow.
Thanks!
With Google Chrome (v15 here) the background image on 1st load seems to be valign to top instead of center like in other browsers (tested FF9, IE9 & Safari 5).
Even if I add the valign property in the code, it keeps to be align to top.
Hi, great work on your plugin! I just want to ask, if there's an option for you to have limited number of thumbnails to show? For example, i just want to see 4 thumbnails and the rest will be in overflow-x: auto? Thanks.
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:
$.vegas({
src: '/images/background.jpg',
imageWidth: 1920,
imageHeight: 1200
});
// 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() {}
}
// 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!
I have an issue when using a single Vegas background: when you scroll, a white gap appears at the bottom.The problem only occurs in portrait view and doesn't occur when testing with Adobe Inspect (which uses UIWebView). You can replicate the issue by using a single image:
$.vegas({
src:'img/bkg.jpg'
});
...and by adding an element with enough content to cause scrolling of the page.
Screenshot: https://dl.dropboxusercontent.com/u/5837624/VegasWhiteGapBug.jpg
Anyone know a workaround?
When Firefox website loads, the image doesn't load right away. It goes dark in the beginning and then the picture shows up after. Plus, when the image fades, it fades to black and not to the other images that's in the slideshow.
What's the cause of this?
As title says, when this plugin is used on PC it's great and I really love it, but when I tried to use it on my Android tablet device, the backgrounds are all wrongly stretched. I tested in landscape and portrait view. Then just out of curiosity I tested the website on my android mobile and there was the same problem.
The issue can also be seen on your website.
Is there a way to load all the background images from a folder? It would allow my clients to add their own images simply by uploading to one folder.
First of all, great plugin, thank you very much for your work on it.
Now hopefully I'm not trying to make it do something that it can't do, but I'm a jQuery noob and have a small problem in implementing a method to pass an 'alt' string to each entry in the backgrounds array. I want to be able to update a tooltip with this string (containing image source, rights, etc.) using the walk callback to increment it along with the slideshow.
I've played around with various ideas but nothing seems to work.
backgrounds:[
{ src:'./images/bg/background0.jpg', alt:'lorem ipsum', fade:2000 },
I imagine there must be a way to do it but I'm really just guessing with my limited knowledge and getting nowhere, would be great to get a pointer!
Thanks in advance.
Firebug shows the following error in console view:
TypeError: options.walk is undefined
error source line #91
options.walk.apply($current.get(0), [step - 1]);
Using master as well as latest release 1.3.3
What am I doing wrong? I am new to this.. all dir are correct, double checked them with simple html
<title>my test</title><link rel="icon" type="image/png" href="./images/favicon.ico" />
<script type="text/javascript" src="jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$( function() {
$.vegas({
src:'images/background.jpg'
});
$.vegas('overlay', {
src:'overlays/13.png'
});
});
</script>
ηξηξγ
Hello!!
I have one problem with Chrome, when I try to change the size of the browser I can see how it doesn't resize the image correctly. Does anybody have the same problem ?
I have established a backgrounds slideshow on a website, with a delay of 15s between each slides.
Everything works fine, but when I fire up the next and prev functions, the delay comes back to the default 5s.
Here's my code, I'm trying to just help remove lag from my site when scrolling with a fullscreen slideshow in the background.
jQuery(function($) {
jQuery('#fullscreen').bind('inview', function (event, visible) {
if(visible == true) {
$.vegas('slideshow', {
backgrounds:[
<?php
$slide_count = count($slides);
$count = 0;
if($slides) {
foreach($slides as $slide) {
$count++;
echo '{ src:"';
echo $slide['full_url'];
if($count != $slide_count) {
echo '", fade: 1000 },';
} else {
echo '", fade: 1000 }';
}
}
} ?>
]
})('overlay', {
src: '<?php echo get_template_directory_uri(); ?>/images/vegas/overlays/<?php echo $overlay_pattern; ?>.png'
});
} else /* If Not Visible */ {
$.vegas('pause');
}
});
});
hi,
seems that vegas on android mobile devices (smartphones) has the same problem as known in iOS: a white gap at the bottom of the page (due to the disappaering url bar).
could someone please change the iOS-fix for that --> #34
into an android-version?
Thanks a lot!
Mitch
Safari 5.05 renders the background image wrong.
First of all thank you for such a great plugin. I am using it on a website preview for a client and if I get the job I am definitely going to donate you a beer :)
The plugin works great, the only trouble I found is this:
I have content on the page that need to slide out of the window without creating scrollbars, so i set the css attribute "body { overflow: hidden }".
This unfortunately makes Vegas not load the background image.
Is there a way to solve the matter?
Thank you for your help
Hi guys. Thanks for a great jQuery plugin. works like a charm.
Ok, I'm pretty new to jquery and I wanted to know if there's anyway to make this slideshow show the images randomly and not one after the other?
Maybe you already did this(my image sources are weird) but as far as i can see, if you dont preload the images, it will download the image every time in a slideshow. I dont want to have to preload because of the initial lag but i also dont want to have the client downloading the images every 30 seconds.
I´m using the plugin Jquery Vegas Slideshow in a project and I'm trying to load images directly from my database into the slideshow script.
I have it running with the following code:
<script type="text/javascript">
jQuery.vegas('slideshow', {
backgrounds:[
{ src:'images/slider/slider_01.jpg', fade:2500 },
{ src:'images/slider/slider_01.jpg', fade:2500 },
]
})('overlay', {
src:'images/slider/overlays/06.png'
});
</script>
How can I populate the background parameter using Ajax?
I've read the documentation but there is no information about any server side language.
not a huge deal at all, but line #58 of master:
$new = $background.clone();
creates a global variable due to the new
keyword being omitted... nice plugin, btw!
Hi there, thanks for an awesome product.
I just wanted to check if this is a known issue and is ignored, or it should be working. THis is how the demo page looks like in default android browser on Samsung Galaxy S3: http://evalie.no/img.png
Is there anything that can be done to fix this?
Thanks
I see that the resize of the image is not being done properly in the mentioned tablets. Either it shows a shortened height image or shortened height + shortened width image.
Does the plugin require a workaround on the tablets?
In Frefox 13 there is an issue when you click on thumbnail links it opens the actual BG image in a new window ::: I first thought it was my coding till I checked the demo and found same issue ::: I tested Firefox 13 on Ubuntu install ::: I upgraded to latest Firefox , still same issue
Hi,
First of all, thanks for this great plugin.
The plugin works almost perfectly. The image load perfectly but in favicon the loading remains as the message "watingin for..." in the bottom of the browser..
The problem appears only at the first load - before the background image is cached - and only in Firefox (on Windows).
I tried different configurations of the plugin, but the problem remains.
Hello,
I kinda liked the possibility that you can customize fade time for each slideshow, but didn't like that I couldn't put a global one.
So instead of...
$.vegas('slideshow', {
backgrounds:[
{ src:'/img/bg1.jpg', fade:1000 },
{ src:'/img/bg2.jpg', fade:1000 },
{ src:'/img/bg3.jpg', fade:1000 }
]
})
It becomes
$.vegas('slideshow', {
globalfade: 1000,
backgrounds:[
{ src:'/img/bg1.jpg'},
{ src:'/img/bg2.jpg'},
{ src:'/img/bg3.jpg'}
]
})
To do so, I added at line 209
if ( typeof(settings.fade) == "undefined") {
settings.fade = options.globalfade;
}
and added the default settings at line 170.
var options = {
step: step,
globalfade: 1000,
delay: delay,
preload: false,
backgrounds: backgrounds,
walk: function() {}
};
Cheers.
How can I add overlay properly.When I add like this, it doesn't show overlay.
$.vegas('slideshow', {
backgrounds:[
{ src:'jaysalvat-vegas-850c373/images/pic5_big.jpg', fade:1000 },
{ src:'jaysalvat-vegas-850c373/images/pic6_big.jpg', fade:1000 },
{ src:'jaysalvat-vegas-850c373/images/pic7_big.jpg', fade:1000 }
]
})('overlay', {
src:'jaysalvat-vegas-850c373/overlays/13.png'
});
If I put like this ,overlay working but this is a just one picture.
$( function() {
$.vegas({
src:'/images/background.jpg'
});
$.vegas('overlay', {
src:'/vegas/overlays/13.png'
});
});
Please help.
Hello and thank's for your work :)
Is it possible to don't strech the image ?
I juste want the slideshown feature but don't want to strech the images.
Is it possible ?
Thank's
Pierre-Louis
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.