Efectos galería con JQuery y JavaScript

Efecto InnerFade con JQuery sencillo de implementar.

Recuerda hacer una copia de tu plantilla antes de las modificaciones.

 

Descárgate este archivo jquery.innerfade.js y súbelo a tu servidor de archivos (p.e. Google sites)

Puedes ver en esta entrada como alojar archivos en Google sites.

 

Ahora vamos a modificar la plantilla.

1.- Entra en Diseño – Edición HTML y antes de </head> copia y pega lo siguiente:

(Si ya tienes añadidas estas bibliotecas en tu plantilla, no hace falta que vuelvas a ponerlas, sólo se necesitan una vez. Con las que pongo aquí, tendrás cubiertos casi la mayoría de efectos)

<!-- Prototype, Scriptaculous y JQuery -->
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
google.load("jquery", "1.4");
google.load("jqueryui", "1.8");
</script>
<!-- FIN Prototype y Scriptaculous y JQuery -->

2.- Justo debajo copia y pega esto:

<!-- Script Innerfader con JQuery -->
<script src='http://sites.google.com/site/TU_SITIO/TU_PAGINA/jquery.innerfade.js' type='text/javascript'/>
<!-- FIN -->

(Si utilizas Google sites, sustituye TU_SITIO/TU_PAGINA por las tuyas.)

(Si lo deseas puedes utilizar: http://sites.google.com/site/pauscripts/scripts/jquery.innerfade.js )

(Si utilizas otro servidor de archivos, sustituye toda la dirección  http://TU_SERVIDOR/… /jquery.innerfade.js  )

 

y debajo copia y pega los estilos CSS de estos ejemplos. Hay tres, utiliza los que necesites. En negrita el principio y final del bloque de estilos.

<script type="text/javascript">
$(document).ready(
function(){
$('.news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});

$('.portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});

$('.fade').innerfade({
speed: 'slow',
timeout: 1000,
type: 'sequence',
containerheight: '1.5em'
});
}
);
</script>


 

Personalización:

$ = ID o class del elemento. En los ejemplos:  .news   .portofolio   .fade  

animationtype = Puede ser ‘fade’ o ‘slide’  (por defecto: ‘fade’)

speed = Velocidad en milisegundos o ‘slow’ ‘normal’ o ‘fast’ (por defecto: ‘normal’)

type = Tipo de aparición del efecto. 'sequence', 'random' o  'random_start' (por defecto: 'sequence')

timeout = Tiempo de espera en milisegundos (por defecto: 2000)

containerheight = Altura del contenedor (por defecto ‘auto’)

 

 

3.- Vamos a ver los ejemplos, puedes añadirlos en una entrada o en un elemento HTML.

Ejemplo:  “news”  -  Puedes usarlo como un rotativo de noticias sólo con textos o textos con enlaces. Este ejemplo es con enlaces pero para el ejemplo no conectan con ninguna página.

 

1 Lorem ipsum dolor

2 Sit amet, consectetuer

3 Sdipiscing elit,

4 sed diam nonummy nibh euismod tincidunt ut

5 Nec Lorem.

6 Et eget.

7 Leo orci pede.

8 Ratio randorus wil.

 

Este es el código:

<div class="news">
<li>
<a href="#n1">1 Lorem ipsum dolor</a>
</li>
<li>
<a href="#n2">2 Sit amet, consectetuer</a>
</li>
<li>
<a href="#n3">3 Sdipiscing elit,</a>
</li>
<li>
<a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a>
</li>
<li>
<a href="#n5">5 Nec Lorem.</a>
</li>
<li>
<a href="#n6">6 Et eget.</a>
</li>
<li>
<a href="#n7">7 Leo orci pede.</a>
</li>
<li>
<a href="#n8">8 Ratio randorus wil.</a>
</li>
</div>


 

Ejemplo:  “portofolio”  -  Puedes usarlo como un rotativo de imágenes o imágenes con enlace. Este ejemplo es de imágenes sin enlace, sólo a modo de slide.

 

Este es el código:

 

<div class="portfolio">

<p><img src="URL_IMAGEN_1" /></p>

<p><img src="URL_IMAGEN_2" /></p>

<p><img src="URL_IMAGEN_3" /></p>

<p><img src="URL_IMAGEN_4" /></p>

<p><img src="URL_IMAGEN_5" /></p>

</div>


 

Cambia las URL_IMAGEN_… por las tuyas. Puedes añadir tantas como quieras antes de </div>

Ejemplo:  “fade”  -  Puedes usarlo para dos elementos relacionados o al azar. Pueden ser textos, imágenes, con o sin enlaces. Aplica tu creatividad. Este es un ejemplo simple.

1

2

3

4

5

6

7

8

9

10

Uno

Dos

Tres

Cuatro

Cinco

Seis

Siete

Ocho

Nueve

Diez

 

Este es el código:

<div class="fade">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>

<div class="fade">
<p>Uno</p>
<p>Dos</p>
<p>Tres</p>
<p>Cuatro</p>
<p>Cinco</p>
<p>Seis</p>
<p>Siete</p>
<p>Ocho</p>
<p>Nueve</p>
<p>Diez</p>
</div>


 

 

Ya veis, el efecto innerfade puede daros mucho juego en la web o blog.

Espero que os sirva.