In the header of a webpage sits a banner which displays a slideshow. An example can be found here. Now, when a user is on a page containing a photo gallery and he clicks a thumbnail a lightbox will open (shadowbox.js). Simultaneously with opening the lightbox, the slideshow script should be stopped so that the user is not distracted by the background.
Summarized:
Normal: script for slideshow is being executed
When a user clicks thumbnail (with a certain rel attr "shadowbox"): the slide show script should be blocked.
When lightbox is closed (use Shadowbox's onClose hook?) the script of the slide show in the header should be re-initialized.
Any ideas on this?
The version of Shadowbox you are using is v3.0.3, the current stable release.
The name of the other plug-in you are using is Durpal Rotating Banner v6, but version 7.2 is available for use.
You are absolutely correct in using Shadowbox Hook Options, .onOpen(); and onClose(); to interact with the Rotating Banner script. However, the Rotating Banner script doesn't have API usage documentation other than configuring the options in via a customized menu.
Examining the well documented JavaScript downloadable zipped files shows how to interface with the Durpal Rotating Banner, no matter the version you are using.
First, I do not use the plugin version of Shadowbox, only the stand-alone version from the Shadowbox website but this method should word for various Shadowbox plugins (e.g., Drupal, WordPress) out there for those landing on this answer.
If you don't have access to Shadowbox.init({});, use this script right before the closing body tag of your webpage, otherwise jump down to the next block of code:
<script type="text/javascript">
window.onload=function(){
Shadowbox.setup('',{
// Besides 'pause' and 'resume' are 'prev', 'next', and 'stop' found in the jQuery Cycle Plugin (check inside jQuery Easing Plugin to see if it's combined).
onOpen: function(){
jQuery('.rb-slides').each(function () {
if (jQuery(this).cycle) {
jQuery(this).cycle('pause');
}
});
},
onClose: function(){
jQuery('.rb-slides').each(function () {
if (jQuery(this).cycle) {
jQuery(this).cycle('resume');
}
});
}
// If you have access to Shadowbox.init({}), then place the above onOpen and onClose in there instead of using this script.
});
};
</script>
If you have access to Shadowbox initialization via Shadowbox.init({}); then use the onOpen(); and onClose(); portions below as shown.
<script type="text/javascript">
Shadowbox.init({
onOpen: function(){
jQuery('.rb-slides').each(function () {
if (jQuery(this).cycle) {
jQuery(this).cycle('pause');
}
});
},
onClose: function(){
jQuery('.rb-slides').each(function () {
if (jQuery(this).cycle) {
jQuery(this).cycle('resume');
}
});
}
});
</script>
In my test environment, this works well for Shadowbox with the Base or jQuery Adapter interface... which for me is a download option (in addition to jQuery Library).
The above script will pause all Rotating Banners found on the webpage when Shadowbox opens and then will resume them all back when Shadowbox closes.