image
Inicio » Foros » JavaScript

JavaScript

Ver albúm de fotos en un lugar determina

Volver al foro | Responder | Añadir nuevo tema


De: Ros
Fecha: 20/04/2006
Mensaje:

Hola:

Estoy haciendo una web educativa para los niños de mi clase, me he atascado en una parte, me explico.

Tengo varios apartados de imágenes de la ciudad con la idea de que cuando pinchen en alguno de ellos, se abra, en un lugar que he enmarcado como una pantalla, un albúm de fotos determinado , de manera , que todos se vean en el mismo lugar. Ya he agotado mi imaginación tratando de encontrar la solucción, agradecería una ayudita.

Un saludo y gracias




Quizás le interese
De: Enrique Alejandro Ogalde
Util para: 1 personas

Fecha: 21/04/2006
Mensaje:

Hola Ros

Si lo que necesitas es mostrar fotos del lado del cliente (sin lenguaje servidor) quizás pueda ayudarte usar capas.

Si utilizas Dreamweaver, hay un apartado que se llama "capas". Puedes crearlas simplemente con el mouse presionado sobre cualquier parte de tu página. crea tantas capas como fotos (en el mismo lugar!!). Nombra a cada una en el apartado "layer" (capa en ingles). Una vez hecho esto, inserta cada foto en cada capa.

Crea una miniatura de cada imagen (Baja un programa que se llama Bimp, para hacer esto en masa, o sea todas juntas en vez de a una)

Coloca tus miniaturas en una tabla, para mantenerlas ordenadas. Recuerda que las capas se colocan SOBRE el resto de los elementos html, de modo que las capas no deben superponerse a tus miniaturas.

A cada una le asignas el comportamiento "Mostrar/ocultar capas" (aleta comportamientos), y seleccionas el evento "onclick"

El resto es asignar cuando mostrar cada capa, al presionar una u otra foto. Si pulso sobre capa1, "mostrar capa1", e ir "ocultando" las demás.


Por supuesto hay maneras más elaboradas, pero creo que va a servirte si no son demasiadas imágenes en cada una de tus páginas.

Otra alternativa sería que al pulsar sobre una imagen te abra una nueva ventana, y allí colocar un botón de siguiente, que vaya a la próxima foto.

Espero te sirva de ayuda.
Saludos.



De: ZeroKilled
Util para: 0 personas

Fecha: 21/04/2006
Mensaje:

Yo hice mi galería de diseños de la siguiente forma... en el centro tengo una imagen con un nombre. <img src='01.jpg' name='mainImg' /> Ese nombre lo voy a utilizar en JavaScript para accesar a ella y poder cambiarle la fuente (atributo src). En lado derecho tengo una repeticion de imagenes donde cada una tiene como enlace una funcion javascript. Esta funcion lo que hace es cambiar la fuente de la imagen central por una que yo quiera. De esta manera tendrias que crear tantas capas como el compañero anterior comento. Aparte de que esa forma es mas lenta porque se tendría que cargar todas las imagenes. Si quieres ver un ejemplo en funcionamiento visita http://webmedia.freewebpage.org/ Lo único que vas a encotrar en mi página es una galería de imagenes y fotos por categoría. A continuación te muestro básicamente un script:

<div id='main'><img name='largeImg' /></div>
<div id='thumbs'>
<a href='javascript:showImg("foto01.jpg");void 0;'><img src='thb_foto01.jpg'></a><a href='javascript:showImg("foto02.jpg");void 0;'><img src='thb_foto02.jpg'></a><a href='javascript:showImg("foto03.jpg");void 0;'><img src='thb_foto03.jpg'></a>
</div>

<script>
function showImg(imgName){
document.largeImg.src = imgName;
}
</script>


En el ejemplo incluí dos capas, una que contiene la imagen en tamaño grande (div id='main') y otra que contiene una serie de imagenes en tamaño pequeño (div id='thumbs'). Quiere decir que vas a tener dos imagenes de lo mismo, uno en tamaño grande y quizas en alta calidad, y el otro en tamaño pequeño y en baja calidad. Fijate también que las imagenes tienen una secuencia o patrón. No es necesario que lo hagas así, más bien lo hice para tener un orden lógico y estructurado. Ahora bien, los nombres 'fotoNN' (donde NN es un número) son las fotos en tamaño grande, y los de nombre 'thb_fotoNN' son las muestras pequeñas. Cada enlace tiene la misma función pero como parametro tiene un nombre diferente. Puedes adaptarte a este ejemplo si así lo deseas, lo único que tienes que cambiar son los nombres de las imagenes en los enlaces. Y para añadir más imagenes simplemente copia y pega una linea desde la etiqueta <a> hasta </a> Finalmente vuelve y haces lo mismo, cambia los nombres según tu necesidad.





De: Ros
Util para: 0 personas

Fecha: 21/04/2006
Mensaje:

Gracias por vuestra ayuda, me pongo a ello.

Saludos





Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.