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

Nice script, but can I use multiple instances? I want three times a set of multiple pictures. Thanks in advance!

Thanks,

Ben

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

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 ))

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

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

This is an example of what I’m talking about:
http://www.tagheuer.com/the-collection/index.lbl?lang=en

Thanks!
T.

Thx !