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?

First off, great work in this plugin.

I've found that there is a bug with the plugin in Webkit-based browsers such as Chrome and Safari.

When resize() is called, $img.width() and $img.height() return 0, resulting in improper dimensions calculations. It does this because Webkit sets the width and height to 0 and only after the image has been loaded does it calculate the correct values. What this means is the .load() event can be (and for me, usually is) fired before Webkit reports the correct dimensions - essentially a race condition.

Also, the load event may not be fired for cached images in some browsers (as described in the API).

So, here's what I've done to fix both issues:

1. Integrated the imagesLoaded plugin by @paulirish. This corrects the load event for cached images issue.
2. Set the image's width and height attributes using the dom element's width & height properties, which do contain the correct values. This fixes the Webkit problem because $img.width() and $img.height() will now return the correct values.

This could be cleaner, but here is some code that now wraps the $.vegas plugin into a jQuery plugin.

It can now be used either in the current way (targeting the body element) or by specifying a target element e.g.:

// Single image
$("#myele").vegas({
    src:'img/background-1.jpg'
})

// Overlay
$("#myele").vegas('overlay', {
    src:'img/overlays/13.png'
});

// Slideshow
$('#myele').vegas('slideshow', {
    backgrounds:[
    { src:'img/background-1.jpg', fade:1000 },
    { src:'img/background-2.jpg', fade:1000 },
    { src:'img/background-3.jpg', fade:1000 }
]
}).vegas('overlay', {
    src:'img/overlays/11.png'
});

// Extra methods
$('#myele').vegas('pause');

Not had much time to test, but all seems to be working!

Hi jaysalvat,

First off thank you for such a lightweight, versatile plugin. I've had great experiences so far, though I am currently stumped.

Presently the slideshow works great in Chrome/IE, though I am unable to get the images to display when testing the website in Firefox. The website in particular is BaseballForever.

Thank you for the help!

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.

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

Hi,

I have a conflict between vegas and fancybox : http://fancyapps.com/fancybox/

$(...).vegas is not a function

I didn't know which one kill the other one :(

Thanks

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?

This is my first time contributing to a project, so forgive me if I'm going about this incorrectly. I liked your plugin, but I really only needed to run the slideshow on my header. I made some changes to the code to allow it to use a selector other than 'body', although body remains the default.

Hello, im using your plugin but i have a problem, i call my images from the database and pass them to the plugin but it doesnt read them, however if i copy what is inside the array of images into the plugin it works. Here is my code :

JS $.get('ajax/slides.php', function(data) { $('#slideMain').vegas({ slides: [ data ] }); }); //////////////////////////////////////////// AJAX file $slide = new slideManager(); $slide ->showSlideController();

echo $slide; ////////////////////////////////////////// PHP public function showSlideController(){ $answer = slideModel::showSlideModel("slides"); foreach($answer as $row => $item){ echo '{ src: "'.$item['path'].'" },'; // Even if i print it like this doesnt work } } //////////////////////////////////////// Again i got all my images but they are not displayed in the plugin,

Any help will be more than welcome, thanks in advance =D

Hi, today I met the following problem: there were no images, white background only for Chrome Windows remote server. Not every time, but in about 50% of reloading cases. Works for localhost, Chrome Mac and Firefox (Mac, Win). In fact the image was loaded but the opacity was 0. The plugin was initiated, play process started, but no 'walk' triggered. After debugging vegas.js I found that the problem was in str. 509: img.onload = go;. I googled about weird behavior of onload method, and the decision to replace this string with: go(); solved my problem. Maybe there is a more elegant way to fix it.

Hello jaysalvat,

Firstly thanks so much for such an amazing plugin.

Regarding the issue, I'm working on a project and I have to add a custom background overlay. Nothing fancy. just a transparent black background color. Upon adding the overlay, there's a background which has gray color under the first image slider. I need to change it to white or any other color. Is this a bug or something? Can I change it to white or something else?

Here's the code:

.vegas-overlay{ background-color: black; opacity: 0.5; z-index: 0; }

