jQuery循环插件事件

Question

I have this jQuery code (which auto starts when the page loads)

    $('#slideshow').cycle({
        fx:     'scrollLeft',
        timeout: 10,
        speed:   10,
        autostop: 3
    });

I want the slides to start while clicking on the surrounding container my thought was:

$('#main-area').bind('click', function() {
    $('#slideshow').cycle({
        fx:     'scrollLeft',
        timeout: 10,
        speed:   10,
        autostop: 3
    });
});

However this does not work.. while if i change '#main-area' to document it works, but all the images are loaded vertical into the browser until I click on the document... should I rewrite a style:display:none; or can this be fixed with a different approach easily?

the html:

   <div id="main-area">
        <div id="slideshow" class="pics">
            <img src="media/images/stuff.jpg" />
            <img src="media/images/morestuff.jpg" />
            <img src="media/images/stuffff.jpg" />
        </div>
    </div>

Answer 1

The plug in has a .pause() method, try out starting the plug in and pausing it at page load, then when $("#main-area") or $(document) click event, use the .resume() method, example here:

http://jquery.malsup.com/cycle/pause.html

demo online: http://jsfiddle.net/tpak3/2/