Hace poco Violeta me estaba pidiendo encontrar una forma para insertar un slider dentro de la página que mostrar en forma de carrusel para mostrar los enlaces hacia la página de eventos, este efecto tan llamativo se puede lograr en unos pocos pasos y aquí les enseñaré como hacerlo.
Como primero paso tendremos que definir el tamaño de nuestras imágenes, estas deben tener el mismo tamaño todas y cada una de ellas, en el caso del carrusel de eventos estoy utilizando imágenes de 488px de ancho por 137px de alto, a partir de ahí podremos dar formato o especificar algunas características del contenedor de nuestro slider.
Definimos el html:
El html del slider viene a ser como el esqueleto del carrusel, es decir la estructura básica, que si lo dejamos tal y como está se verán las imágenes en una lista una tras otra.
El código para realizar este esqueleto se basa en lo siguiente:
<div class="slideshow">
<a target="_blank" href="enlace"><img height="137" width="488" src="enlace" /></a>
<a target="_blank" href="http://www.altaeducacion.org/page/el-proposito-del-autismo-1"><img height="137" width="488" src="ruta de imagen" /></a>
<a target="_blank" href="enlace"><img height="137" width="488" src="ruta de imagen" /></a>
<a target="_blank" href="enlace"><img height="137" width="488" src="ruta de imagen" /></a>
</div>
<br />
<div style="text-align: center;"><a name="prev" href="#" id="prev">«Anterior</a> | <a name="next" href="#" id="next">Siguiente »</a></div>
Lo anterior es la base para empezar, el código inicia con un contenedor con clase slideshow "<div class="slideshow">, 4 imágenes enlazadas a una URL específica, luego cerramos el contenedor anterior "</div>"; sigue con un salto de página <br />, y finalmente con nuestras opciones de navegación, anterior siguiente, cada uno dentro de un contenedor para centrar estas opciones, luego dos enlaces donde en la URL especificamos "#", aquí no vamos a enlazar a ninguna página si no que esto nos va a permitir avanzar mediante un script hacia la siguiente imagen o retroceder a la anterior y luego también cerramos el contenedor para el centrado de este pequeño menú.
Aplicando formato CSS:
El CSS ú hojas de estilo de cascada, nos permite brindar formato al esqueleto anterior, por ejemplo, asignarle el tamaño, color de fondo, color y grosor de bordes, tamaño, tipo y color de fuente, entre otras cosas, a continuación tienen el código CSS para esta pequeña práctica.
<style type="text/css">
.slideshow { height: 142px; width: 488px; margin: auto }
.slideshow img { padding: 2px; border: 1px solid #ccc; background-color: #fff; }
</style>
Para explicar el código anterior, recuerdan que a al contenedor principal le asignamos la clase slideshow, pues aquí en CSS le vamos a aplicar formato teniendo en cuenta esa clase, esto se aplica identificando el contenedor ".slideshow", tengamos en cuenta que si le hemos asignado un ID en lugar de CLASS, en CSS tendríamos que darle formato de la siguiente forma: "#slideshow"
Bien, al contenedor le estamos asignando un alto de 142 px, un ancho de 488px, el mismo que el ancho de las imágenes, y un margen automático; ahora también le podemos dar un efecto a la imagen, pero si a las imágenes no les hemos asignado un ID o un CLASS como es que las identificaremos, pues en el caso de las imágenes no es necesario ya que estás son determinadas por "img", y teniendo en cuenta que las imágenes están dentro del contenedor "slideshow" tenemos que determinar el contenedor y luego la imagen ".slideshow img" que pasa si efectuamos el formato solo a "img", si hacemos esto, todas las imágenes de la página mostrarán ese formato, es decir habremos aplicado un formato global a las imágenes, y eso no es exactamente lo que deseamos.
En el caso de la imagen noten que hemos asignado un padding de 2px, esto es la distancia del borde de la imagen al borde de 1px con solor #ccc que le hemos aplicado, esto produce el efecto de tener un borde al rededor de la imagen, en background-color especificamos un color de fondo para la imagen, en este caso "#fff" le hemos asignado color blanco.
Asignando el efecto jquery:
Ning tiene algunas restricciones en cuanto a modificar el código de la página, es decir yo no puedo acceder a los archivos html ó php que la conforman, pero lo que si permite es subir archivos, imágenes, etc... para insertar los archivos javascript es necesario tener la URL exacta de la ubicación del archivo, en el caso del archivo principal "jquery.min.js" lo obtendremos directamente del repositorio de Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
Luego subimos el archivo del script que nos permite utilizar el efecto slider, que en nuestro caso utilizaremos el jquery.cycle, al momento de subir el archivo obtendremos la URL del archivo en nuestro caso:
<script src="https://storage.ning.com/topology/rest/1.0/file/get/10883598282?profile=original" type="text/javascript"></script>
Como insertar estas cargas de archivo no es suficiente, tenemos que agregar el código que hace que el efecto de comienzo, esto lo hacemos con lo siguiente:
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
next: '#next',
prev: '#prev',
timeout: 4000
});
});
// ]]></script>Explicación del código anterior:
$('.slideshow').ready(function(){ //Aqui identifica el contenedor de la imágenes al que asignamos el class o ID, en este caso class="slideshow"
fx: 'fade', //Asigna el efecto de transición: En esta página encuentran un lista de efectos a utilizar: http://jquery.malsup.com/cycle/begin.html en nuestro caso utilizamos el efecto "fade"
next: '#next', //Aqui identificamos el controlador para avanzar entre imágenes, recuerdan las URL para anterior siguiente, en el caso de siguiente tenia ID="next"
prev: '#prev', //Igual que en el anterior identificamos el controlador para retroceder entre imágenes.
timeout: 4000 //determinamos el tiempo de espera para iniciar la transición o pasar las imágenes.
Ahora nuestro código completo sería el siguiente (este es el ejemplo práctico del bloque de eventos en la página principal)
<style type="text/css"><!--
/*<![CDATA[*/
.slideshow { height: 142px; width: 488px; margin: auto }
.slideshow img { padding: 2px; border: 1px solid #ccc; background-color: #fff; }
/*]]>*/
--></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="https://storage.ning.com/topology/rest/1.0/file/get/10883598282?profile=original" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
next: '#next',
prev: '#prev',
timeout: 4000
});
});
// ]]></script>
<div class="slideshow"><a target="_blank" href="http://www.altaeducacion.org/page/aceites-escenciales"><img height="137" width="488" src="https://storage.ning.com/topology/rest/1.0/file/get/10883598287?profile=original" /></a> <a target="_blank" href="http://www.altaeducacion.org/page/el-proposito-del-autismo-1"><img height="137" width="488" src="https://storage.ning.com/topology/rest/1.0/file/get/10883598868?profile=original" /></a> <a target="_blank" href="http://www.altaeducacion.org/page/honestidad-radical"><img height="137" width="488" src="https://storage.ning.com/topology/rest/1.0/file/get/10883599081?profile=original" /></a> <a target="_blank" href="http://www.altaeducacion.org/page/expresion-teatral"><img height="137" width="488" src="https://storage.ning.com/topology/rest/1.0/file/get/10883599090?profile=original" /></a> <a target="_blank" href="http://www.altaeducacion.org/page/anandaflora-1"><img height="137" width="488" src="https://storage.ning.com/topology/rest/1.0/file/get/10883599294?profile=original" /></a></div>
<br />
<div style="text-align: center;"><a name="prev" href="#" id="prev">«Anterior</a> | <a name="next" href="#" id="next">Siguiente »</a></div>Este código una vez terminado lo tienen que insertar en el bloque que deseen, accediendo para ello al botón o pestaña "HTML", aquí tienen el ejemplo de su funcionamiento: www.altaeducacion.org
OBSERVACION: El efecto no es posible integrar a una entrada de blog, pero supongo que se puede integrar en el perfil.
Comentarios