 |
Slideshow jQuery plugin for many soft and advanced visual effects.
|
 |
CreateThumbnail TransitionBox SeeColors FolderWasher TexFinderX /= |
TransitionBox 1.13
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.
Play with settings and then click the 'Show' buttons to see the effect.
|
API settings
API show / hide
|
||||||||
Quick start
Here is the simplest possible TransitionBox initialization:
Step 1: define a block element in your HTML code where to display images
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
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
// now all 'show' or 'hide' calls will be processed with these settings
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.
|
|
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. |