Adding Pause/Resume action buttons to slideshow implementation

Hello jtsheldon,

This is a very good feature and I would like to thank you for this suggestion. I personally will try to commit this feature to Corporate Clean core in order to be included in next Corporate Clean theme release.

Corporate Clean slideshow is based on jQuery Cycle Plugin http://jquery.malsup.com/cycle/. There is a demo for your request here http://jquery.malsup.com/cycle/pause.html

In order to implement this feature to CorporateClean theme you should make the following changes

1. Edit javascript in template.php file
from

/**
 * Add javascript files for page--front jquery slideshow.
 */
drupal_add_js(drupal_get_path('theme', 'corporateclean') . '/js/jquery.cycle.all.min.js');

//Initialize slideshow using theme settings
$effect=theme_get_setting('slideshow_effect','corporateclean');
$effect_time=theme_get_setting('slideshow_effect_time','corporateclean')*1000;

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
	fx:    "'.$effect.'",
	speed:  "slow",
	timeout: "'.$effect_time.'",
	pager:  "#slider-navigation",
	pagerAnchorBuilder: function(idx, slide) {
		return "#slider-navigation li:eq(" + (idx) + ") a";
	},
	after: onAfter
});

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

to

/**
 * Add javascript files for page--front jquery slideshow.
 */
drupal_add_js(drupal_get_path('theme', 'corporateclean') . '/js/jquery.cycle.all.min.js');

//Initialize slideshow using theme settings
$effect=theme_get_setting('slideshow_effect','corporateclean');
$effect_time=theme_get_setting('slideshow_effect_time','corporateclean')*1000;

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
	fx:    "'.$effect.'",
	speed:  "slow",
	timeout: "'.$effect_time.'",
	pager:  "#slider-navigation",
	pagerAnchorBuilder: function(idx, slide) {
		return "#slider-navigation li:eq(" + (idx) + ") a";
	},
	after: onAfter
});

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	$(this).parent().animate({height: $ht});
}

$("#pauseButton").click(function() { 
$("#slideshow").cycle("pause"); 
});

$("#resumeButton").click(function() { 
$("#slideshow").cycle("resume"); 
});

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

2. Add to the page.tpl.php file under the slideshow, the two action links (Pause /Resume)

<a id="pauseButton" href="#">Pause</a>
<a id="resumeButton" href="#">Resume</a>

I suggest you to place these links under the slider-controls-wrapper

<!--slider-controls-wrapper-->
<div id="slider-controls-wrapper">
    <div id="slider-controls">
        <ul id="slider-navigation">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</div>
<!--EOF:slider-controls-wrapper-->

<a id="pauseButton" href="#">Pause</a>
<a id="resumeButton" href="#">Resume</a>

Thanks
/George

Hello jtsheldon and thanks for this feature request.

I changed this issue to support request and the status of this issue to "fixed" in order to help others. So, if this feature will be required by many users, i will implement it to the Corporate Clean theme with the appropriate design and not only with 2 text links as the example.

Thanks
George

Count me as someone who would like to see this implemented with appropriate buttons rather than text. In addition, I feel those buttons should indicate the current state (i.e. paused vs. running) so the user can readily see whether the slideshow is paused or not.

I'd really like to have this functionality on a site I've almost completed. I've gotten what you posted above working. I could craft the buttons myself, but wouldn't know how to write the script to change the button based on the paused/running state of the slideshow. I'd love to see this as an option in the theme settings.

Count me in. I'd like to have a pause button , too.

I would love to have a button on the slide that says "pause", when you press it it changes to "resume".
It would also be good to have an optional "next" button instead of the "dots"

RE CorporateClean 7.x-2.0
It appears that changing the "effect duration" setting appears to have no effect.

I also see that you need to modify the code to change the number of dots if you have more or fewer slides.

I have found the hover to stop function is very confusing until you discover it!
What makes it harder is that you have to be over the content for the hover pause to work. Just hovering over the region does not do it.

saraexpert - I added an issue for the 'effect duration' not working. you can see that here http://drupal.org/node/1905000 -- I included instructions in how to change it in the code which appears the only way to adjust the speed as far as I can tell.