Docs_appliance_plugins_media_slideshow_tools_scrollable

Appliance: Plugins: Media: Slideshow jQuery Tools Scrollable

Need a scrollable content slider? Especially if you are already using jQuery Tools for anything else then this is what you need.

Includes the required javascript as needed (via Tool CDN)(you do all the styling in your style.css) and several shortcodes for creating slideshows within pages and posts.

Usage Summary

This appliance is theme only
This appliance is not included in any preset

Load into your theme

$my_theme->load('slideshow_tools_scrollable');

Shortcodes are ready. Now add your javascript to invoke… (to script.js)

if(jQuery().scrollable) {
    $("div.scrollables")
        .scrollable({
            speed: 500,
            circular: true,
            items: '.scroll_items',
            next: '.scrollables_next',
            prev: '.scrollables_previous'
            })
        .autoscroll({
            autoplay: true,
            interval: '4000'
        });
};

Necessary styles are included in the development starter themes. You need to invoke the slideshow and style it yourself in order to maintain control over you design and layout.

Shortcode usage

Help for site/blog owner usage is included in the KST help files/system

The shortcodes may be used in any order.
The minimum setup is at least one [scrollable_slide /]

ADD SLIDE (required)

[scrollable_slide]any valid markup use absolute paths to be safe[/scrollable_slide]

(optional) ADD CUSTOM CLASS for scrollables container

[scrollable_class]my_custom_class[/scrollable_class]

(optional) ADD SCROLLABLE HEADER LAYOUT/CONTENT

[scrollable_header]Header content with markup okay[/scrollable_header]

(optional) ADD SCROLLABLE FOOTER LAYOUT/CONTENT

[scrollable_footer]Footercontent with markup okay[/scrollable_footer]

(optional) ADD PAGER NAV BAR (no content, just a flag)

[scrollable_nav]

Example style.css

/**
 * scrollables scrollable_default instance (Tools.Scrollables)
 */
.scrollable_default {
    width: 639px;
    height: 350px;
    margin: 18px auto 0 auto;
    background: #eee none 0 0 repeat;
    border: 1px solid #000;
}
.scrollable_default .scrollables_scrollable {
    height: 350px;
}
.scrollable_default .scrollables_header { /* optional */ }
.scrollable_default .scrollables_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 619px;
    padding: 10px;
    background: #000 none;
    color: #fff;
    font-size: 14px;
    z-index: 0;
}
.scrollable_default .scroll_item {
    width: 640px;
    height: 350px;
    text-align: center;
}
.scrollable_default .scroll_item .active { }

.scrollable_default .scrollables_next, .scrollable_default .scrollables_previous { color: #fff; }
.scrollable_default .scrollables_next:hover, .scrollable_default .scrollables_previous:hover { color: #ff4b33; }

/**
 * scrollables core functionality DO NOT EDIT (Tools.Scrollables)
 */
.scrollables { /* functionality */ position: relative; }
.scrollables_scrollable { /* functionality */ position: relative; overflow: hidden; width: 100%; }
.scroll_items { /* functionality */ width: 20000em; position: absolute; }
.scroll_item { /* functionality */ float: left; }

.scrollables_previous, .scrollables_next {
    position: absolute;
    bottom: 20px;
    font-size: 18px;
}
.scrollables_previous {
    right: 40px;
    width: 10px;
    height: 10px;
    /*background: transparent url(/images/cotradeco/buttons/tools-left.png) 0 0 no-repeat;*/
    z-index: 1;
}
.scrollables_next {
    right: 20px;
    width: 10px;
    height: 10px;
    /*background: transparent url(/images/cotradeco/buttons/tools-right.png) 0 0 no-repeat;*/
    z-index: 1;
}
.scrollables_nav {
    position: absolute;
    bottom: 10px;
    right: 90px;
    text-align: center;
    z-index: 1;
}
.scrollables_nav a {
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    background: transparent url('../images/layouts/sprite.dot-3-states.png') 0 0 no-repeat;
}
/* mouseover state */
.scrollables_previous:hover, .scrollables_next:hover, .prevPage:hover, .nextPage:hover {
    background-position:0px -25px;
    cursor: pointer;
}
/* disabled navigational button */
.scrollables .disabled { visibility:hidden !important; }
/* mouseover state */
.scrollables_nav a:hover { background-position: -17px 0;  }
/* active state (current page state) */
.scrollables_nav a.active { background-position: -34px 0;  }