ActionScript - Lightbox, ejecutada desde Flash, en modo local.

Lightbox, ejecutada desde Flash, en modo local.

Publicado por Jose (1 intervención) el 20/12/2009 21:27:02

Hola a todos,

Necesito vuestra ayuda. Me han dado mi primer trabajo profesional remunerado (por fin) y la verdad es que es algo complicado. Necesito hacer un catálogo estático (para consultar en MODO LOCAL, importante) en formato "flip page". El catálogo es de productos alimentarios, y en cada página van una decena de productos. Pero eso no es el problema, pues ya lo tienen hecho con un pequeño programita que hace flip pages.

El problema está en que el cliente me ha pedido (y lo ha remarcado :S) que cada producto tenga una pequeña lupita en la que al hacer clic aparezca un popup con imagen (lightbox). Hasta aquí fácil. El problema es que ese lightbox debe ser ejecutado en flash y reproducido en el HTML (imagino que con JavaScript).

A continuación pongo ejemplos de lo que quiero decir:

http://blog.codefidelity.com/?p=18

http://www.bram.us/projects/flashlightboxinjector/

De hecho esos scripts funcionan a la perfección. Sólo con una salvedad. ¡No funcionan en modo local! (O al menos no he sido capaz de hacerlos funcionar). No sé qué hacer. Si pudieséis ayudarme os lo agradecería muchísimo, de verdad.

¡Gracias de antemano!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Implementación de Lightbox en modo local

Publicado por Alejandro (369 intervenciones) el 27/06/2023 00:18:18

¡Enhorabuena por tu primer trabajo profesional remunerado, José! Comprendo que necesitas agregar un lightbox a tu catálogo estático en modo local y que has encontrado algunos scripts que funcionan, pero no en modo local. Aquí tienes una solución para implementar un lightbox que funcione en modo local:

1. Descarga la biblioteca jQuery y el script "Colorbox" desde el sitio web oficial de Colorbox (https://www.jacklmoore.com/colorbox/).

2. Crea una estructura de carpetas para tu proyecto. Por ejemplo, puedes tener una carpeta llamada "lightbox" que contenga los siguientes archivos:

- index.html: El archivo HTML principal de tu catálogo estático.
- jquery.js: El archivo jQuery descargado.
- jquery.colorbox.js: El archivo "Colorbox" descargado.
- jquery.colorbox.css: El archivo CSS de "Colorbox" descargado.
- images: Una carpeta que contiene las imágenes de tus productos y cualquier imagen adicional que desees mostrar en el lightbox.

3. En el archivo index.html, agrega las siguientes líneas de código en la sección `<head>` para incluir las bibliotecas jQuery y "Colorbox":

<link rel="stylesheet" href="jquery.colorbox.css" />

<script src="jquery.js"></script>

<script src="jquery.colorbox.js"></script>

4. Dentro del `<body>` de index.html, crea el marcado HTML para tus productos y la pequeña lupita que abrirá el lightbox. Por ejemplo:

<div class="product">

  <img src="images/product1.jpg" alt="Producto 1" />

  <a href="images/product1-popup.jpg" class="lightbox">Ampliar imagen</a>

</div>

5. A continuación, agrega el siguiente código JavaScript en el archivo index.html para inicializar el lightbox:

<script>

$(document).ready(function() {

  $(".lightbox").colorbox({

    maxWidth: "90%",

    maxHeight: "90%"

});

});

</script>

Asegúrate de que la ruta a las imágenes y los archivos JavaScript y CSS sea correcta en relación con la estructura de carpetas que has creado.

Con estos pasos, deberías poder ejecutar el catálogo estático en modo local y el lightbox debería funcionar correctamente.

Recuerda que al trabajar en modo local, es posible que debas ajustar la configuración de seguridad de tu navegador para permitir la ejecución de scripts locales.

Espero que esta solución te sea útil y que puedas implementar con éxito el lightbox en tu catálogo estático. ¡Buena suerte con tu proyecto!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar