Jquery Cycle Questions: Pause on load + Hover Action

Question

Hey Guys, building a site and I've got two questions for you. The site is hosted here for the time being: http://wesbos.com/tf/shutterflow/?cat=5 .

I have two questions:

1. Currently the slideshow rotates divs with the class of .slide that holds the image. inside it, a class of .cover overlays it with the data/ a semi-transparent background on over.

If you try this, it loads fine (due to the CSS display:none on .cover) but when I click a thumbnail it loads both divs, not applying display:none to the .cover div. It only fades out when I hover over. I am using Jquery Cycle and my code looks like this:(found in shutterflow.js)

$(document).ready(function() {
$('#slideshow').cycle({
    fx:     'fade', 
next:   '#next', 
    pause: 1,
prev:   '#prev',
    pause:  '#pause',
    pager:  '.thumbs',
    pagerAnchorBuilder: function(idx, slide) {
                    var src = $('img',slide).attr('src');
                    return '<li><a href="#"><img src="' + src + '"  height="75" /></a></li>';
            } 
});

And

        $(document).ready(      
              function() {
                $('.slide').hover(
                  function() {  $(".cover").fadeIn('500'); },
                  function () { $(".cover").fadeOut('500');
                 }  );
        }  );

How can I get .cover to load as display:none when a thumbnail is clicked?


2. My second question should be pretty easy. Looking at the snippet above, I want the slideshow to load in a paused state and to run only when the play link is clicked.

Answer 1

EDIT: Added answer for first question.

First question: Add the pagerClick option to the cycle function.

pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();}

The second question seems easy: based on the plugin doc:

Assuming you have a play/pause btn

btnPlayPause.toggle(function(){$("#slideshow").cycle('pause');},function(){$("#slideshow.cycle('resume');})

you can also change the play/pause button image in those functions. Also look here