TransitionBox 1.13
TransitionBox

Slideshow jQuery plugin for many soft and advanced visual effects.
This jQuery TransitionBox plugin is dedicated to images transition. It allows soft and customizable transitions between images.



Main features

While most of existing visual effects plugins only work for a given element size, TransitionBox accepts images of different size to be animated

Easy to use and highly customizable with numerous effects and easing

No CSS needed

Accepts callbacks

Preserve jQuery chainability



Demo
This demo contains several images with different format: horizontal, vertical and square.
Play with settings and then click the 'Show' buttons to see the effect.


Get config
API settings
FadeOut
 true        false

Duration

Easing
Effect

API show / hide
Show Horizontal
Show Vertical
Show Square
Hide
Clear cache


Quick start
Here is the simplest possible TransitionBox initialization:

Step 1: define a block element in your HTML code where to display images
<div id="myImageZone"></div>
Step 2: on document-ready event, attach a TransitionBox API to your block element with the desired width. If not specified, height will be equal to height.
var myTransitionBoxApi = $('#myImageZone').transitionBox({"width" : 400}); // a 400 pixels square zone
Step 3: on any click or event you defined, just call the TransitionBox API to display an image
myTransitionBoxApi.show('myImage.jpg');


Advanced configuration
Here is a list of all available configuration options with the TransitionBox API:

Methods Return value Description
show ([str imageResourceFile [,str effect [,int duration [,str easing [,bool fadeOut [,fcn callBack]]]]]) API Displays an image in the defined block element with effect, duration, easing, fade out and callback.
hide ([str effect [,int duration [,str easing [,bool fadeOut [,fcn callBack]]]]]) API Hides displayed image in the defined block element with effect, duration, easing and callback.
clearCache () API Clears cached image (the one that was previously displayed).
Useful to make transition sharpen, and also in some cases to start a new display.
image ([str imageResourceFile]) string
API
Get displayed image.
Set image to display (API string settings).
effect ([str effect]) string
API
Get current effect.
Set effect (API string settings), case non sensitive. See all available effects in the demo section.
duration ([int duration]) integer
API
Get current duration.
Set duration (API integer settings)
easing ([str easing]) string
API
Get current easing.
Set easing (API string settings), case non sensitive. See all available easings in the demo section.
fadeOut ([boolean]) boolean
API
Get current fadeOut.
Set fadeOut (API boolean settings)
FadeOut is useful for images of different size. Set 'fadeOut' to false to make transitions sharpened.
getImage () jQuery object Returns main image as a jQuery object
Useful for binding some action to image.
getRoot () jQuery object Returns the main transition box element as a jQuery object.
getConf () JS object Returns the configuration for the TransitionBox instance.
All properties of this object can be modified on the fly, except the ones in red. Changes are dynamically reflected in the behaviour of the associated TransitionBox.
Default values are:
     width : 400 // pixels
     height : 400 // pixels
     image : "" // image file resource as string
     effect : "fade" // effect name
     duration : 600 // microseconds
     easing : "linear" // easing name
     fadeOut : true
     api : true // returns API instead of jQuery object


Examples
Here are some TransitionBox call examples:

Modify settings
API.effect('flipVertical').duration(2000);
// now all 'show' or 'hide' calls will be processed with these settings
Modify effect on the fly and show image with chainability
API.image('myPictures/myPhoto.jpg').effect('slideleft').easing('easeInQuad').fadeOut(false).show();
Binding click on image and adding a CSS cursor
API.getImage().css("cursor", "pointer").click(myClickFunction);
Using callback
API.hide('zoom',1500,'easeInQuad',false,function() {alert('Gone!')});


Credits

TransitionBox uses some Robert Penners easing equations for the easing option.



Requirements

TransitionBox requires jQuery 1.4.2 or newer (not tested with older jQuery versions but it should work).



Free download
TransitionBox is distributed as freeware, so it can be used for free but can not be sold.

TransitionBox


Disclaimer
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


Version history
1.13 2012.04.14 Quick fix for Safari 5.1.5 Macintosh image cache problem.
1.11 2012.02.04 Undefined CSS images border bug (with IE 7 and 8) fixed.
1.10 2011.03.15 First 'show' call Safari bug fixed.
Positionning fixed again.
'easeOutSoftBounce' easing modified.
'flip' effects cosmetic bug fixed.
1.09 2010.10.25 First positionning mini-bug fixed.
1.08 2010.10.25 Easing added.
1.07 2010.10.18 First public release.