Ayuda - Webmaster Foros
!Bienvenid@¡

Encuentra Aportes de Diseño & Desarrollo Web, para colocar tus aportes crea una nueva cuenta.

¡Que la pases bien y hasta pronto!

Abrir imagen en la misma página con efecto slide

Ir abajo

Abrir imagen en la misma página con efecto slide

Mensaje por Orbe el Vie 23 Mar - 12:10

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.

Para este post, enseñaré a usar el efecto Gallery White, puedes ver un ejemplo Aquí (haciendo clic sobre las imágenes). 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.badwaresite.www/inacho/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="http://h1.badwaresite.www/inacho/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = 'http://h1.badwaresite.www/inacho/graphic/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
http://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.

_________________
chatdelmundo.wapego.net
avatar
Orbe
Mod. Global
Mod. Global

Mensajes : 388

http://chatdelmundo.wapego.net

Volver arriba Ir abajo

Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.