Question

Scorliss here again.
As a client has recently asked me to add multiple image slide shows to their website I have been looking online for a free slideshow/image gallery that I am able to call from a link…without having all the images in the slideshow as links on the page.
I have had some success with lightbox and I found fancybox. I have a sildshow working on the site. My issue is that I am trying to auto start the slideshow when a user clicks a link. Below is the code for the fancybox java script

    <script type="text/javascript">
    $(document).ready(function() {

        $("#fancybox-manual-c").click(function() {
            $.fancybox.open
            ([{ autoPlay:true,
                href : '../images/BDAY 2.jpg',
                title : 'My title'
                }, 
            {
                href : '../images/horse_pic_3.jpg',
                title : '2nd title'
                }, 
            {
                href : '../images/lori.jpg'
                }],
             {'callbackOnShow':myFunc,
                helpers : {
                    thumbs : {
                        width: 75,
                        height: 50
                    },
                    buttons : {}

                }
            });
        });


    });
</script>
<style type="text/css">
    .fancybox-custom .fancybox-skin {
        box-shadow: 0 0 50px #222;
    }
</style>
<script type="text/javascript">
function myFunc() {
alert("Opened!");
}

</script>

In the body of the HTML I have

<a id="fancybox-manual-c" href="javascript:;">Open gallery</a>

Can someone please show me if i should be using a callback…and if so where or if i should just use the “autoPlay:true”
.Thanks SCorliss

Answer 1

If all you want is for it to automatically play, I would say just use the built in options.

But in this case you would probably want to move your autoplay:true setting into the options portion of the fancybox parameters.

Fancybox Parameters (from: http://fancyapps.com/fancybox/#docs):

$.fancybox.open( [group], [options] )

Move the autoplay:true setting down into the options object parameter:

$.fancybox.open(
    [
        { href : '../images/BDAY 2.jpg', title : 'My title' }, 
        { href : '../images/horse_pic_3.jpg', title : '2nd title' }, 
        { href : '../images/lori.jpg' }
    ],
    {
        autoplay: true,
        helpers : {
            thumbs : { width: 75, height: 50    },
            buttons : {}
        }
    }
);