Download on GitHub

Options

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

Events

$(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() {
   functions
});

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".

Methods

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

                    $.koolSwap('destroy');

Update Settings

                    $.koolSwap({
   setting: 'new/changed value';
});