Like me on Facebook Follow me on Twitter Register or    (Why?)
Demo Notes - Kwicks Template
This demo showcases a new skin created 12/14/2011 named Kwicks. Kwicks is a jQuery enabled slider skin based on the work of Jeremy Martin who did a port of the MooTools Kwicks plugin. I really like putting together new skins like this as they enable me to show the powerful skinning/templating model available with the Aggregator. Using the documentation on Jeremy's site I was able to put together this skin in about 3 hours.

If you are interested in learning more about the Aggregator template system, please read this:
Documentation on how the Aggregator template system works

The Kwicks skin allows you to present your content in either horizontal or vertical format and includes a number of additional settings to configure it the way you require.

The additional settings include:
  • Orientation - horizontal or vertical
  • Element Width - width of each element (pane) in pixels when they are not expanded
  • Element Height - height of each element (pane) in pixels when they are not expanded
  • Spacing - spacing in pixels between elements
  • Sizing Mode - max or min - determines if a fully expanded or fully collapsed sizing mode is used
  • Sizing - max or min number of pixels depending on the sizing mode
  • Easing - effect used to transition from one state to another - uses the standard jQuery easing plugin options
  • Easing Duration - duration in milliseconds used in the transition from one state to another
  • Sticky - if selected, current selected element stays open
  • Trigger Event - mouse event that is used to trigger the transition - default is mouseover - includes click and dblclick
Aggregator - Kwicks (Horizontal)
This Kwicks setup is using the default options.
Agggregator - Kwicks (Sticky)
This Kwicks setup has the sticky option set and the default tab set to 1. The sticky option will keep the currently selected element open.
Aggregator - Kwicks (Easing)
This setup has the easing set to 'easeOutElastic', duration 1 second and the element width narrowed to '150px'.
Aggregator - Kwicks (Vertical)
This setup shows the Kwicks skin in 'Vertical' mode
Aggregator - Kwicks (Html Content)
Because each panel is just plain html or another injected module you can display anything including text like in the following setup.
  • Panel 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies cursus varius. Ut ipsum turpis, iaculis quis varius in, rhoncus egestas turpis. Nulla ac sagittis quam. Cras lobortis suscipit enim non imperdiet. Vestibulum et leo quam. Donec posuere, nunc at porttitor malesuada, magna leo fermentum dolor, quis congue arcu nisl in ligula. Duis id velit ut tortor euismod malesuada. Vestibulum lacus augue, consequat ac ultrices a, posuere a neque. Sed a quam mi. Suspendisse non nisi mauris. Suspendisse sapien eros, sagittis in interdum ac, pulvinar sit amet arcu. Vestibulum bibendum pulvinar mollis. Etiam vestibulum est ante, vel commodo nisi. Quisque nec lorem ut metus laoreet iaculis.
  • Panel 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies cursus varius. Ut ipsum turpis, iaculis quis varius in, rhoncus egestas turpis. Nulla ac sagittis quam. Cras lobortis suscipit enim non imperdiet. Vestibulum et leo quam. Donec posuere, nunc at porttitor malesuada, magna leo fermentum dolor, quis congue arcu nisl in ligula. Duis id velit ut tortor euismod malesuada. Vestibulum lacus augue, consequat ac ultrices a, posuere a neque. Sed a quam mi. Suspendisse non nisi mauris. Suspendisse sapien eros, sagittis in interdum ac, pulvinar sit amet arcu. Vestibulum bibendum pulvinar mollis. Etiam vestibulum est ante, vel commodo nisi. Quisque nec lorem ut metus laoreet iaculis.
  • Panel 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies cursus varius. Ut ipsum turpis, iaculis quis varius in, rhoncus egestas turpis. Nulla ac sagittis quam. Cras lobortis suscipit enim non imperdiet. Vestibulum et leo quam. Donec posuere, nunc at porttitor malesuada, magna leo fermentum dolor, quis congue arcu nisl in ligula. Duis id velit ut tortor euismod malesuada. Vestibulum lacus augue, consequat ac ultrices a, posuere a neque. Sed a quam mi. Suspendisse non nisi mauris. Suspendisse sapien eros, sagittis in interdum ac, pulvinar sit amet arcu. Vestibulum bibendum pulvinar mollis. Etiam vestibulum est ante, vel commodo nisi. Quisque nec lorem ut metus laoreet iaculis.
Privacy StatementTerms Of UseCopyright (c) 2004-2015 DNNStuff
Page generated in 0.2343808 seconds!