Pruebas - microfilosofia

• 
  

  el título del slide 1

La pestaña Nº 3

Nullam aliquet, orci at vehicula malesuada, orci augue lacinia nulla, at aliquam turpis elit volutpat velit. Maecenas quis augue in velit interdum imperdiet. Cras odio augue, commodo quis auctor a, tempus eu felis. Morbi interdum elit eget nulla pellentes.
• 
  

  el título del slide 2

  ....... el contenido del primer slide .......
• 
  

  el título del slide 3

  ....... el contenido del primer slide .......

• Pestaña 1
  
• Pestaña 2
• Pestaña 3

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>