Abrir imagenes en una misma pagina con efecto zoom de Highslide

27 agosto 2010

Abrir imagenes en una misma pagina con efecto zoom de Highslide

    3 comentarios
HighSlide es un maravilloso script que te permite abrir las imagenes de tu blog en la misma ventana o pagina. Es decir, ya no es necesario que el usuario salga de tu pagina al hacer clic sobre una imagen, si no, que a la imagen que le apliques el Javascript, al hacer clic sobre ella abrira con un efecto Zoom, que se activara una vez dado el clic sobre la imagen deseada. Highslide te permite crear tambien galeria de imagenes, con distintos diseños, en la imagen de la izquierda se pueden vizualizar dos modelos de las ventanas modales, y eso no es nada para las demas que ofrece, tambien, te permite mover la imagen de un lado a otro de la pagina. En esta entrada, te ensañare a aplicar el efecto dentro de tu blog, pero para empezar, es necesario que veas una muestra en la pagina del autor.

1-) Para empezar entra a la edicion HTML de tu blog, busca la etiqueta </head> y pega el siguiente codigo justo antes de dicha búsqueda.

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

En Rojo: Son los archivos alojados en el servidor externo

2-) Debes agregar la imagen en una entrada nueva o en la pagina, debes tener una imagen en miniatura de la imagen real que se abrira al hacer el clic, o si prefieres podrias tambien colocar botones con texto por ejemplo "Vizualizar imagen", "Ver imagen", entre otros. o quizas, tan solo podrias usar el texto mismo. La imagen en minuatura sirve para que los usuarios tengan una vista previa de lo que veran si hacen clic, y podria llamarles mas la atencion, ya que esta atentos a lo que veran. Para insertar la imagen debes usar el siguiente codigo.

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

En Rojo: Lo opcional.
En Violeta: Lo indispensable.
En Verde: Lo editable

Aqui, te dejo tambien para que te descargues el ZIP de los archivos, por si quieres subirlos a tu propio servidor.

Eso es todo!

VISTO EN:Crea Web

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


3 comentarios :

Suscribirse a: Enviar comentarios ( Atom )