I can’t get jQuery Vegas plugin to work

Asked

Viewed 405 times

1

I’m trying to try a plugin jQuery called vegas to make a background fullscreen but not working, I did according to what is on the site, imported all libraries, the jQuery and the archives .css of Vegas. My code is like this:

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="description" content="">

    <title>Untitled</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="js/vegas/vegas.css">
    <link rel="stylesheet" href="css/reset.css">

    <script src="js/vegas/vegas.js"></script>       
    <script src="js/jquery.min.js"></script>

</head>
<body>

    <script type="text/javascript">

        $('body').vegas({
            slides: [
            { src: 'img/slide1.jpg' },
            { src: 'img/slide2.jpg' },
            { src: 'img/slide3.jpg' },
            { src: 'img/slide4.jpg' },
            { src: 'img/slide5.jpg' }
            ]
            });

        </script>

    </body>
    </html>

CSS code of body:

body{

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    color: #292929;
    background: #000;
}

And the image location is correct and linked in the plugin function.

Local da imagem está correto

jquery plugin

  • Import jQuery before plugin, not after.

  • Hasn’t shown up yet. :(

1 answer

2


Use $.ready or $(function() {...}), something like:

<script type="text/javascript">
$(function() {
    $('body').vegas({
        slides: [
        { src: 'img/slide1.jpg' },
        { src: 'img/slide2.jpg' },
        { src: 'img/slide3.jpg' },
        { src: 'img/slide4.jpg' },
        { src: 'img/slide5.jpg' }
        ]
    });
});
</script>

Working example:

$(function() {
    $('body').vegas({
        slides: [
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-ja.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-mr.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-jb.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-jg.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-eg.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-bw.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-rd.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-pb.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-rl.jpg' },
                { src: 'http://vegas.jaysalvat.com/demo/img/poster-dh.jpg' }
        ]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.js"></script>
<link href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css" rel="stylesheet"/>

  • The problem is in the images, but what is wrong? Is the problem in the resolution of the images? Their size is: 1920x1200.

  • I found the @Guilherme Nascimento problem, I tried to do with local computer images and it didn’t work, so I got links of images of size 1920x1200 from the Internet and it worked normal. Does the plugin only accept files hosted on the Internet?

  • Guilherme, I’m using localhost, apache, only I was wrong to specify the location of the image by placing the local directory and not the localhost as if it were an online server. Ex.: I was putting like this: src: 'img/slide5.jpg' When the correct would be: src: 'http://localhost/img/slide5.jpg' Correct?

  • Yes William, I used the script specifying web images in the 1920x1200 resolution and it worked perfectly. Thank you very much, I have already chosen your answer as the correct one.

  • 1

    Thank you my friend, there should be more people like you. Success for you too.

Browser other questions tagged jquery plugin

You are not signed in. Login or sign up in order to post.