Slider de contenido con Scriptaculous

Para quien use sliders de alguna clase, glider.js es un script que requiere Prototype y Scriptaculous para crear pestañas donde se coloca cualquier tipo de contenido. Es la misma que se mostraba en el slideshow y tiene la particularidad de poder ser utilizada múltiples veces en una misma página.

En este demo, también hay alguna modificación del original que puede ser descargado desde la página del autor porque en el caso de Blogegr, se utilizan algunos nombres de clases que son incompatibles con las plantillas.

Al igual que antes, si no tenemos las librerías debemos agregarlas antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>

Luego, el script en si mismo que cargamos desde un archivo externo:

<script src='URL_scriptaculous_gliderSOLAPAS.js' type='text/javascript'></script>

o lo agregamos directamente a la plantilla:

<script type='text/javascript'>
//<![CDATA[
... aquí copiamos y pegamos el contenido del archivo ...
//]]>
</script>

Y luego, otra vez el CSS mínimo:

<style type='text/css'>
/* el contenedor superior donde se mostrarán los enlaces a cada solapa */
ul.controles {
list-style-type:none;
margin: 0;
padding:0 ;
}
ul.controles li {
list-style-type:none;
margin: 0;
padding:0 ;
}
ul.controles li a { ... }
ul.controles li a:hover { ... }

/* el contendedor donde se mostrarán las solapas */
div.elscroller { /* lo dimensionamos a gusto */
height: 250px;
overflow: hidden;
width:600px;
}
div.contenidoSOLAPAS { /* le vamos a dar un ancho con un valor extremadamente alto para que entren todas */
margin: 0;
padding: 0;
width: 100000px;
}
div.seccion { /* dimensionamos los DIVs de cada solapa */
float: left;
height: 210px;
margin: 0;
overflow: hidden;
padding: 20px;
width: 560px;
}

/* el contendor con la navegación inferior que pueden ser textos o imágenes*/
div.navegaSOLAPAS { /* lo dimensiono */
clear: both;
height: 45px;
margin: 0 auto;
width: 500px;
}
div.navegaSOLAPAS a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.navegaSOLAPAS a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }
</style>

Y ahora el HTML que puede ir tanto en la platilla como en una entrada:

<div id="gliderSolapas">
<ul class="controles">
<li><a href="#seccion1"> texto o imagen 1</a></li>
<li><a href="#seccion2"> texto o imagen 2 </a></li>
<li><a href="#seccion3"> texto o imagen 3 </a></li>
</ul>
<div class="elscroller">
<div class="contenidoSOLAPAS">
<div class="seccion" id="seccion1">
....... aquí ponemos el contenido de la solapa 1 .......
</div>
<div class="seccion" id="seccion2">
....... aquí ponemos el contenido de la solapa 2 .......
</div>
<div class="seccion" id="seccion3">
....... aquí ponemos el contenido de la solapa 3 .......
</div>
.......
</div>
</div>
</div>
<div class="navegaSOLAPAS">
<a href="#" onclick="gliderDEMOsolapas.previous();return false;"> anterior </a>
<a href="#" onclick="gliderDEMOsolapas.next();return false"> siguiente </a>
</div>
<script type="text/javascript">
var gliderDEMOsolapas = new GliderSOLAPAS('gliderSolapas', {duration:0.5});
</script>

En el CSS se ve que cada solapa está en un DIV cuya clase, en este ejemplo, es seccion y están definidas como flotantes usando float: left pero ¿qué pasa si no flotaran o si les agregáramos la propiedad clear:both? Pués entonces, el desplazamiento no sería horizontal sino vertical; colóquense en la primera solapa y prueben el ejemplo, haciendo click en los enlaces para permutar entre uno y otro modo: