Login





 
en el
Login / Register

Shopping Cart

jSwitch





Product Details

Created

11 Apr 2011

Files included

, ,

Software type

,

Software version

Keywords

, , , ,

jSwitch is a plug-in for site switching in a nice, and innovating way. Each site you own will not refresh the web page content, instead will appearing with animation over the previews page.

Features

Usage

The jSwitch installation is fast and easy. However, to use the jSwitch, you must have the basic knowledge of jQuery selectors usage to install it.

First of all, to use the jSwitch you have to own at least two web sites, with deferent domain names. On each web site create a link that will point to each other with unique ID, or a shared class name.

NOTE: While the plug-in support site switching under the same domain, is not a good technique because if your end user do repeated use of the jSwitch can overload the web browser memory.

After you have setup the links to each other web site, you have to load the jSwitch on each web site that will participate into your web sites group too.

After you have load and the jSwitch on each web site, you have to use the following structure to enable the plug-in for each web site:

$(document).ready(
    function()
    {
        $('Element Selector').jSwitch();
    }
);

The above is the minimal code you need to install the jSwitch and make it work.

Available options

openDirection
Optional value
Default value: ltr
From witch direction will start the animation of the second page. Available values for this option are the following:

  • rtl (Right to Left)
  • ltr (Left to Right)
  • ttb (Top to Bottom)
  • btt (Bottom to Top)
openEasing
Optional value
Default value: easeOutBounce
If you have load the easing library you can use the following easing methods

  • def
  • swing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
openEasingSpeed
Optional value
Default value: 1000
The total time the animation is need to completed on open animation
closeDirection
Optional value
Default value: ltr
From witch direction will start the animation of the second page. Available values for this option are the following:

  • rtl (Right to Left)
  • ltr (Left to Right)
  • ttb (Top to Bottom)
  • btt (Bottom to Top)
closeEasing
Optional value
Default value: easeOutBounce
If you have load the easing library you can use the following easing methods

  • def
  • swing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
closeEasingSpeed
Optional value
Default value: 1000
The total time the animation is need to completed on close animation
overlayFadeinSpeed
Optional value
Default value: 250
The total time need it to show up the overlay layer
overlayFadeoutSpeed
Optional value
Default value: 250
The total time need it to hide the overlay layer
overlayBackground
Optional value
Default value: #000
The background color for overlay layer. You can use any hex value or named value for the color.
overlayOpacity
Optional value
Default value: 0.3
The overlay layer opacity level. You can use values from 0 to 1.

Requirements

In order to use the jSwitch you have to load the jQuery JavaScript framework and/or the easing library. The load order of that files is the following. First of all you have to load the jQuery library. If you like to use the easing plug-in, then you have to load the easing plug-in and finally to load the jSwitch plug-in.

Usage Examples

Site A:

<html>
    <head>
        <title>Page A title</title>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="easing.js"></script>
        <script type="text/javascript" src="jquery.jSwitch-1.0.0.js"></script>
        <script type="text/javascript">
            $(document).ready(
                function()
                {
                    $('#gtB').jSwitch(
                        {
                            openEasing: 'easeOutElastic',
                            closeDirection: 'rtl',
                            overlayBackground: '#555'
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <h1>Page A</h1>

        <a href="http://www.siteB.ext" id="gtB">Go to B</a>
    </body>
</html>

Site B:

<html>
    <head>
        <title>Page B title</title>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="easing.js"></script>
        <script type="text/javascript" src="jquery.jSwitch-1.0.0.js"></script>
        <script type="text/javascript">
            $(document).ready(
                function()
                {
                    $('#gtA').jSwitch(
                        {
                            overlayBackground: 'red',
                            closeEasingSpeed: 2500
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <h1>Page B</h1>

        <a href="http://www.siteA.ext" id="gtA">Go to A</a>
    </body>
</html>

Leave a Reply

Your email address will not be published.
Required fields are marked[*]