JMiur [E]

Este es un slideshow que utiliza jQuery para mostrar cualquier clase de contenido en una lista muy simple. Por defecto, el el efecto de scroll es automático y las velocidades son configurables modificando algunos pocos datos.

Primero, agregamos los scripts antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>
Como utiliza un plugin llamado jQuery Cycle plugin, debemos descargarlo y alojarlo en algún servidor:
<script src='URL_jquery.cycle.js' type='text/javascript'/>
o bien copiar su contenido y pegarlo en la plantilla:
<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo jquery.cycle.js ...
//]]>
</script>
El tercer script es el que controla las funciones y su contenido puede descargarse en este archivo de texto; lo agregamos usando CDATA:
<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo slideshow.js ...
//]]>
</script>
y es ahí donde hay una serie de datos que podemos personalizar; básicamente, la velocidad que se controla con tres variables:
timeout: 1000, // time before next slide appears (in ms)
slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 300, // time it takes to slide in each slide (in ms) when clicking through tabs
La personalización es puro CSS así que ponemos las reglas elementales:
<stylet>
/* el contenedor principal */
#slideshow {
background-color: #EEE;
width: 600px; /* definimos el ancho total */
}
#slideshow ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 1%; /* IE fix */
}
#slideshow ul:after {
clear: both;
content: &quot;.&quot;;
display: block;
height: 0;
visibility: hidden;
}
/* el contenido de los slides */
#slideshow .slides {
color: #000;
overflow: hidden;
width: 550px;
}
#slideshow .slides ul {
width: 1800px; /* es el ancho multiplicado por la cantidad de slides */
}
#slideshow .slides li {
float: left;
padding: 20px;
width: 560px; /* es el ancho ,enos el padding horizontal */
}
#slideshow .slides h2 { /* los títulos de cada slide */
margin-top: 0;
}
/* la barra navegadora inferior */
#slideshow .slides-nav {
background-color: #101921;
}
#slideshow .slides-nav li {
float: left;
}
#slideshow .slides-nav li a {
color: #FFF;
display: block;
padding: 5px 20px;
outline: none;
}
/* la pestaña activa */
.js #slideshow .slides-nav li.on,.js #slideshow .slides-nav li.on a {
background-color: #EEE;
}
.js #slideshow .slides-nav li.on a {
color: #000;
}
</stylet>



¿Cómo lo utilizamos?

Podemos agregarlo en una entrada, en un elemento HTML o directamente en la plantilla:
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2> el título del slide 1 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
<li id="slide-two">
<h2> el título del slide 2 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
<li id="slide-three">
<h2> el título del slide 3 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
</ul>
</div>
<ul class="slides-nav">
<li class="on"><a href="#slide-one"> Pestaña 1 </a>
<li><a href="#slide-two"> Pestaña 2 </a></li>
<li><a href="#slide-three"> Pestaña 3 </a></li>
</ul>
</div>

REFERENCIAS:net.tutsplus.com/

15 comentarios:

SDK  

Esto lo ocupaba ayer, hoy ya no me sirve xD. Estas cosas son muy útiles, gracias.

Responder
Graciela  

Precioso, genial Jmiur, estoy jugando con jQuery ahora :D

Responder
La hormiguita  

Esta bueno, pero entran pocas pestañas, se las puede convertir en enlaces y así serviria de menú?
Gracias :)

Responder
JMiur  

Entra la cantidad de pestañas que se quiera, no hay limitaciones en eso.

Responder
Sirius  

¿uno puede hacer que no se mueva cada cierto tiempo?

Responder
Sirius  

¿en que parte de la plantilla se pega lo del CDATA?

Responder
JMiur  

Las variables que controlan la velocidad son las que están en el post, desconozco si hay más o si hay variaciones.

El script se coloca antes de </head>

Responder
FREDDY  

hola, me encanta vagabundia aunque soy un aficionado al blogger aun, el css que nos pones me deja el blog se puebas de diferente manera :(
el tuyo blanco se ve bien chido, me podrias decir que codigo del css cambiaste para que se viera asi?? grax
te dejo la url de blog para que veas como se esta
http://mek-tronik.blogspot.com/

Responder
JMiur  

El CSS es el que está en el post, no hay grandes diferencias; el color es el que está en background
background-color: #EEE;

Responder
Erick_M3A  

Muchas gracias me quedo excelente.. el único problema que he detectado es que con CHROME no funciona bien.. se corta a la mitad,, pensé que era el mio así que probé mirar el que tienes aquí y sucede lo mismo..

Saludos

Responder
JMiur  

Desconozco.por qué pasa eso, evidentemente, Chrome, calcula una altura distinta pero no sé cóm ose soluciona; deberás consultar con los desarrolladores del script.

Responder
EmmaX  

hola jmiur, mira no se si esto va a sonar fuera de lugar o grosero.. pero sabes si es posible instalar esto en un foro php??

Responder
JMiur  

Así, en general, puede ser agregado a cualquier tipo de página así que no veo motivos por los cuales no pueda agregarse a un foro si es que se puede editar el código de ese foro, claro.

Responder
Yurika-Chan  

JMiur lo implemente sin problemas, pero he encontrado un error que no pude arreglar, quiero que cuando de Click en pestaña 2 sea la que tenga el id="pestaña 2" y no la segunda pestaña, ya que cuando doy click va en orden sin importar cual tenga el id, me hice entender???

JMiur  

Pués tendrás que ver si puedes modificar el script para que haga eso ya que, justamente, es "cíclico" porque realiza ese proceso ordenado.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR