Galería dreamweaver con pop up
Quisiera hacer una galería de fotos en dreamweaver pero que al hacer click sobre la imagen esta aparezca en una ventana como pop up con una breve descripción de la foto y un botón de siguiente para que aparezca la siguiente imagen aunque esto no sería tan indispensable.
1 respuesta
Respuesta de everaldo19
1
Comprendo tu idea. Desafortunadamente los Pop Up, en la mayoría de navegadores y en los más utilizados(Firefox e Internet Explorer) son bloqueados, por lo tanto mejor te recomiendo que utilices un herramienta más novedosa e impactante: Los jquery lightbox.
Acá la solución:
http://www.huddletogether.com/projects/lightbox2/
Sigue las indicaciones y si tienes alguna duda, me escribes.
1. Descarga el archivo Lightbox V2.5 y descomprímelo en tu carpeta Web, vale aclarar que el archivo contiene las carpetas: css, js, images(en esta ultima carpeta coloca tus imágenes) que serán útiles para que surta el efecto.
2. Configuracion: en la pagina donde deseas hacer el Pop-up, vaya al codigo fuente y entre <head></head> copia y pegua el codigo: <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
3. Incluir el estilo al Pop-up: copia y pega <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
4. El código de ejemplo para tus imágenes: copia y pega el siguiente código en el lugar donde deseas que aparezca:
<a href="images/nombreimagen.jpg" rel="lightbox[plants]" title="Escribe aqui la descripcion de la imagen."><img src="images/imagenminiatura.jpg" width="100" height="40" alt="Escribe la descripción" /></a>
Lo resaltado es obvio decirlo, que tienes que poner el nombre de tus imágenes y la descripción. Puedes copiar el mismo código cuantas imágenes quieras y recuerda de solo cambiar el nombre y la descripción.
Lo importante aquí es estar familiarizado con el código fuente o HTML.
Acá la solución:
http://www.huddletogether.com/projects/lightbox2/
Sigue las indicaciones y si tienes alguna duda, me escribes.
1. Descarga el archivo Lightbox V2.5 y descomprímelo en tu carpeta Web, vale aclarar que el archivo contiene las carpetas: css, js, images(en esta ultima carpeta coloca tus imágenes) que serán útiles para que surta el efecto.
2. Configuracion: en la pagina donde deseas hacer el Pop-up, vaya al codigo fuente y entre <head></head> copia y pegua el codigo: <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
3. Incluir el estilo al Pop-up: copia y pega <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
4. El código de ejemplo para tus imágenes: copia y pega el siguiente código en el lugar donde deseas que aparezca:
<a href="images/nombreimagen.jpg" rel="lightbox[plants]" title="Escribe aqui la descripcion de la imagen."><img src="images/imagenminiatura.jpg" width="100" height="40" alt="Escribe la descripción" /></a>
Lo resaltado es obvio decirlo, que tienes que poner el nombre de tus imágenes y la descripción. Puedes copiar el mismo código cuantas imágenes quieras y recuerda de solo cambiar el nombre y la descripción.
Lo importante aquí es estar familiarizado con el código fuente o HTML.
