Highslide es un Script con varios efectos para crear una galeria de imágenes o simplemente abrir una imágen sin salir de la página con un bonito Zoom, puedes ver un ejemplos de su resultado en la página del autor.
Para este post, enseñaré a usar el efecto Gallery White, puedes ver un ejemplo aquí (haciendo clic sobre las cartas). Este efecto, además del "Zoom", permite mover la imágen por toda la página y para minimizar se debe hacer clic sobre la misma.
Parte 1 de 2:
Primero hay que agregar el siguiente código Javascript a tu código html, despues <head> (Busca con control + F).
Nota: Recomiendo guardar los archivos que estan en rojo y subirlos a un servidor propio, porque no aseguro la disponibilidad de estos, ya que es un servidor gratuito donde estan alojados.
<script type="text/javascript" src="http://h1.ripway.com/inacho/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="http://h1.ripway.com/inacho/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'http://h1.ripway.com/inacho/graphic/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
Parte 2: Agregar la imágen en tu entrada o página.
Debes tener una imágen en miniatura de la imágen real, o si quieres haces un boton que diga "Abrir imágen aqui" o algo por el estilo, o incluso sin imágen y solo texto.
Para insertar la imágen, debes usar el siguiente código:
<div class="highslide-gallery">
<a href="http://imagen_real.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://imagen_en_miniatura_o_boton.jpg"
title="Clic para ver Imágen" />
</a>
Texto opcional para la imágen, aparecerá en la parte inferior.
</div>
Aquí lo rojo es opcional, pero debes agregar el último </div> purpura al final.
Si quisieras hacer una galería, debes volver a copiar desde <a href... hasta ... /a>, siempre todo entre el <div class='high... inicial, hasta el .../div> final.
Preguntas en los comentarios, saludos.
03 mayo 2010
<div class="highslide-caption">
</div>
Entradas populares
- 000webhost, un Hosting para guardar archivos rápido y gratis
- Como crear un Foro de discusion gratis
- Servidor de radio streaming Gratis con Listen2myRadio
- Reproductor flash para ShoutCast de Radio
- Radio online para tu web con Winamp shoutcast
- Efecto lluvia de estrellas con Javascript
- Playlist.com Reproductor de Musica para Myspace, blogger, etc
- Hosting de mp3 y Reproductor de música en flash
- Abrir imágen en la misma página con efecto slide
- Como agregar el boton "Me gusta" de Facebook a tu web
17 comentarios:
hs.graphicsDir = 'http://h1.ripway.com/inacho/graphic/????';
Y AHI QUE PASO BRO JEJE
no jala
tampoco me resulta baje el archivo .js que sale en la web del autor y nada al cargar la pagina, ese archivo .css de donde lo obtengo..
ayuda porfavor!!
alguien me ayuda y me da paguinas para ver como
se hacen o donde consigo codigos para subir fotos
(estoy haciendo una paguina web con dreanweaver8)
ayuuuuuuuuuuuuuda :)
es un buen codigo, muy util para el diseño web.
Si no les resulta es porque no han cambiado los enlaces en rojo por los suyos, les recomiendo este hosting para subir sus archivos.
Saludos
jajajajjjajajjaja
A MI ME QUEDA COMO CARGANDO SIEMPRE QUE PUEDE ESTAR MAL
A mi también me sucede lo mismo... queda en "LOADING" cuando hago click en la imagen miniatura y nunca carga la imagen en tamaño grande.
No hay caso, lo intenté todo.
Alguna idea?
hola a mi me carga la foto pero no ahi mismo en la pagina la abre en otra ventana...!:s
Pues estaria bien subir los ficheros de css, script y graphic a algun servidor para poderlos descargar y guardar cada uno en su servidor, porque ahora mismo da ancho de banda excedido y te hace esperar 24h.
Estoy impaciente por ver como queda en un proyecto que estoy haciedo.
Saludos y gracias.
Muy bueno el código. ¿Dónde puedo descargar el script?
http://www.highslide.com/
Ayuda no me sale las imagenes si alguien me ayudaria giosiervo_ofgod@hotmail.com
Este esta bueno pero prefiero el Sexyligthbox o algo asi
MUY BUENO WWW.PARAGUAYOS.TK
Publicar un comentario
Gracias por visitar Creando Web, si tienes alguna duda, solo pregunta! ^^
- He activado la moderación de comentarios por el spam :)