Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Slide de imagenes elegante con jQuery
#1
Los slide generalmente son utilizados para mostrar varias imágenes en movimiento, o para crear un estilo de galeria en poco espacio y con un bonito efecto.

El Slide que pongo ahora no se mueve solo como todos, se muestran varias imágenes divididas y que se muestran completamente al pasar el mouse sobre ellas, es más bien útil en el header de una página o blog elegante o formal, que además informa con un pequeño texto sobre cada imágen.

Código:
<div id='slidearea'><br /><ul class='kwicks'><br /><li class='kwik'><br /><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /></ul><br /><br /><div class='clear'/><br /></div></div>

Ahora, en ese código hay que reemplazar los textos que digan "Url-imagen" por tu imagen de 750 x 256 pixeles.
"Titulo-contenido" lo reemplazas por el título que tendrá cada imágen, y "Texto-contenido" por la información bajo el titulo de cada imágen.

Saludos
#2
algun demo?
WWW
#3
Seria bueno tener alguna demo o alguna imagen de como quedaria Guiño
WWW
#4
Este código es valido, solo es puro class y rel, primera vez que veo un código así y sin hacer llamado al jQuery.
#5
soy nuevo, y no se donde agregarlo xD! aun q m gustaria poder usarlio
#6
son cosas mías o falta un css¿? mmmmm esque lo puse y no se ve como pensaba
#7
Tienes algun demo para saber como queda
WWW
#8
creo que esto no debe funcionar falta el .Js Triste
#9
si pusieras un demo seria exelente gracias
#10
Podrías poner una imagen para ver como queda :/
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  jQuery: ocultar imágenes rotas Jvh_22 10 822 03-01-2017, 09:26 PM
Último mensaje: gassip
  Como subir Archivos, Imagenes PHP MysQL gassip 0 1,566 24-10-2016, 06:59 AM
Último mensaje: gassip
  slide no me funciona luisalvare22 5 508 11-08-2016, 11:36 AM
Último mensaje: Vicen
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 362 03-08-2016, 09:23 PM
Último mensaje: Boreas
  Cargar web (con imagenes) mas rapido CarlosAlberto 18 1,522 08-03-2016, 01:34 AM
Último mensaje: LaaprendizdeCM
  Subir imagenes con PHP y class.upload.php cmascreativo 0 403 18-02-2016, 05:54 PM
Último mensaje: cmascreativo
  [Duda] Como implementar Jquery.cookie llProKsll 3 443 11-02-2016, 01:55 PM
Último mensaje: Vicen
Información [Tutorial] Detectar AdBlock y mostrar mensaje (jQuery) DarkMaster 7 785 28-01-2016, 03:32 PM
Último mensaje: TapaJerez
  Libro de jQuery en español CarlosAlberto 1 473 30-12-2015, 11:39 PM
Último mensaje: habacuc78
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 346 16-08-2015, 02:02 AM
Último mensaje: luis.ml



Usuarios navegando en este tema: 1 invitado(s)