MooTools Plugin to handle a slide show on any element using Fx.Morph.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Demo
Docs
Source
README.md
package.yml
screenshot.png

README.md

Fx.ElementSwap

Fx.ElementSwap is a Slide Show class that will swap between any element using Fx.MorphElement to create the slide show effects.

Inherits methods, properties, options and events from ElementSwap.

Screenshot

Extends

Requirements

How to use

Syntax

#JS
var myElSwap = new Fx.ElementSwap(elements[, options]);

Arguments

  1. elements - (mixed) A collection of elements to add. Takes the same arguments as $$
  2. options - (object, optional) An object with options. See ElementSwap for options and below for extra options.

Options

  • TransitionFx - (object defaults to:{transition: 'linear',duration: 'long',onStart: function() {this.element.setStyle('overflow', 'hidden');},onComplete: function() {this.element.setStyle('overflow', 'auto');}}) see Fx.MorphElement for available options.
  • showFx - (string: defauts to 'slide:right') the fx to use when showing the slide.
  • hideFx - (string: defauts to 'slide:left') the fx to use when hiding the slide
  • wait - (boolean: defauts to true) whether to wait to execute the endFx after the startFx or run them together.

Events

See ElementSwap for all available events.

Returns:

  • (object) A new ElementSwap instance.

Example:

JavaScript

#JS
var elSwap = new ElementSwap('.div_swap');

CSS

#CSS
#el1 {background-color:#f00;}
#el2 {background-color:#0f0;}
#el3 {background-color:#00f;}

.div_swap {
    position:absolute;
    top:0px;
    width:300px;
    height:300px;
    z-index:0;
    display:none;
}

.active { display:block; z-index:1;}

.elementSwap {
    position:relative;
    width:300px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

HTML

#HTML
<div id="el1" class="div_swap"><p>DIV 1</p></div>
<div id="el2" class="div_swap"><p>DIV 2</p></div>
<div id="el3" class="div_swap"><p>DIV 3</p></div>