Skrypt zmienia zdjęcia po kliknięciu w odpowiedni link. Można zdefiniować różne efekty przejścia między plikami graficznymi.

Przykład:

http://ajaxorized.com/image-transition-manager/

Pliki:

• prototype.js
• scriptaculous.js
• transition.js

Kod (head):

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”transition.js”></script>

Kod (body):

<style>
#leftCol, #rightCol {
float:left;
margin:10px;
}
</style>
<div id = “sampleDiv”>
<div id = “leftCol”>
<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>
</div>
<div id = “rightCol”>
<div id=”holder” style=”border: 5px solid #999; width: 640px; height: 480px;float:left”>
<img src=”image1.jpg” width=”70%”/>
</div>
</div>

</div>
<script type=”text/javascript”>
oTransition = new Transition( ‘holder’, ‘image1.jpg’ );
</script>

Źródło:

http://freeajaxscripts.net/directory/Ajax_Image_Galleries/Ajax_Image_Transition_Manager/details.html