Ir arriba

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>
<div class="highslide-caption">
Texto opcional para la imágen, aparecerá en la parte inferior.
</div>
</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.

17 comentarios:

Anónimo dijo...

hs.graphicsDir = 'http://h1.ripway.com/inacho/graphic/????';

Y AHI QUE PASO BRO JEJE

Anónimo dijo...

no jala

Unknown dijo...

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!!

Anónimo dijo...

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 :)

diseño web dijo...

es un buen codigo, muy util para el diseño web.

Ignacio dijo...

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

Anónimo dijo...

jajajajjjajajjaja

Anónimo dijo...

A MI ME QUEDA COMO CARGANDO SIEMPRE QUE PUEDE ESTAR MAL

Unknown dijo...

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?

Anónimo dijo...

hola a mi me carga la foto pero no ahi mismo en la pagina la abre en otra ventana...!:s

Premier Inmuebles dijo...
Este comentario ha sido eliminado por el autor.
gregory7885 dijo...

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.

Anónimo dijo...

Muy bueno el código. ¿Dónde puedo descargar el script?

Anónimo dijo...

http://www.highslide.com/

Geovany dijo...

Ayuda no me sale las imagenes si alguien me ayudaria giosiervo_ofgod@hotmail.com

Anónimo dijo...

Este esta bueno pero prefiero el Sexyligthbox o algo asi

Dj Sebas dijo...

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 :)