Enhancement: Creation of Start/Stop-Button

[chrissly]

At the moment, the creation of the Start/stop button is bound to autoplay true/false.

I'd think it would be better, if the creation would be bound to a seperate parameter buildStartStopButton, just like the creation of the other navigation elements have their own params.

[Mottie]

I've thought about separating out this option... but I'd hate to add more options and have it be more confusing. Maybe I need a better way to organize the options.

Do you have any suggestions on maybe grouping options together? I've been thinking about doing something like what I have below, but I think there is a bigger chance of messing up with trailing commas and confusion, what do you think?

$('#slider').anythingSlider({
    // Appearance
    appearance : {
        width    : null,      // Override the default CSS width
        height   : null,      // Override the default CSS height
        expand   : false,     // If true, the entire slider will expand to fit the parent element
        resize   : true,      // "resizeContents" - If true, solitary images/objects in the panel will expand to fit the viewport
        multiple : false,     // "showMultiple" - Set this value to a number and it will show that many slides at once
        infinite : true,      // "infiniteSlides" - if false, the slider will not wrap
        start    : 1,         // "startPanel" - This sets the initial panel
        theme    : 'default'  // Theme name
    },

    // Controls - combined navigation and slideshow controls
    controls : {
        appendTo    : null,      // "appendControlsTo" - A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
        toggle      : false      // "toggleControls" - if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
    },

    // Navigation
    navigation : {
        build       : true,      // "buildNavigation" - If true, builds a list of anchor links to link to each panel
        enable      : true,      // "enableNavigation" - if false, navigation links will still be visible, but not clickable.
        format      : null,      // "navigationFormatter" - Details at the top of the file on this use (advanced use)
        hash        : true,      // "hashTags" - Should navigation links change the hashtag in the URL?
        tooltip     : 'tooltip'  // "tooltipClass" - Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
    },

    // Arrows
    arrows: {
        build       : true,      // "buildArrows" - If true, builds the forwards and backwards buttons
        toggle      : false,     // "toggleArrows" - If true, side navigation arrows will slide out on hovering & hide @ other times
        change      : 1,         // "changeBy" - Amount to go forward or back when changing panels.
        forwardText : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
        backText    : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
        keyboard    : true       // "enableKeyboard" - if false, keyboard arrow keys will not work for the current panel.
    },

    // Slideshow options
    slideShow: {
        build     : true,    // build it *new*
        enable    : true,    // "enablePlay" - if false, the play/stop button will still be visible, but not clickable.
        start     : true,    // "autoPlay" - **changed** now this functions like the "startStopped" option
        lock      : false,   // "autoPlayLocked" - If true, user changing slides will not stop the slideshow
        pause     : true,    // "pauseOnHover" - If true & the slideshow is active, the slideshow will pause on hover
        once      : false,   // "stopAtEnd" - If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
        rtl       : false,   // If true, the slideshow will move right-to-left
        startText : "Start", // Start button text
        stopText  : "Stop",  // Stop button text
        delay     : 3000,    // How long between slideshow transitions in AutoPlay mode (in milliseconds)
        resume    : 15000,   // "resumeDelay" - Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
        time      : 600,     // "animationTime" - How long the slideshow transition takes (in milliseconds)
        easing    : "swing"  // Anything other than "linear" or "swing" requires the easing plugin
    },

    // Callbacks - removed from options to reduce size - they still work
    // *********** Callbacks ***********
    callbacks : {
        startup : function(e, slider) {}, // "onBeforeInitialize" - Callback before the plugin initializes
        init    : function(e, slider) {}, // "onInitialized" - Callback when the plugin finished initializing
        start   : function(e, slider) {}, // "onShowStart" - Callback on slideshow start
        stop    : function(e, slider) {}, // "onShowStop" - Callback after slideshow stops
        pause   : function(e, slider) {}, // "onShowPause" - Callback when slideshow pauses
        unpause : function(e, slider) {}, // "onShowUnpause" - Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
        change  : function(e, slider) {}, // "onSlideInit" - Callback when slide initiates, before control animation
        slide   : function(e, slider) {}, // "onSlideBegin" - Callback before slide animates
        complete: function(slider) {}     // "onSlideComplete" - Callback when slide completes - no event variable!
    },

    // Video
    video : {
        resume       : true,                            // "resumeOnVideoEnd" - If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
        embedOptions : { wmode : "opaque" },            // "addWmodeToObject" - If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
        isPlaying    : function(base){ return false; }  // "isVideoPlaying" - return true if video is playing or false if not - used by video extension
    },

    // Misc
    misc : {
        // Interactivity
        clickArrows         : "click",         // Event used to activate arrow functionality (e.g. "click" or "mouseenter")
        clickControls       : "click focusin", // Events used to activate navigation control functionality
        clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
        // Misc options
        maxOverallWidth     : 32766            // Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera
    }

});

[Mottie]

Hmmm, maybe this is better

