The Extras of Extra Buttons

• Everything is Optional - There are dependencies. Number one is that you must have a togglerid property specified for the slideshow, and that division must exist. The second most important is the pend property of the extrabuttons option. If specified with a valid value, the script will auto-generate the extra buttons. If set to false or omitted, the script will look for elements in the toggler division(s) that have certain class names and assign the button behaviors to them. These and other dependencies are described in the following table. Take note of them.
• Extra Toggler Area(s) - The script adds class=togglerid (the togglerid specified in the init) to the selector for the toggler division(s), so you may now have more than one. If doing so, additional toggler division(s) may be given this as a class. You may still have only one with it as an id, though you can use only the class if you prefer. One possible usage:

  <div id="fadeshow1toggler">
  <span class="status"></span>
  <input type="button" class="prev" value="&lt;">
  <input type="button" class="next" value="&gt;">
  <span class="bob"></span><span class="pauseplaystatus">paused</span>
  </div>
  <div id="fadeshow1"></div>
  <div class="fadeshow1toggler">
  <span class="bob"></span>
  <span class="pauseplaystatus">paused</span><span class="status"></span>
  <input type="button" class="prev" value="&lt;">
  <input type="button" class="next" value="&gt;">
  </div>

• The Buttons - You may now have either a stop and a go button or a pause/play button. You may also create navigation buttons that allow you to navigate to the individual images. Buttons may be images, links, or actual form buttons, anything really. They may be auto-generated or inserted manually into the markup of the toggler division(s). When auto-generating the buttons (a valid extrabuttons.pend value is specified), you may specify them with the options described in the table Properties/Options Added by Extra Buttons below, or by not defining them, use the script's defaults (also described in the table Properties/Options Added by Extra Buttons). If manually inserting them into the markup, these classes (like the next and prev classes of the original script) will add corresponding behaviors:
  • stop - A stop button.
  • resume - A resume or go button.
  • pauseplay - A pause/play button. Two are required. One with the class 'running', one with the class 'paused'. Place one inside a span with display none (it doesn't matter which one, the script will sort that out, do not apply display none to the button itself!), For Example:

    <img class="pauseplay running" src="pause.gif" alt="pause" title="Pause">
    <span style="display: none;"><img class="pauseplay paused" src="resume.gif" alt="play" title="Play"></span>

  • navbut - A navigation button. Ideally you have one for each image in the slideshow. If so, the script will count them and assign them in order to the images. If you want only certain navigation buttons, you may specify their 0 based index in a data-index attribute to tell the script which image it corresponds to. If using the random option and image thumbnails as navigation buttons, any of this will get out of sync, so avoid that combination. Example navigation button:

    <img class="navbut" src="navimage_1.gif" alt="goto image 1" title="Image #1">

    Or (using the data-index attribute):

    <img class="navbut" data-index="0" src="navimage_1.gif" alt="goto image 1" title="Image #1">

• The Functions - Added to the existing oninit() and onslide() optional functions are new optional functions onbeforeslide() and onpauseplayswitch(). These are documented in the table below.

Properties/Options Added by Extra Buttons
- add these to the on page new fadeslideshow() init, requires a valid togglerid value set

extrabuttons: {pause: 6000, pauseplay: true, pend: '.bob', nextprevresume: false, navaction: 'mouseenter'}

onbeforeslide: function(index){
	var lng = this.setting.imagearray.length;
	this.setting.$nav.removeClass('highlight').each(function(i){
		if(i % lng === index){
			this.className += ' highlight';
		}
	});
}

onpauseplayswitch: function(pauseplaybuts){
	var ppstatus = this.setting.$togglerdiv.find('.pauseplaystatus');
	if(pauseplaybuts.hasClass('running')){
		ppstatus.html('running');
	} else {
		ppstatus.html('paused');
	}
}

Example Usages - Note: As explained in the above table, not all options may be used together, and others require other options be specified in order to have an effect: