image-transition.jpg

The image transition manager, una biblioteca javascript basada en scriptaculous y prototype, que nos brinda otra opción para lograr bonitas transiciones en nuestras imágenes. Soporta transiciones como fading( desvanecimiento), appearing (que aparecen de la nada), Sliding (deslizamiento), growing and shrinking (reducción o viceversa).
Características:

  • 8 (más por venir), efectos de transición
  • Imagen de precarga visible
  • Unobstrusive javascript
  • Fácil de implementar cada Transición
  • Probado en Firefox, Opera y IE6 / 7
  • No usa CSS, pero claro, será útil para darle un estilo mas agradable.

VER DEMO - DESCARGA
Comenzar a Usar:
Como este javascript se basa en prototype y script.aculo.us, es necesario que realicemos las llamadas a ellos desde nuestro encabezado. < head >…
Nota: ya que existen algunos problemas con la compatibilidad de scriptaculous 1,7 y prototype 1.5.1.1, se ha utilizado la versión 1.5.1.1 de prototype y 1.7.3 beta de scriptaculous. Se incluyen en el paquete de descarga.

PLAIN TEXT
JavaScript:
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js?load=effects" type="text/javascript"></script>

Después de esto, es hora de incluir nuestro javascript que nos permitirá lograr las transiciones.

PLAIN TEXT
JavaScript:
<script src="javascript/transition.js" type="text/javascript"></script>

Agregamos la navegación para nuestras imágenes mediante hipervínculos, y añadiremos también el atributo “rel” donde especificaremos que transición deseamos para cada una de ellas Ej: rel="transition[blinddown]"

PLAIN TEXT
HTML:
<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>

Creamos un div-elemento en el que tendrán lugar las transiciones

PLAIN TEXT
HTML:
<div id="holder" style="border: 5px solid #999; width: 640px; height: 480px;float:left">
                <img src="image1.jpg" />
            </div>

    <script type="text/javascript">
        oTransition = new Transition( 'holder', 'image1.jpg' );
    </script>