Learn how to connect an HTML form to the database and email! It takes only 3 minutes. Read more

javascript by
Free Download

Elixon Theatre 3.0

Buy Now! 4 $
  • Home
  • Demo
  • Gallery
  • Documentation
  • Tutorials
  • Contents
  • Questions
  • Elixon Theatre is an extensible carousel/slideshow-like JQuery plugin supporting multiple animation effects. Works with images or any other type of rich formatted HTML contents. A best choice for portfolios, news tickers, image showcases and more. It provides you the freedom of custom controls. You can design your own controls as you like. Or you can use inbuilt support for button templates. Just create a button template and point Elixon Theatre to your button template using the paging property.


    Yet another jQuery carousel? Why?

    My main goal is to lead a development of CMS systems so CMS become a maintainable professional tool that enables designers and editors to create a great sites without limiting their fantasy. During a decade in the CMS business I've learned that

    no matter how good the tool is the fantasy of designers always exceeds it

    They don't want to have one gallery. They want to have many types of galleries. They don't want to have vertical slideshow, they want to have also horizontal and fade in/out slideshows. And it makes sense. We can be very conservative regarding content editing features but we must not be conservative about design of the websites. The website is a front end of the company and every company must distinguish itself from others. Thus allowing every site to be as different as possible is essential to our business.

    Sure, there is always some great jQuery plugin that does the job. But sooner then later you will end up supporting five slightly different jQuery plugins that do almost the same thing. And once you include the support of particular plugin into CMS release then you become responsible for maintenance of the plugin for a whole life cycle of a website. It results in waste of time and money. You will need other solution soon.

    And this is why I started Elixon Theatre. I didn't want any software maintainer to be responsible for many different plugins doing the same job. Soon enough I realized that all these carousel effects can be just one jQuery plugin that meets following goals:

    • Maintainability
      CMS release maintainers need to worry about compatibility and updates for just one jQuery plugin.
    • Learn Once & Use Often
      Designers don't need to learn many different APIs - just one simple API for all carousel effects they need.
    • Safe Extensibility
      Anybody can add new effects in a safe way as independent add-ons without altering/breaking the core code.
    • Per-site Customizations
      Elixon Theatre is as much CSS friendly as possible and allows per-site custom-designs including fully customizable control buttons.


    This plugin.
    JQuery object representing the container with items to animate.
    HTML element representing the item to be animated inside the Stage.
    Javascript array with settings passed to the Theatre's constructor.
    Javascript object providing the effect animation.


    In addition to JQuery 1.4 you need to link the Theatre Javascript and CSS file from within your page.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" 

    <link type="text/css" rel="stylesheet" href="…/theatre/theatre.css" />
    <script type="text/javascript" src="…/theatre/jquery.theatre.min.js"></script>


    • $(Stage).theatre(Settings); Initialize the Theatre
    • $(Stage).theatre('next'); Jump to next Actor
    • $(Stage).theatre('redraw'); Reposition the actors. This may be needed for some effect when screen is resized ($(window).on("resize", function() { $(stage).theatre("redraw"); });)
    • $(Stage).theatre('prev'); Jump to previous Actor
    • $(Stage).theatre('play'); Start cycling through the list of Actors
    • $(Stage).theatre('stop'); Stop the automatic cycling
    • $(Stage).theatre('redraw); Recalculate sizes and redraw the scene.
    • $(Stage).theatre('jump', index [, speed1.0.10]); Jump to the given Actor where index is 'first' (same as 1), 'last'1.0.2 or number. Optional speed1.0.10 parameter specifies the transition speed.
    • $(Stage).theatre('effect', name, effect); Register a custom animation object. See more bellow.


    Following events are supported by Theatre.

    • theatreReady fired on Stage object when Theatre initializes.
    • theatreMove fired on Stage object when Theatre moves to next animated Actor object.

    Attributes and Classes

    Following dynamic attributes are set by Theatre.

    • Attribute actors-count="integer" on Stage element - count of currently animated objects on the Stage
    • Attribute position-ord="integer" on Stage element - current position of the slider (1-based integer)
    • Attribute position="mixed" on Stage element - same as position-ord attribute but first and last keywords are used instead of "first" and "last" orinal number.
    • Class name thatre-actor-active slider's currently focused Actor object.
    • Class name thatre-actor-first on first animated Actor object.
    • Class name thatre-actor-last on last animated Actor object.
    • Class name active on the Paging element - represents currently focused actor.


    You can pass the array of settings to the theatre method: $(Stage).theatre(Settings); where Settings properties are:


    String containing the white-space separated effect names or object providing the effect.

    You can specify multiple white-space separated effect names - main effect and fall over effect(s) for the case that the browser is not capable of displaying selected effect.

    Possible values:

    1. responsive:slide2.6 - fully horizontally and vertically stretch-able bootstrap-compatible one-page slider. Displays always one Actor at the time and Actors are slid horizontally. Actor's width is supposed to be 100% to fill the whole Stage.
    2. responsive:fade2.6 - fully horizontally and vertically stretch-able bootstrap-compatible one-page slider. Displays always one Actor at the time and next Actor uses fade-in effect. Actor's width is supposed to be 100% to fill the whole Stage.
    3. responsive:filmstrip2.6 - can fit in visible area multiple Actors (unlike responsive:slide that expects only one visible Actor at the time). The height of the Actors will be made the same automatically to match the height of the tallest Actor. Width of the Actor objects can be different for each Actor.
    4. 3d - 3D ellipsis-based rotation
    5. horizontal - standard horizontal slider
    6. vertical - standard vertical slader
    7. fade - new Actor fades in overlaying the old Actor
    8. show - simple-switch slider
    9. slide - next Actor squeezes old Actor away
    10. css3:circle - pure CSS3-based animation effect
    11. css3:slide - pure CSS3-based animation effect
    12. css3:stack - pure CSS3-based animation effect
    13. custom effect name - name of your own custom effect (see Custom Effects)
    14. Effect - javascript object with Effect API implementation (see Custom Effects)

    Default: horizontal

    Example: $('#my').theatre({effect: 'css3:stack horizontal'}); /* if the browser does not support CSS3 transformations fall back to 'horizontal' effect */

    Animation speed in milliseconds. Default: 500
    Time between two animations. Default: 3000
    Start animations automatically. Default: true
    Display default next/previous/play/stop controls. Values: horizontal or vertical or none. Default: horizontal
    Set the width of the Stage or false to leave the original size. Default: false
    Set the height of the Stage or false to leave the original size. Default: false
    itemWidth 1.0.2
    false - don't resize; 'max' - maximum size; arbitrary size ('100px', '50%', ...). Default: false
    itemHeight 1.0.2
    false - don't resize; 'max' - maximum size; arbitrary size ('100px', '50%', ...). Default: false
    CSS selector to identify the Actors inside the Stage. Default: > *:not(".theatre-control")
    Optional callback method to be called before each animation. The target index and target displayed Actor1.0.5 is passed to the method. Callback context (this) is the Stage HTML element.
    Stage.theatre({onMove: function(idx, actor, theatre1.0.8) { doSomething(idx, actor);} }); If you return false from this method then movement will be cancelled. If you return number then Theatre will jump to returned position instead.

    1.0.8In addition to this an event theatreMove is fired on Stage element. So instad of onMove property you may use

    Stage.bind('theatreMove', function(idx, actor, theatre) {});

    Same as onMove callback but is called after the transition animation finishes. idx and actor parameters to this callback represent the currently active Actor. Unlike onMove the return value is ignored.

    Default: next . You can reverse the direction of rotation by supplying prev keyword.
    Default: false. If set to true then Actors will be reshuffled before Theatre initialization.
    Optional jQuery selector pointing to an element containing the button template. Children template element will be duplicated to match the number of actors and will gain the onClick functionality to jump to specified actor. If the template contains the string {#} then it will be replaced by ordinal actor number. Active button has always the active class name.
    <div id="myPaging"><button class="jump">{#}</button></div>
    Stage.theatre({paging: '#myPaging'});



    You can create fully customized paging buttons.

    		<div id="myPaging">
    		<!-- template button -->
    		<button>Jump to {#}</button>
    		<script type="text/javascript">
    		$('#myTest').theatre({…, paging: "#myPaging"});

    Paging can contain elements with more details:

    		<div id="myPaging">
    		  <div>In Depth</div>
    		<script type="text/javascript">
    		$('#myTest').theatre({…, paging: "#myPaging"});


    Full Simplified Example

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
    type="text/javascript" ></script>
    <link type="text/css" rel="stylesheet" href="…/theatre/theatre.css" />
    <script type="text/javascript" src="…/theatre/jquery.theatre.min.js"></script>

    <div id="demo">
    <div>My Item #1</div>
    <div>My Item #2</div>
    <div>My Item #3</div>

    <script type="text/javascript">
    $(function() {

    Full Advanced Example

    This example shows how to deal with images surrounded by links.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
    type="text/javascript" ></script>
    <link type="text/css" rel="stylesheet" href="…/theatre/theatre.css" />
    <script type="text/javascript" src="…/theatre/jquery.theatre.min.js"></script>

    <div id="demo">
    <a href="/detail1.jpg"><img src="/preview1.jpg"/></a>
    <a href="/detail2.jpg"><img src="/preview2.jpg"/></a>
    <a href="/detail3.jpg"><img src="/preview3.jpg"/></a>

    <div id="myPaging"><span class="button">Image #{#}</span></div>

    <script type="text/javascript">
    $(window).load(function() {
    selector: 'img', // We want to resize/rotate images and not links
    effect: '3d',
    speed: 1000,
    paging: '#myPaging'

    // $('#demo a').fancybox();

    Custom Effects

    Do you want to write your own JQuery carousel plugin or some other really fancy slideshow? Why to reinvent the wheel? Big deal of code that you are going to write is already in Elixon Theatre! Just use the Elixon Theatre as the base and fully focus on your core animation idea. We took a care of creating extremely easy and well thought out Effect API that you are going to love!

    Start writing your own Effect plugin for Theatre right away!

    Effect is a Javascript object implementing following methods:

    • init() - initialize the Stage
    • next() - jump to next Actor
    • prev() - jump to previous Actor
    • destroy() - remove all modifications made to the Stage
    • jump(idx) - optional. Optimized "jump to" routine. If not present then system automatically uses next()/prev() methods to reach a desired point.

    The Effect object is initialized as follows

    new Effect(Stage, Actors, Settings, Theatre)

    Effect Registration

    There are two ways how to register your effect. You can register it under new name or pass it as an object to a Settings

    • $.fn.theatre('effect', Name, Object);
    • $(Stage).theatre({effect: Object});


    Content of the effect.magnificent.js file (see Lazy Loaded Effects bellow for details):

    (function($) {
    var myEffect=function(stage, actors, settings, theatre) {
    this.init=function() {
    this.next=function() {
    actors.stop(true, true).css('z-index', 0).hide(settings.speed)
    .eq(theatre.index).css('z-index', 10).show(settings.speed);
    this.prev=function() {
    actors.stop(true, true).css('z-index', 0).hide(settings.speed)
    .eq(theatre.index).css('z-index', 10).show(settings.speed);
    this.destroy=function() {
    actors.stop(true, true).css({
    zIndex: '', top: '', left: '', position: '', margin: ''
    $.fn.theatre('effect', 'magnificent', myEffect);

    $(function() {
    $('#demo').theatre({effect: 'magnificent'});
    Since 1.0.1

    Lazy Loaded Effects

    There may be many effect ready to use. There is a lazy effect initialization supported to prevent loading all effects unnecessarily.

    If you evoke unknown effect then Theatre tries to include a javascript file of the same name effect.Name.js from the same directory as the base Theatre files.

    For example ('#demo').theatre({effect: 'moonlight'}); will load the script effect.moonlight.js and execute it. This script is supposed to register the Effect object by calling $.fn.theatre('effect', 'moonlight', Effect);

    Multiple Effects In One File

    One script may register multiple different effects. In that case the effects must be prefixed by file name.

    For example have a file effect.extra.js that introduces two effects crazy and reflection. In that case you have to prefix both names by the script name extra so the effect names will be extra:crazy and extra:reflection.

    When you call ('#demo').theatre({effect: 'extra:crazy'}); then Theatre will load the effect file with name extra (effect.extra.js) that is supposed to register the effect extra:crazy by calling $.fn.theatre('effect', 'extra:crazy', Effect); .