jQuery cycle plugin events
<p>I have this jQuery code (which auto starts when the page loads)</p>

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

<p>I want the slides to start while clicking on the surrounding container my thought was:</p>

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

<p>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?</p>

<p>the html:</p>

<pre><code>   &lt;div id="main-area"&gt;
        &lt;div id="slideshow" class="pics"&gt;
            &lt;img src="media/images/stuff.jpg" /&gt;
            &lt;img src="media/images/morestuff.jpg" /&gt;
            &lt;img src="media/images/stuffff.jpg" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>
