Git Product home page Git Product logo

Comments (7)

jaysalvat avatar jaysalvat commented on July 29, 2024

Hello.

Not yet.
Just shuffle the background array before passing it to vegas.

from vegas.

alitabatabaei avatar alitabatabaei commented on July 29, 2024

Thank you @jaysalvat. As I said I'm pretty new to jQuery. Can you tell how can I do that, or give a link to a tutorial or something so I can learn how to shuffle the array?

Thanks

from vegas.

jaysalvat avatar jaysalvat commented on July 29, 2024

Hello.

http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript

from vegas.

alitabatabaei avatar alitabatabaei commented on July 29, 2024

Thanks a lot @jaysalvat I've done it as you suggested and it works great :)

from vegas.

alitabatabaei avatar alitabatabaei commented on July 29, 2024

I'll leave the code here if anyone else needs it;

// Define the shuffle function
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};

// Define backgrounds array
var bgimages = [
{ src:'1.jpg', fade:1000 },
{ src:'2.jpg', fade:1000 },
{ src:'3.jpg', fade:1000 },
{ src:'4.jpg', fade:1000 }]

// Suffle the array
randombgs = shuffle(bgimages);

// Pass shuffled array to Vegas
$.vegas('slideshow', {
delay:5000,
backgrounds: randombgs
}) ('overlay');

from vegas.

keisersuze avatar keisersuze commented on July 29, 2024

Hi every body,

I tried integrate the "randombgs function" (script bellow). It work but my buttons doesn't work. When i click it, it is a bad image (random).

Can you fix it my script please?

Thank you very much!

source: http://vegas.jaysalvat.com/demo/

$(function() {
var slideshowRunning = false,
    backgroundList = [];

// Build the background list with href of links
$('#vegas a').each(function() {
    backgroundList.push({
        src: $(this).attr('href'),
        //valign: $(this).data('valign'),
        //align: $(this).data('align'),
        fade: 2000,
    });
});

// Define the shuffle function
function shuffle(o) { //v1.0
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

randombgs = shuffle(backgroundList);

// Pass shuffled array to Vegas
$.vegas('slideshow',  {
    delay: 5000,
    backgrounds: randombgs
})

// A short demo
$('#vegas a').click(function() {

    // If the SlideShow link is clicked
    if ($(this).is('#slideshow')) {

        // Start the SlideShow
        if (slideshowRunning == false) {
            slideshowRunning = true;

            $('#pause')
                .show()
                .css('opacity', 0.5)
                .html('PAUSE');

            $.vegas('slideshow', {
                delay: 5000,
                backgrounds: randombgs
            })

            // Pause the SlideShow
        } else {
            slideshowRunning = false;

            $('#pause')
                .show()
                .css('opacity', 0.5)
                .html('PLAY');

            $.vegas('pause');
        }

        // If a standard Thumbnail is clicked
    } else {
        slideshowRunning = false;

        $('#pause').hide();
        $('#thumbnail').attr('src', '../img/slideshow.gif');

        var idx = $(this).parent('li').index();
        $.vegas('stop')(backgroundList[idx]);
    }

    return false;
});

// Apply a border to the right thumbnail when a background is loaded
$('body').bind('vegasload', function(e, bg) {
    var src = $(bg).attr('src').replace('background', 'thumbnail');

    $('#vegas img')
        .removeClass('active');
        //.css('border', '1px solid #FFF');
    $('img[data-src="' + src + '"]')
        .addClass('active');
        //.css('border', '1px solid #CF0');
});

// Display the right thumbnail instead of the slideshow animated gif when the slideshow is running
$('body').bind('vegaswalk', function(e, bg) {
    var src = $(bg).attr('data-src').replace('background', 'thumbnail');

    $('#thumbnail').attr('src', src);
});

});

from vegas.

 avatar commented on July 29, 2024

For the randomise solution @alitabatabaei put in, please change 'backgrounds' to 'slides' as I think the newer version now uses 'slides' in the options.

Mine looks like this:

    // The Shuffle Function
    function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
    };

    // Define backgrounds array
    var bgimages = [
    { src: "/assets/img/slide/slide01.jpg" },
    { src: "/assets/img/slide/slide02.jpg" },
    { src: "/assets/img/slide/slide03.jpg" },
    { src: "/assets/img/slide/slide04.jpg" },
    { src: "/assets/img/slide/slide05.jpg" },
    { src: "/assets/img/slide/slide06.jpg" },
    { src: "/assets/img/slide/slide07.jpg" },
    { src: "/assets/img/slide/slide08.jpg" },
    { src: "/assets/img/slide/slide09.jpg" },
    { src: "/assets/img/slide/slide10.jpg" },
    { src: "/assets/img/slide/slide11.jpg" },
    { src: "/assets/img/slide/slide12.jpg" },
    { src: "/assets/img/slide/slide13.jpg" },
    { src: "/assets/img/slide/slide14.jpg" },
    { src: "/assets/img/slide/slide15.jpg" },
    { src: "/assets/img/slide/slide16.jpg" },
    { src: "/assets/img/slide/slide17.jpg" },
    { src: "/assets/img/slide/slide18.jpg" },
    { src: "/assets/img/slide/slide19.jpg" },
    { src: "/assets/img/slide/slide20.jpg" },
    { src: "/assets/img/slide/slide21.jpg" },
    { src: "/assets/img/slide/slide22.jpg" },
    { src: "/assets/img/slide/slide23.jpg" },
    { src: "/assets/img/slide/slide24.jpg" },
    { src: "/assets/img/slide/slide25.jpg" },
    { src: "/assets/img/slide/slide26.jpg" },
    { src: "/assets/img/slide/slide27.jpg" }
    ]

    // Suffle the array
    randombgs = shuffle(bgimages);

    $("body").vegas({
        delay: 10000,
        transitionDuration: 3500,
        cover: true,
        slides: randombgs
});

from vegas.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.