Utilizamos cookies propias y de terceros. [Más información sobre las cookies].
Política de cookies
Proyecto AjpdSoft

· Inicio
· Buscar
· Contactar
· Cookies
· Descargas
· Foros
· Historia
· Nosotros
· Temas
· Top 10
· Trucos
· Tutoriales
· Wiki

JavaScript HTML: Cómo mostrar una imagen en una ventana Flash al pulsar en una miniatura
Programación páginas web ASP, PHP, Java


Explicamos cómo añadir el código HTML y JavaScript necesario a una página web para que cuando el usuario pulse en una miniatura de una imagen o en un enlace se muestre la imagen a tamaño real en una ventana Flash incrustada. Mostramos también otros métodos para mostrar una imagen en una ventana mediante JavaScript. Para mostrar la imagen en Flash en una nueva ventana incrustada, con efectos flash, usaremos la utilidad Shadowbox.



 

Requisitos para que Shadowbox funcione correctamente

Shadowbox, según indica en su sitio web oficial, funciona correctamente en los siguientes navegadores web (y versiones):

  • Internet Explorer, versiones superiores a la 6.
  • Firefox, versiones superiores a la 1.5.
  • Safari, versiones superiores a la 2.
  • Google Chrome, desde la versión 1.
  • Opera, versiones superiores a la 9.

Es muy importante para el desarrollador web que tenga en cuenta estas limitacaciones en cuanto a navegadores que soportan esta utilidad. Hay que tener en cuenta que un porcentaje de usuarios sigue usando versiones anteriores de los navegadores por diferentes motivos, por lo que para aquellos usuarios que visiten nuestra web con navegadores relativamente antiguos no les funcionará la visualización de la imagen en una ventana Flash usando Shadowbox.

Lo recomendable es mostrar las dos posibilidades: por un lado que el usuario pueda visualizar la imagen como siempre, con un enlace a la imagen y la segunda posibilidad es que pueda visualizarla en una nueva ventana Flash, algo que queda mucho más elegante. Si damos la posibilidad de mostrar las imágenes de nuestro sitio web de estas dos formas todos los usuarios podrán ver las imágenes, independientemente del navegador y su versión.

 

Descarga e instalación de Shadowbox

En primer lugar descargaremos la utilidad Shadowbox desde su web oficial:

http://www.shadowbox-js.com/download.html

Descomprimiremos el fichero .zip (Windows) ó .tar (Linux), en realidad Shadowbox no requiere de instalación, es suficiente con copiar los ficheros descomprimidos a la carpeta de nuestro sitio web, o a una subcarpeta de nuestro sitio web. Por ejemplo, si tenemos el contenido de nuestra web en la carpeta:

C:/www

Podríamos colocar los ficheros de Shadowbox en la carpeta:

C:/www/shadowbox

En el caso de Linux, la web podríamos tenerla en:

/www

Y los ficheros de shadowbox en:

/www/shadowbox

Más adelante explicaremos cómo hacer la llamada a Shadowbox desde código JavaScript y HTML, tendremos en cuenta que hemos colocado los ficheros de Shadowbox en la carpeta "shadowbox" dentro de nuestro sitio web.

 

 

Ejemplo de uso de Shadowbox para mostrar imagen en ventana Flash incrustada

A continuación vamos a explicar cómo añadir un enlace a nuestra web que muestre una imagen en una ventana Flash, integrada en la misma ventana donde está el enlace.

En primer lugar deberemos saber en qué ubicación está la imagen que queremos mostrar y el nombre del fichero de imagen. En el ejemplo mostraremos una imagen ubicada en la carpeta /imagenes/imagen_prueba.png. A continuación editaremos el fichero HTML, PHP, ASP ó JSP de nuestra web y modificaremos el encabezado "head" colocando el siguiente código JavaScript (mostramos en negrita) después de la apertura de la etiqueta "head" y antes de su cierre:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo sobre cómo mostrar imagen en ventana Flash</title>

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
  Shadowbox.init(
  {
    handleOversize: "drag",
    modal: false
  });
</script>

</head>

<body>

.........

Ejemplo de uso de Shadowbox para mostrar imagen en ventana Flash incrustada

Hemos supuesto que la utilidad Shadowbox se encuentra en la carpeta relativa de nuestro sitio web "shadowbox".

A continuación, colocaremos el siguiente código HTML en el sitio de nuestra página web donde queramos que aparezca en enlace a la imagen que se mostrará en una ventana incrustada en la actual usando Flash:

<a href="imagenes/imagen_prueba.png" rel="shadowbox">Vista en ventana Flash</a> 

Ejemplo de uso de Shadowbox para mostrar imagen en ventana Flash incrustada

 

Pulsando aquí podréis ver el ejemplo funcionando:

