Download on GitHub


These options are available to configure the plugin for your needs. The default animation type - if no easing is defined - is fade. Define easings to change the animation type.

Option Default Description
swapBox Define the element that should be swaped. It can be any CSS selector but ideally an ID.
loadBox Normally the contents from a box with the same ID as the swapBox are loaded from the target page. Get the content from any other selector on the target page with loadBox.
swapTriggerBox .kool-swap Element that contains the triggers that will be used for a kool swap.
swapTrigger a Trigger elements inside swapTriggerBox.
direction No direction means that pages are faded in/out. Possible values are: left-to-right, right-to-left, top-to-bottom and bottom-to-top.
inDuration 700 Duration for the loading page.
outDuration 500 Duration for the unloading page.
inEasing easeInSine Easing for the page swapped in. This only takes effect if a direction is defined.
outEasing easeInSine Easing for the page swapped out. This only takes effect if a direction is defined.
bouncingBoxes Are there bouncing boxes? Define them here and they will fade out/in on page swap. See an example
bouncingBoxHandling fade Handling of bouncingBoxes. Values: "fade" and "slide"
preloadImages true All images in the page that is currently loaded are reloaded before the page swap will be executed.
positionType fixed The swapBox will be fixed positioned by default. Position it absolute if this causes layout problems.
moveSwapBoxClasses Classes of the swapBox won't be moved to the swapBoxIn by default. Set this to true if you need to use the same class for miscellaneous contents.
history false Set to true to enable history for section-use
outerWidth false By default the width of the swapBox is calculated by .width(). Set to "true" to use ".outerWidth()" instead.
loadErrorMessage The requested page was not found. Change to show another text on error.
loadErrorBacklinkText Go back to the last page Change to show another back link text


$(document).ready() function wont be triggered after a Kool Swap page load. Other plugins or ready-functions should be reinitialised after the load or animation of a page executed by Kool Swap. Use the callback events to do exactly that.

Event Description
ksLoadCallback Triggered after the page is loaded.
ksSwapCallback Triggered after the page is loaded and animated.
ksSwapSectionCallback Triggered after a section is loaded and animated.
                    $(document).on('ksLoadCallback', function() {

Ready functions that are called after "ksLoadCallback" should often not be executed in the swapBox then in the swapInBox. To do that associate callback functions to ".ks-swap-box-in".


Method Description
destroy Unbind Kool Swap click event from Kool Swap triggers.

Update Settings

   setting: 'new/changed value';