$('#slider').anythingSlider({
    // Appearance
    width    : null,      // Override the default CSS width
    height   : null,      // Override the default CSS height
    expand   : false,     // If true, the entire slider will expand to fit the parent element
    resize   : true,      // "resizeContents" - If true, solitary images/objects in the panel will expand to fit the viewport
    multiple : false,     // "showMultiple" - Set this value to a number and it will show that many slides at once
    infinite : true,      // "infiniteSlides" - if false, the slider will not wrap
    start    : 1,         // "startPanel" - This sets the initial panel
    theme    : 'default', // Theme name

    // Controls - combined navigation and slideshow controls
    controlsAppendTo    : null,      // "appendControlsTo" - A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
    controlsToggle      : false,     // "toggleControls" - if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

    // Navigation
    navBuild       : true,      // "buildNavigation" - If true, builds a list of anchor links to link to each panel
    navEnable      : true,      // "enableNavigation" - if false, navigation links will still be visible, but not clickable.
    navFormat      : null,      // "navigationFormatter" - Details at the top of the file on this use (advanced use)
    navHash        : true,      // "hashTags" - Should navigation links change the hashtag in the URL?
    navTooltip     : 'tooltip', // "tooltipClass" - Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

    // Arrows
    arrowsBuild       : true,      // "buildArrows" - If true, builds the forwards and backwards buttons
    arrowsToggle      : false,     // "toggleArrows" - If true, side navigation arrows will slide out on hovering & hide @ other times
    arrowsChange      : 1,         // "changeBy" - Amount to go forward or back when changing panels.
    arrowsForwardText : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
    arrowsBackText    : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
    arrowsKeyboard    : true,      // "enableKeyboard" - if false, keyboard arrow keys will not work for the current panel.

    // Slideshow options
    showBuild     : true,    // build it *new*
    showEnable    : true,    // "enablePlay" - if false, the play/stop button will still be visible, but not clickable.
    showStart     : true,    // "autoPlay" - **changed** now this functions like the "startStopped" option
    showLock      : false,   // "autoPlayLocked" - If true, user changing slides will not stop the slideshow
    showPause     : true,    // "pauseOnHover" - If true & the slideshow is active, the slideshow will pause on hover
    showStopAtEnd : false,   // "stopAtEnd" - If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
    showRtl       : false,   // If true, the slideshow will move right-to-left
    showStartText : "Start", // Start button text
    showStopText  : "Stop",  // Stop button text
    showDelay     : 3000,    // How long between slideshow transitions in AutoPlay mode (in milliseconds)
    showResume    : 15000,   // "resumeDelay" - Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
    showTime      : 600,     // "animationTime" - How long the slideshow transition takes (in milliseconds)
    showEasing    : "swing", // Anything other than "linear" or "swing" requires the easing plugin

    // *********** Callbacks ***********
    onStartup  : function(e, slider) {}, // "onBeforeInitialize" - Callback before the plugin initializes
    onInit     : function(e, slider) {}, // "onInitialized" - Callback when the plugin finished initializing
    onStart    : function(e, slider) {}, // "onShowStart" - Callback on slideshow start
    onStop     : function(e, slider) {}, // "onShowStop" - Callback after slideshow stops
    onPause    : function(e, slider) {}, // "onShowPause" - Callback when slideshow pauses
    onUnpause  : function(e, slider) {}, // "onShowUnpause" - Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
    onChange   : function(e, slider) {}, // "onSlideInit" - Callback when slide initiates, before control animation
    onSlide    : function(e, slider) {}, // "onSlideBegin" - Callback before slide animates
    onComplete : function(slider) {},     // "onSlideComplete" - Callback when slide completes - no event variable!

    // Video
    videoResume       : true,                            // "resumeOnVideoEnd" - If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
    videoOptions : { wmode : "opaque" },            // "addWmodeToObject" - If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
    videoIsPlaying    : function(base){ return false; }  // "isVideoPlaying" - return true if video is playing or false if not - used by video extension

    // Interactivity
    clickArrows         : "click",         // Event used to activate arrow functionality (e.g. "click" or "mouseenter")
    clickControls       : "click focusin", // Events used to activate navigation control functionality
    clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
});

[chrissly]

The first one has too much fuzz. The naming of the second one, esp. of the slideshow options, seems too unclear for me. I'd prefer the following:

//Appearance
    buildArrows                           
    buildNavigation                     
    buildStartStopButton       // +
    appendArrowsTo             // + 
    appendNavigationTo         // split the AppendTo, so every Navigation-Element
    appendStartStopButtonTo    // can be handled separately
    toggleArrows
    toggleNavigation           // same as AppendTo
    toggleStartStopButton
...
    texts, ...
    
//Behavior
    autoPlay                 // combines autoPlay and StartStopped
    pauseOnHover
    stopAfterInteract

//times
    initialDelay             // + timeout before autoplay starts
    delay
    resumeDelay
    animationTime

Does it make sense to omit width and height? Although it seems easy and practical, it compromises the division of "function" (in the js) and "visual appearance" (in the css).

[Mottie]

Hi Chrissly!

You have some good points there... I've been working on it and I think I got it so the height and width is controlled by the css now. Now to test it and make a couple of other additions :)

[Mottie]

Hi Chrissly!

Ok, I pushed a bunch of new updates in Version 1.7. See the Change Log in the main demo for a full list... I'm going to start updating the wiki now o.O LOL