Ejemplo de uso de Shadowbox para mostrar imagen en ventana Flash incrustada

Para mostrar una miniatura y que al pulsar en ella se muestre la ventana flash con la imagen ampliada símplemente reduciremos el tamaño de la imagen que será la miniatura con cualquier software del mercado. Añadiremos el siguiente código HTML para mostrar la miniatura y que al pulsar sobre ella aparezca la ventana flash incrustada con la imagen amplicada:

 

 

Mostrar galería de imágenes con Shadowbox

A continuación explicamos cómo mostrar las imágenes de una galería con Shadowbox de forma sencilla, casi sin código.

Previamente añadiremos en la etiqueta "head" el código que mostramos aquí.

Como siempre, anota la carpeta y el nombre de las imágenes que compondrán la galería, a continuación, en nuestro caso /imagenes/imgx.png:

<p><a href="imagenes/galeria1/img1.png" rel="shadowbox[galeria1]">Imagen 1</a>.</p>
<p><a href="imagenes/galeria1/img2.png" rel="shadowbox[galeria1]">Imagen 2 de la galería 1</a>.</p>
<p><a href="imagenes/galeria1/img3.png" rel="shadowbox[galeria1]">Imagen 3 de la galería 1</a>.</p>
<p><a href="imagenes/galeria1/img4.png" rel="shadowbox[galeria1]">Imagen 4 de la galería 1</a>.</p>

Mostrar galería de imágenes con Shadowbox

Mostrará la imagen incrustada en una ventana Flash y, además, dará la posibilidad de navegar por las imágenes que componen la galería (adelante, atrás y cerrar ventana flash).

 

Mostrar imagen en nueva ventana con código JavaScript

A continuación mostramos el código JavaScript necesario para mostrar una nueva ventana y una imagen dentro de ésta, es otra forma, menos elegante que la anterior, de mostrar una imagen en una ventana. En este caso será una ventana real del navegador, esto puede probocar algunos problemas con determinados antipopup que pueden detectarla como popup publicitario.

Para mostrar una imagen en una nueva ventana al pulsar en un enlace usaremos el siguiente código JavaScript:

<a href="#" onClick="window.open('imagenes/imagen_prueba.png','','top=250,left=250,width=640,height=480')">Abrir imagen</a>

 

Un código JavaScript un poco más elaborado, para personalizar algunas opciones de la ventana nueva que se mostrará con la imagen podría ser:

<script type="text/javascript">
  var ventana;
  var cont = 0;

  function mostrarVentanaImagen (rutaFoto, tituloVentana, centrar, botonCerrar)
  {
    //cerraremos la ventana emergente si aún está abierta
    if (cont == 1) 
    {
      ventana.close();
      ventana = null;
    }
    ventana = window.open('', 'ventana_imagen', 'resizable = yes, scrollbars = no');
    ventana.document.write('<html><head><title>' + tituloVentana + 
      '</title></head><body style="overflow:hidden" marginwidth="0" ' +
      'marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" ' +
      'rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + 
      rutaFoto + '" onLoad="opener.redimensionar(this.width, this.height, centrar)">');

    if (botonCerrar == true)
    {
      ventana.document.write('<FORM><INPUT type="button" value="Cerrar ventana" ' +
          'onClick="window.close()"></FORM>');
    }
	
    ventana.document.close();
    cont++;
  }

  function redimensionar (ancho, alto, centrar)
  {
    ventana.resizeTo (ancho + 12, alto + 28);
    if (centrar == true)
    {
      ventana.moveTo((screen.width - ancho) / 2, (screen.height - alto) / 2);
    }  
  }
</script>

  <li><a href= "#" onClick="mostrarVentanaImagen('imagenes/galeria1/img1.png','AjpdSoft',false,true);return false"> 
  Abrir imagen </a></li>

Mostrar galería de imágenes con Shadowbox

Pulsa aquí para ver los ejemplos de este artículo en funcionamiento.

 

Descarga gratuita del código fuente completo de todos los ejemplos y Shadowbox

Si eres usuario registrado del Proyecto AjpdSoft (puedes hacerlo desde aquí gratuitamente) puedes descargar el código fuente (completo y totalmente gratuito/free) de este artículo en el siguiente enlace:

Código fuente en HTML y JavaScript para mostrar ventana emergente con imagen en flash

 

Todas las capturas de pantalla del artículo

Aquí podéis ver todas las capturas de pantalla del artículo a tamaño completo:

Cómo mostrar una imagen en una ventana Flash al pulsar en una miniatura

 

Artículos relacionados

 

Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del proyecto AjpdSoft.


Anuncios


Enviado el Martes, 03 mayo a las 00:25:20 por ajpdsoft
Visita nuestro nuevo sitio web con programas y contenidos actualizados: Proyecto A