Con la tecnología de Blogger.

About

Clima

Publicidad

Name*


Message*

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

Labels

60's 80's 90's Abuso de PMT Administracion Moderna Alimentación Altavista Amigos Anime Anthony Cymerys Aplicaciones Apollo 16 Apple Astronomía Audio Automatización Aviacion Ayuda Bill Cosby Biografia Blog Blogger Broma CANSAT Caricaturas Carlos Rivas Carlos Slim Charles Duke Chavorrucos Chile Chucherías Ciencia Cine Clase Coaching Compu Comunicación Correo CPM Cuestionarios Curioso Dante Denuncia Desagradable Descenso Dia del locutor Dialogo Diario Dieta Dieta de 1 Semana Dinero Dios es bello Diversión Don Leo Economia EEI Email Español Estacion Espacial Internacional Exito Facebook Farandula Feature Finanzas Forrest Gump Fotos Gamegear Generación 80's Generación 90's Gmail Google Google Labs Google Maps Guate Guatemala Hack Herramienta Herzio Historia Hotmail Html Idioma Informatica Insolito Interesante Internet Japon Java John Young Juan Pablo Mata Juegos Las 100 mejores comidas rapidas del mundo Listado Locutor Luna Mapacho Matrimonio McPatatas Medicina Memorias Mentoring Mercadotecnia Merk Meteorito Microsoft Mitos sobre las dietas Motivación Mozilla MTV Multimedia Mundo Musica Música Nasa Navidad Nintendo Nombre Nostalgia Noticia Noticias Novedoso 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 Recuerdos Redes Sociales Reingenieria Remi Retro Revista Rolling Stones Ringtone 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 Tecnología Teléfono Televisión Teoria Gerencial Terapia Toma de Decisiones Tour Tristeza TV Twitter Uka Uka Universidad Universo URL Vida Video Videojuegos Viral Virus Walkman Wikipedia Yahoo Yosi Sideral Yosinews You Tube Youtube Zapatos