Caricaturas

Nostalgia

El Baúl de los Recuerdos

Rockola

Video Blog

You are here

s3Slider, otro carrusel de fotos en Blogger

En Julio a petición de un lector les deje un codigo para crear un efecto Carrousel en sus paginas web o blogs. Sin embargo algunos comentarios que llegaron a mi mail me contaban que se les complicaba mucho.

Revisando en la web encontre en jesgo23 una nueva forma de crear un carrusel en tu pagina web o en tu blog. Esta disponible para Blogger.. asi que pilas.

1. Descarga los archivos Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual. Bajalos Aqui.

2. Antes de </head> ponemos:

<script src="TU_URL/jquery.js" type="text/javascript"></script> <script src="TU_URL/s3Slider.js" type="text/javascript"></script>

3.Después de <body> ponemos:

<script type="text/javascript"> $(document).ready(function() { $("#s3slider").s3Slider({ timeOut: 4000 }); }); </script>

En timeOut: 4000 modificamos el tiempo en milisegundos que tardarán en deslizarse las imágenes.

4. Ponemos lo siguiente donde queramos poner el Carrusel:

<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="TU_URL_IMAGEN1" /> <span>TEXTO DE LA IMAGEN1</span> </li> <li class="s3sliderImage"> <img src="TU_URL_IMAGEN2" /> <span>TEXTO DE LA IMAGEN2</span> </li> <div class="clear s3sliderImage"></div> </ul> </div>


En TU_URL_IMAGENX ponemos la dirección url de nuestras fotos.
En TEXTO DE LA IMAGENX ponemos el texto que describe cada foto.
Añadimos los bloques :


<li class=”s3sliderImage”>

<img src=”TU_URL_IMAGEN” />

<span>TEXTO DE LA IMAGEN</span>

</li>

que necesitemos

Y para terminar y darle su respectiva forma CSS, nos ubicamos antes de
]]> :


#s3slider {

width: 400px; /* mismo ancho que las imágenes */

height: 300px; /* misma altura que las imágenes */

position: relative; /* importante */

overflow: hidden; /* importante */

}#s3sliderContent {

width: 400px; /* mismo ancho que las imágenes */

position: absolute; /* importante */

top: 0; /* importante */

margin-left: 0; /* importante */

}

.s3sliderImage {

float: left; /* importante */

position: relative; /* importante */

display: none; /* importante */

}

.s3sliderImage span {

position: absolute; /* importante */

left: 0;

font: 10px/15px Arial, Helvetica, sans-serif;

padding: 10px 13px;

width: 374px;

background-color: #000;

filter: alpha(opacity=70); /* opacidad caja del texto */

-moz-opacity: 0.7; /* opacidad caja del texto */

-khtml-opacity: 0.7; /* opacidad caja del texto */

opacity: 0.7; /* opacidad caja del texto */

color: #fff;

display: none; /* importante */

top: 0;

/*

si ponemos top: 0;

la caja de texto estará en la parte superior

si ponemos bottom: 0;

la caja de texto estará en la parte inferior

*/

}

.clear2 {

clear: both;

}

Juan Pablo Mata

Especialista en Recuerdos y Música. Todo lo que te produzca Nostalgia aquí lo encuentras. En insta y twitter @juanpaguatemala

No hay comentarios:

Leave a Reply

Labels

60's 70's 80's 90's Abuso de PMT Administracion Moderna Alimentación Altavista Amigos Anime Anthony Cymerys Anucio Aplicaciones Apollo 11 Apollo 16 Apple Astronomía Audio Automatización Aviacion Ayuda Bill Cosby Biografia Blog Blogger Broma Cafesa CANSAT Caricaturas Carlos Rivas Carlos Slim Charles Duke Chavorruca Chavorrucos Chicas Chile Chucherías Ciencia Cine Clase Coaching Comidas Compu Comunicación Conciertos Correo CPM Cremitas Cubana de Aviación Cuestionarios Curioso Dante Decreto 865-85 Denuncia Desagradable Descenso Dia del locutor Dialogo Diario Dieta Dieta de 1 Semana Dinero Dios es bello Diversión Don Gato y Su Pandilla Don Leo Economia Educación EEI Email Español Estacion Espacial Internacional Eventos Exito Facebook Farandula Feature Finanzas Forrest Gump Fotos Friends Gamegear Gasolinera Gasparin Generación 80's Generación 90's Gmail Google Google Labs Google Maps Grabación Guate Guatemala Hack Herramienta Herzio Historia Hotmail Html Idioma Infancia Informatica Insolito Interesante Internet Japon Java John Young Juan Pablo Mata Juegos Juguetes Las 100 mejores comidas rapidas del mundo Las Ardillas Listado Llavero Locutor Los Picapiedra Luna Mapacho Matrimonio McPatatas Medicina Memorias Mentoring Mercadotecnia Merk Meteorito Microsoft Miedo Mitos sobre las dietas Morenita Motivación Mozilla MTV Multimedia Mundo Muñecas Musica Música Nasa Navidad Nerds Nintendo Nivea Nombre Nostalgia Noticia Noticias Novedoso Obra de Teatro Opinión Ortografía Outlook Padres Pajaro Loco Panchito el Avioncito Papa Francisco Papas Fritas Pelicula Perfil Personal Peru Peso Piscologia Planeacion Estrategica Pleonasmo Podcast Power Point Prevención Progra Programas Promocion Prypiat Psicología Que significa tu nombre Radio Radiografia Recuerdos Redes Sociales Reingenieria Remi Repollito Restaurantes Retro Revista Rolling Stones Ringtone Rock Ruleteros Rusia Salud Sega Seguridad Seminario de Gerencia Seminario de Informatica Seminarios Series de Televisión Servicio al cliente Servicio Social Shows Significado Sismos Sistemas de Información Skyppe Social Solidaridad Sony Spotify Superación Teatro Tecnología Teléfono Televisión Teoria Gerencial Terapia Toma de Decisiones Tour Transporte Tristeza TV Twitter Uka Uka Universidad Universo URL Venganza de los Nerds Vida Video Videojuegos Viral Virus Walkman Wikipedia Ya Estamos Viernes Yahoo Yosi Sideral Yosinews You Tube Youtube Zapatos Zona 5 Zona 6