Invoking jVette

These pages are live examples of jVette; click the header icons (above) to see it in action! View the source code to see actual markup/attribute implementation details.

Check out the events and methods for advanced usage.

Basic Example

<script>
/**<![CDATA[*/
;(function($, jVette)
{
    jVette && jVette({
        slide: {
            duration: 500
        }
    });

})(window.jQuery, jVette);
/**]]>*/
</script>

jVette default options

var defaults = {
    // enabled by default
    disabled: false
   ,transforms: true
    //  animation
   ,slide: {
        easing: 'swing'
       ,duration: 350 
    }
   // TouchSwipe (if available) options
   ,swipe: {
       threshold: 10
      ,allowPageScroll: 'vertical'                    
    }
   // events
   ,onenable: function(e) {}
   ,onenabled: function(e) {}
   ,ondisable: function(e) {}
   ,ondisabled: function(e) {}
   ,onopen: function(e) {}
   ,onopened: function(e) {}
   ,onclose: function(e) {}
   ,onclosed: function(e) {}
};

jVette is a singleton, and can be invoked with or without the new operator

<script>
/**<![CDATA[*/
;(function($, jVette)
{   
    var jv1 = jVette && jVette();
    var jv2 = jVette && new jVette();
    
    // equates to true since both are the same instance
    window.console && window.console.log(jv1 === jv2);

})(window.jQuery, jVette);
/**]]>*/
</script>