Image Transition Manager: image transitions with scriptaculous
The image transition manager is a javascript library based on scriptaculous and prototype. It supports several image transitions, such as fading, appearing, sliding, growing and shrinking. Because it uses the unobtrusive javascript technique, no inline javascript is needed and hyperlinks still function when javascript is disabled.
The image transaction manager features:
- 8 (more to come) image transition effects
- Visible image preloading
- Unobstrusive javascript (no inline javascript in you html-document)
- Easy to use Transition object
- Corssbrowser: tested in Firefox 2.x, Opera and IE6/7
- No CSS involved
Cool! How does it work?
First of all, since this library is based on based on prototype and script.aculo.us, you have to include these in your html:
<script src="javascript/prototype.js" type="text/javascript"></script> <script src="javascript/scriptaculous.js?load=effects" type="text/javascript"></script>
As you can see, only scriptaculous' effects library is used. Note: since there are some troubles with the compatibility of scriptaculous 1.7 and prototype 1.5.1.1, we use prototype version 1.5.1.1 and scriptaculous version 1.7.3 beta. They are included in the download package.
After this, include the transition library in your html:
<script src="javascript/transition.js" type="text/javascript"></script>
After this, hyperlink your images the usual way, and add the transition to the rel attribute, like this (in this examples the hyperlinks are structured in an unordered list):
<ul> <li><a href="image1.jpg" rel="transition[switchoff]">image1.jpg</a></li> <li><a href="image2.jpg" rel="transition[slidedown]">image2.jpg</a></li> <li><a href="image3.jpg" rel="transition[blinddown]">image3.jpg</a></li> <li><a href="image4.jpg" rel="transition[slideright]">image4.jpg</a></li> <li><a href="image5.jpg" rel="transition[appear]">image5.jpg</a></li> <li><a href="image6.jpg" rel="transition[switch]">image6.jpg</a></li> <li><a href="image7.jpg" rel="transition[blinddown]">image7.jpg</a></li> <li><a href="image8.jpg" rel="transition[grow]">image8.jpg</a></li> <li><a href="image9.jpg" rel="transition[shrink]">image9.jpg</a></li> </ul>
Inside the block arrows you can define the transition that takes place when the hyperlink is clicked. The possibilites are appear, switch, slidedown, slideright, grow, shrink, blinddown and switchoff. Then create an holder (div-element) in which the transitions take place:
<p id="holder" style="border: 5px solid #999999; width: 640px; height: 480px; float: left"> <img src="image1.jpg" />
Initially the first image is showed inside the holder. Ok, the last thing you have to do is create an instance of the Transition class:
oTransition = new Transition( 'holder', 'image1.jpg' );
The first parameter of the Transition constructor is the id of the holder element (in this case 'holder'). The second is the image that initially will be loaded. Thats all, when clicked on the images the effect will take place!
Is this a beta?
Yes, we would like to hear your comments.
[…] Image Gallery (scrptaculous) […]
Pingback by Links for 29 October 2007(Rails, Dsl, JavaScript, CSS, TextMate) « exceptionz — October 29, 2007 @ 5:38 am
[…] proudly presents… the Image Transition Manager. The Image Transition Manager is a javascript library based on scriptaculous and prototype. It […]
Pingback by Ajaxorized » The Image Transition Manager — October 30, 2007 @ 3:57 pm
Works perfect in Safari and Firefox on OSX Leopard
Comment by Joris Vincken — November 13, 2007 @ 12:58 am
What license is this script released under - can we use it for free in our comercial software?
Comment by Martin Dan — November 14, 2007 @ 11:29 am
You’re right, we should mention that on this page. The answer is ‘Yes’. You can use it for commercial software. If possible, we’d love to see the results
Comment by martijn — November 19, 2007 @ 12:47 pm
The kissup:
excellent script!
The request:
How would I go about triggering a transition w/o a physical link? I want to use a periodicalExecutor() to iterate through an array of images. Simply running
new Transition( ‘logo’, ‘images/’+pic+’.jpg’ );
re-instantiates a transition so I can’t do a nice cross-fade between the images.
The second kissup:
Again, thanks for the excellent clean script!
-Kevin
Comment by Kevin — December 23, 2007 @ 8:55 am
Sweet stuff. Just the type of solution I’ve been looking for. Being very new to Prototypes though, is there a way to run these transitions without the use of hyperlinks? I’m wanting to ad crossbroswer transitions to rotating images if possible. Keep up the excellent work!
Comment by daneck — December 28, 2007 @ 7:40 pm
Hi,
Nice script, but can I use multiple instances? I want three times a set of multiple pictures. Thanks in advance!
Comment by blok — January 23, 2008 @ 8:06 pm
Is there a way to automate this, like a simple slideshow, without the links?
Thanks,
Ben
Comment by Ben — January 24, 2008 @ 12:06 pm
Hi all,
Thanks for your comments! It’s great to see that we created a script that is actually is being used. So if you have any examples of your implementations, we’d love to see it
About all the “can i do this” or “is there a way to do that” I can say use your imagination
We introduced a concept for image transitions in a clean and unobstrusive way, so you’re free to adjust the script in every way you like.
Martijn
Comment by martijn — January 24, 2008 @ 12:46 pm
Great script…any ideas to make it support SWF´s?????
Comment by David — January 29, 2008 @ 1:09 pm
Hi guys, great work …
I’ve been wondering why those images ignore my text-align:center; of the containing element, when it kicked me. I’ve done some little addition to simulate image centering, when needed, so if you’re interested, this is it:
The base JS script (transition.js) needs to be modified a bit:
loadImage: function( p_eAnchor ) {
// Get transition type and image url.
var sTransition = /^transition\[([^,]+),?\d*\]$/.exec( p_eAnchor.getAttribute( ‘rel’ ) )[ 1 ];
var imgPosition = /^transition\[[^,]+,?(.*)\]$/.exec( p_eAnchor.getAttribute( ‘rel’ ) )[ 1 ];
if( !imgPosition ) imgPosition = 0;
var sImage = p_eAnchor.getAttribute( ‘href’ );
var eImage = document.createElement( ‘img’ );
eImage.setAttribute( ’src’, sImage );
$(eImage).setStyle( { position: ‘absolute’, left: imgPosition + ‘px’, top: ‘0px’, opacity: ‘0′ } );
//—– this is the end of the modifications
Then you can (don’t HAVE TO) use rel=”transition[appear,100]” where 100 is pixel value of css “left” property when positioning absolutely. That value you have to calculate manually or let the server to do it for you, for example in PHP:
$wrapperWidth = 580;
$size = getimagesize( $file );
if( ($position = floor($wrapperWidth / 2 - $size[0] / 2 ))
Comment by pog — February 2, 2008 @ 2:44 pm
Thanks pog, very good contribution!
Comment by Willem — February 3, 2008 @ 1:54 pm
[…] proudly presents… the Image Transition Manager. The Image Transition Manager is a javascript library based on scriptaculous and prototype. It […]
Pingback by noisylime » Blog Archive » Image Transition Manager — February 12, 2008 @ 5:33 pm
Hi,
I was searching the Net for the most appropriate JS to power my future gallery and guess what - You won! Great, great job!
One thing that maybe can be changed - effect should not be fixed with the image - same picture always got same effect. But that minor stuff…
Overall impression - very usefull
Comment by Milan — March 4, 2008 @ 3:30 pm
This script leaks, especially in IE. You should be closing the observer after using it.
Current code:
Event.observe( eImage, ‘load’, this._onLoad.bindAsEventListener( null, this, eImage, sTransition ) );
Patched example:
this.bfx = this._onLoad.bindAsEventListener(null, this, eImage, sTransition);
Event.observe(eImage, ‘load’, this.bfx);
And then stop the observer in the _onLoad function with:
Event.stopObserving(eImage, ‘load’, this.bfx);
(sorry for using different coding style ;))
Ok, so this saves us about a meg per image in IE. Now, lets see how to create a slideshow.
First of all, you have to get rid of the initialize function and move the needed variables into the loadImage function. Well, the only magic (besides creating and cycling an array) is to cycle the script once in a while. You shouldn’t be using prototype’s periodicalExecutor for that task. Instead you should use javascript’s setTimeout() at the end of the _transImage function and make it call loadImage(), but be careful about the global scope problems. 
Take care,
Žiga Sancin aka bisi
Comment by Žiga Sancin — March 14, 2008 @ 4:52 pm
Is there anyway to keep the href an actual link to a page but still have the effect of changing the image? I changed eAnchor.onclick to eAnchor.onmouseover in the transitions.js file which works as I need it, but I need it to change the image in the “holder” div onmouseover and still have a normal link to another page.
This is an example of what I’m talking about:
http://www.tagheuer.com/the-collection/index.lbl?lang=en
Thanks!
T.
Comment by Tom — April 17, 2008 @ 1:06 am
very nice really really nice
Comment by kashif — April 18, 2008 @ 8:58 am
great job man! thx!
Comment by sohbet odaları — May 21, 2008 @ 9:04 pm
I was wondering if there was a way to find the height and width of each image to have a dynamic #holder that can change based on the image size. Right now all the images have to be exactly the same size for it to work. Solutions anyone? I don’t know enough about JS yet to figure it out, but I am sure that’s possible somehow. Thanks a ton!! Nice work all around on this one.
AD
Comment by AdamDogbark — June 5, 2008 @ 9:41 pm
[…] Image Transitions with Scriptaculous Bookmark It Tags: scriptaculous This entry was posted on Thursday, June 12th, 2008 at 12:21 pm and is filed under Web galleries. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]
Pingback by Image Transitions with Scriptaculous | Stack5 — June 12, 2008 @ 12:22 pm
thanks
Comment by hakan — June 16, 2008 @ 9:36 pm
Nice Script but is there a solution to combine it with a lightview effect ?
I load my thumnail with your script but i can’t zoom on it after :/
Thx !
Comment by Elie — June 20, 2008 @ 4:51 am