jaysalvat / vegas Goto Github PK

$(function() {
    $('body').vegas({
        slides: [
            { src: 'img1.jpg' },
            { src: 'img2.jpg' },
            { src: 'img3.jpg' }
        ]
    });
});

Looking for Vegas v1?

The Vegas v1 website is still available but this version is not maintained anymore.

Contributing

Please don't edit files in the dist directory as they are generated via Gulp. You'll find source code in the src directory!

Install dependencies.

npm install

Run watch task before editing code.

gulp watch

Regarding code style like indentation and whitespace, follow the conventions you see used in the source already.

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

vegas's People

Contributors

Stargazers

Watchers

Forkers

simshaun webtecnia jnoliver2 hussienliban magnet0 mechanism elsewares bahadirvaroglu eamonnmag comensee iapproach sleepyboy mrflix olled migueloliveira notzen jakejive keithdevon ranjithtenz rvetere bluinfaccia bfekusis stefanofontanelli lambder alvarlaigna lens-art dineshkummarc gijs directormx basz sangam12345 axpart spencern ubiratanbraga cancanx xavortm contextworks yahame andreygrin dalloz telemahos artemaminov wiseguydigital wordpressdev wpinvent iplaydu marceloag cyrke bennyhan sareesh daverev maqroll aaronstevensonlee zaay orakle yuzin81 martajohnsson lickasha geokir tetsalves dindows-systems bennettstone robloach msadig rmenner dct24 mrjacket spowers777 a973c amclarren ayhanaydmr mbutler ultrasimplified pcastanheira emiliobravo kimiiic herent syydee joham ramper innovativedmm klebergraciasoares rovetz bokor12 armakedon victor-arias goyadidi vrozkovec vmayoral dznavitski januarfonti intrigue ahmedmashrah mwasyou seraphmx maitiano winneras pol02oma rakeshr dougshults

vegas's Issues

Resizes problem mobile

I'm having problems when i set the Vegas Slideshow. If i zoom in the page a lot, the image only resizes in the next iteration, and when it resizes, when i zoom out the page, the image stays in small size. It only back to normal in the next iteration. Any help?

Images sometimes squeeze - new options for image width and height

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!

Dont strech image

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

Conflict with jQuery 1.11.1

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

Random Slideshow

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?

Wrong image resizing on Android tablets and mobiles

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.

Wrong Resize at PageLoad

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

Image scaling problems on andriod moblie phone default browsers

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"

More options

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!

Vegas jumping back to first slide after being paused and called.. am I doing something wrong?

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

Single image: white gap at bottom in Safari iOS

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?

starter problem

What am I doing wrong? I am new to this.. all dir are correct, double checked them with simple html

<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>

ηξηξγ

doesnt work on small android browser.

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

Slideshow delay lost

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.

Add feature

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

Thumbnails

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.

Images not scaling in default android borwser

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

Fading causes some flicker of un-faded images

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.

Webkit calculating dimensions improperly

See #2. Ended up making a pull request.

TypeError: options.walk is undefined in FireBug

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

Firefox not rending the script correctly

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?

Error destroying/rebuilding a slideshow

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!

Preload reloads everytime

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.

safari 5.05

Safari 5.05 renders the background image wrong.

Adding random starting image.

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.

Problem in Ipad 2/motorola xoom

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?

Can we use the vegas slideshow not as a background

Hi there,

Is there a way we can use the vegas slideshow not as a background, but as a regular slideshow.

Thanks!

How to use vegas for something other than body???

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.

Implicit global variable

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!

Fade effects for all transitions

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

global fade options for slideshow

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.

different transition effect?

Is any possibility to change transition effect - like nivo-slider or other "stripe" effect?

Thumb links in Firefox 13+ broke

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

How to add Next/Previous buttons on slideshow?

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!

Help with overlay

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.

Loading in the favicon - Firefox 18.0.2

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.

Problems with "overflow:hidden"

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

Too many http requests

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.

Slideshow not working in Chrome.

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!

www.biancoglass.com/blog

Thanks!

'alt' attribute on background images

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.

white gap at bottom on android devices

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

Images not stretched to fill in chrome

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

Chrome valign problem

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.

Load all images within a folder

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.

$.vegas('next') not working

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

$.vegas('next') does not trigger walk function

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

Resize image

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 ?

Loading images from database

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.

Pause / Play Button

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

vegas-background div not appending to body

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.

jaysalvat / vegas Goto Github PK

vegas's Introduction

Vegas – Backgrounds and Slideshows

Install

Get started

Official website

Sin City demo

Documentation