CODEWITHSUNDEEP
jquery
P Shudgins
P Shudgins

Reputation: 31

two play/pause toggle buttons for supersized full screen jquery slideshow

here's the site I'm workign on: http://www.stapletonjets.com/demo.asp

When you click the placeholder "click here" link, the page content fades out and the slideshow will start to play. Working well. Then, you'll see a tab at the top that will toggle pause/play and return the user to the site.

What I'd like to do is have the tab only pause the slideshow if the current state is play. In other words, if the user clicks the pause button in the slideshow, THEN clicks the tab at the top to return to the site, I don't want to tab to start the slideshow again... or else it will be flipping through the slides behind the site content.

So, I'm pretty sure there just has to be a function that checks the state of the slideshow (e.g., pause or play), then can adjust the tab's functionality accordingly. For example, if slideshow state = play, pause the slideshow... and if slideshow's state is paused, do nothing.

Some relevant code is below... just not sure how to manipulate it to do what I want to do. Any help much appreciated... thank you!

        playToggle : function(state){
        if (state =='play'){
            // If image, swap to pause
            if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "pause.png");
            if (api.options.progress_bar && !vars.is_paused) theme.progressBar();
        }else if (state == 'pause'){
            // If image, swap to play
            if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "play.png");
            if (api.options.progress_bar && vars.is_paused)$(vars.progress_bar).stop().css({left : -$(window).width()});
        }

    },

Upvotes: 1

Views: 1013

Answers (1)

user151496
user151496

Reputation: 1985

you don't want to modify the supersized js file. the functionality you want to change should be altered in the javascript that is hand-written in the script tags on your main webpage, it's somewhere below section "We hope to see your kids on the field in the spring!"

find this section (i know it's not indented, i just copy pasted it from the page source): 

<script>
$('#clickme2').click(function() {

$('#tab').fadeOut('slow', function() {
// Animation complete.
});                      

$('#maincontent').fadeIn('slow', function() {
// Animation complete.
});
$('#top').fadeIn('slow', function() {
// Animation complete.
});
$('#footer').fadeIn('slow', function() {
// Animation complete.
});

$('#bottomcontrols').fadeOut('slow', function() {
// Animation complete.
});


   api.playToggle();

});
</script>

please note that it's clickme2, not clickme, their definitions are very similar! what pauses/unpauses the player is the api.playToggle(). the playToggle just pauses/unpauses the slideshow depending on the previous player state- it does not look at what initiated the call. so we must modify the code in the section that i've posted.

let's change the clickme2 function behavior so it only calls playToggle when the player is playing. so let's wrap this part api.playToggle(); with this:

if( !(api.supersized.vars.is_paused) ){
  api.playToggle();
}

that should do the trick

Upvotes: 2

Related Questions