Comments (7)
Hello.
Not yet.
Just shuffle the background array before passing it to vegas.
from vegas.
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.
Hello.
http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript
from vegas.
Thanks a lot @jaysalvat I've done it as you suggested and it works great :)
from vegas.
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.
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.
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)
- how to play video from youtube HOT 1
- Slideshow picture and movies HOT 1
- Strange Glitch with Blur transition HOT 1
- Blur transition blinks in Chrome HOT 2
- Vegas asynchronous load HOT 2
- Optimize images for faster loading HOT 2
- Effect kenburns reverse HOT 3
- Using option to use playsinline for videos? HOT 1
- Using sprite image HOT 1
- Vegas & m4q
- Video Error: Uncaught (in promise) DOMException on vegas.min.js:10
- jQuery inside wrapper
- Three Video Format (mp4,webm,ogv)? HOT 1
- Overlay issue - Overlay does not show HOT 2
- why cannot my image fill my div ?
- Adding a custom overlay adds a gray background at the bottom of the slider
- None of the images are showing HOT 1
- Incorrect padding in Firefox HOT 1
- :: THE AUDIO OF THE VIDEOS DOES NOT SOUND :: HOT 1
- Image transition issue with cover:false HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vegas.