Web X.1

Aquí nos gustaría presentaros un práctico y sobre todo sencillo script FADED que ha hecho Nathan Searles. Es muy fácil de configurar y diseñar a tu gusto.

Sus características son:

Una vez sabemos lo que podemos hacer, vamos a crear un ejemplo para un caso de una galería de imágenes.

Lo primero de todo es crear una lista con las imágenes indicando como id de la capa "faded":

PLAIN TEXT

HTML:

1.  <div id="faded">

2.  <div><img src="01.jpg" alt="Mi imagen1" />

3.  <img src="02.jpg" alt="Mi imagen2" />

4.  <img src="03.jpg" alt="Mi imagen3" />

5.  <img src="04.jpg" alt="Mi imagen4" /></div>

6.  <a class="prev" href="#">prev</a>

7.  <a class="next" href="#">next</a>

9.  </div>

Inicializamos:

PLAIN TEXT

JAVASCRIPT:

1.  <script type="text/javascript">// <![CDATA[

2.    $(function(){

3.      $("#faded").faded();

4.    });

5.  // ]]></script>

Podemos configurar los siguientes valores:

PLAIN TEXT

JAVASCRIPT:

1.  speed: 300, // sets animation speed.

2.  crossfade: false, // crossfades content.

3.  bigtarget: false, // click content for next.

4.  loading: false, // for images only, checks if first image is loaded before showing it.

5.  autoheight: false, // auto adjust height.

6.  pagination: "pagination", // sets true and class name for pagination. set to false to disable this feature.

7.  autopagination: true, // set to true to auto generate pagination.

8.  nextbtn: "next", // next button class.

9.  prevbtn: "prev", // previous button class.

10. loadingimg: false, // location of loading image (e.g."/img/loading.gif") if using loading.

11. autoplay: false, // auto play of content. set to positive number for true. also sets time interval. use 1000 for 1 second.

12. autorestart: false, // auto restart if auto play stopped. set to positive number for true. also sets time interval. use 1000 for 1 second.

13. random: false // set to true to randomize order

Ahora ya podemos hacer el efecto desvanecimiento en la galería. Para ver el resultado podéis acceder a la demo:       

Descargar el código: