Stop, Start supersized on fancybox

Question

I was trying to use supersized and fancybox togheter. I added some html to supersized.js to display images with fancybox into each slide, in the default captions box, which is div id=slidecaption.

All works, but i was trying to stop and re-start the supersized slideshow when fancybox open/close.

This code works fine to stop the slideshow:

<script type="text/javascript">
jQuery(document).ready(function(){
$('#slidecaption').click(function() {
api.playToggle();
});
});
</script>

---

but i can't find a way to re-start the slideshow when i close fancybox. There's the div class=fancybox-overlay, but i repeat the above code for it:

<script type="text/javascript">
jQuery(document).ready(function(){
$('.fancybox-overlay').click(function() {
api.playToggle();
});
});
</script>

.....nothing works.

Do you suyggest something easier?

Thank you very much

Answer 1

Try using fancybox callbacks within your fancybox custom initialization like :

$(".fancybox").fancybox({
    beforeLoad: function () {
        api.playToggle(); // stop / pause
    },
    afterClose: function () {
        api.playToggle(); // restart
    }
});

Answer 2

Use this link (http://jsfiddle.net/RyTcS/) Hope its very helpfull for you.

 $(".fancybox")
 .attr('rel', 'gallery')
.fancybox({
    padding    : 0,
    margin     : 5,
    nextEffect : 'fade',
    prevEffect : 'none',
    afterLoad  : function () {
        $.extend(this, {
            aspectRatio : false,
            type    : 'html',
            width   : '100%',
            height  : '100%',
            content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
        });
     }
  });