there doesn't seem to be such an option, and I haven't figured out how to modify the source for this purpose. can anyone help me?
4 Answers
If using v2, then -
$(".fancybox").fancybox({
autoPlay : true, // slideshow will start after opening the first gallery item
playSpeed : 3000 // 3sec pause between changing next item
});
-
thanks, but i wanted to start the slideshow after page load, not after opening the first gallery item. Commented Feb 11, 2012 at 18:15
-
try $(".fancybox").fancybox({autoPlay: true, playSpeed : 3000}).trigger('click');– JFKCommented Feb 11, 2012 at 18:53
-
Note:
autoPlay
doesn't work in v2.1.4 (the one linked on fancyBox's homepage) with jquery 1.9.1 (test an earlier version of your choice - I had 1.6.2 and 1.8.2 handy, and they both work). Bug ticket submitted– henryCommented May 17, 2013 at 20:42
I wanted to automatically display a gallery when the page load. I found the solution, it's just as simple as this:
$.fancybox.open($("[rel='your_rel']").get(), options);
This assumed you set the rel attribute of the items in the gallery to 'your_rel'.
If you are using a version prior to V2.
Assuming that you already know how to make the gallery with the rel attribute and that your images now have a clickable next and previous button:
Simply add an auto click event on the id of next arrow #fancybox-right:
<script>
setInterval(function() {
$('#fancybox-right').trigger('click');
}, 7000);
</script>
You can also use setTimeout, which will just click once and not continuously. Now if anyone knows how to make this setInterval stop on hover of div#fancybox-content, that would be awesome.
If you work with FancyBox 3:
$("[data-fancybox]").fancybox({
afterLoad: function() {
if (!$('.fancybox-button--play').hasClass("fancybox-button--pause")) {
$('.fancybox-button--play').trigger('click');
}
}
});