Download on GitHub

Setup Kool Swap

Include jQuery

                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

Include jQuery UI if you're using easings for animation. Kool Swap actually only needs the jQuery UI effects core.

Include the Kool Swap CSS and JavaScript

                <link rel="stylesheet" type="text/css" href="jquery.kool-swap/css/kool-swap.css">
<script src="jquery.kool-swap/js/jquery.kool-swap.js"></script>

Activation

Sitewide use

With url change and history as well as title, id and class transfer.

                    $.koolSwap({
   swapBox : '#main',
});

Kool Swap uses the ID from swapBox to load the contents from the next page in sitewide mode. Please be aware that the defined swapBox has an ID. An element with the same ID must exist on the target page.

Section use

                    $('Element within content swaps').koolSwap({
   swapTriggerBox : 'Element that contains the triggers',
   moveSwapBoxClasses : true,
   positionType : 'absolute',
});
Read more about the section use

Define triggers

You need to tell Kool Swap which links should trigger a kool swap.

Define triggers with option

                    $.koolSwap({
   swapBox : '#main',
   swapTriggerBox: 'nav ul.main-menu'
});

Define triggers with CSS class

The default swapTrigger is "a". All swapTriggers in a box with given class "kool-swap" will trigger a kool swap.

                    <ul class="main-menu kool-swap">
   <li><a href="home.html">Home</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>

That's it!

Use the options to configure Kool Swap.