$(".content-left").vegas({ timer: false, overlay: true, transition: 'slideDown', slides: [ { src: "./images/bg1.jpg" }, { src: "./images/bg2.jpg" }, { src: "./images/bg3.jpg" }, { src: "./images/bg4.jpg" }, { src: "./images/bg5.jpg" } ] });

Here's a photo. The upper part is the first photo in the slider. Second part is the "gray issue". And the third one is the actual background of the body.

Hi,

I am doing some experimenting with the vegas slideshow and I made it work, however, I seem to have an issue with the overlay that I don't understand. Please see http://vegas.skansens.net and

So, with Firefox inspection mode; if I deselect the background image under inline element as seen in the pictures, the overlay will start working. I am not able to see what I am doing wrong in the javascript code. I was hoping you could point me in the right direction so that I can get the overlay working.. I am new to this kind of programming so please forgive my ignorance, I'm just trying to learn :)

Code:

HTML:

JS:

$('body').vegas({
overlay: "img/overlays/03.png",
transition: 'fade',
transitionDuration: 4000,
delay: 10000,
animation: 'random',
animationDuration: 20000,
slides: [
	{ src: 'img/01.jpg' },
	{ src: 'img/02.jpg' },
	{ src: 'img/03.jpg' },
	{ src: 'img/04.jpg' },
],

});

Hello, i have problem with runing jquery after init of slideshow on div, check the example. My idea is to fadeout message that is shown inside wrapper of vegas js, no it is stuck...

<div class="slideshow"><div class="flashmsg">my message to user</div></div>

I have tried this idea

init: function () { $(".flashmsg").delay(3500).fadeOut(600);}

Can you help me ?

Sometimes video wont start to play, but sometimes its all right. When i open the console this happen: Uncaught (in promise) DOMException _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 load (async) _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 load (async) _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 load (async) _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10 load (async) _goto @ vegas.min.js:10 next @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) _slideShow @ vegas.min.js:10 (anonymous) @ vegas.min.js:10 setTimeout (async) w @ vegas.min.js:10

This is my code: $( function() { $('body').vegas({ transition: ['slideRight', 'slideLeft', 'slideUp', 'slideDown', 'zoomIn', 'zoomOut', 'swirlLeft', 'swirlRight'], timer: true, loop: false, slides: [{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654020_298481139.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654073_1713319570.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":30000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553832071_1696403568.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654122_1284377839.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654156_279890506.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":30000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553831962_1670985084.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654660_2039086959.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654685_1939920630.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":10000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553770450_571042691.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654710_110548295.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654741_1196226441.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":5000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553747965_14642303.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654759_269460887.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553654887_1080641584.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":30000,"video":{"src":"http://localhost/lion_bouquet/public/videos/samplevideo_1920x1080.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553655002_74881893.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553655027_807877775.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":20000,"video":{"src":"http://localhost/lion_bouquet/public/videos/samplevideo_1280x720.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553655039_1899409964.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553660257_133198603.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":30000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553832071_1696403568.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553660346_1760100406.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553661510_1558088591.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":30000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553831962_1670985084.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553668494_1270231587.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553749728_1197880964.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":10000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553770450_571042691.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553756729_642019083.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1553757353_1007022978.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/rip/rip_1549876254_589666486.png","delay":5000,"video":{"src":"http://localhost/lion_bouquet/public/videos/video_1553747965_14642303.mp4","loop":false,"mute":false}},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1554093647_1044455570.jpg","delay":1000},{"src":"http://localhost/lion_bouquet/public/ucapan/ucapan_1554104728_190474157.jpg","delay":1000}], end: function() { location.reload(); }, walk: function (index, slideSettings) { if (slideSettings.video) { console.log('exist') } else { console.log('not exist'); } } }); } );

M4q is a small library from DOM manipulation and good Jquery alternative for modern browser.

Your can visit here : https://github.com/olton/m4q

I'm testing your plugin and with the help of developper, it's working now :)

Could you add support for it ? The only thing to do is to add it in final decalartion : (window.jQuery || window.Zepto || window.m4q)

Thanx for your great job.