Aplicación efecto Jquery sobre imagen
Estoy queriendo realizar mi primer efecto a través de Jquery. Ando un poco perdida.
Tengo un div que contiene tres imágenes, al pulsar en cada una de ellas mi idea es que un div que hay oculto se abra cada vez con algún efecto vistoso. O sea, cada imagen daría lugar a una nueva capa de gran tamaño que incluye una maquetación hecha en Photoshop. Sé que primero tendría que seleccionar cada imagen con Jquery y luego aplicar un evento on click para que se visualice la capa, más el efecto especial que le quiera añadir -distinto en cada caso-. Son tres en total, una para cada imagen.
Luego necesitaría un botón de cerrar para cada una y poder volver así a la página principal.
Si me puedes orientar un poco.
Tengo un div que contiene tres imágenes, al pulsar en cada una de ellas mi idea es que un div que hay oculto se abra cada vez con algún efecto vistoso. O sea, cada imagen daría lugar a una nueva capa de gran tamaño que incluye una maquetación hecha en Photoshop. Sé que primero tendría que seleccionar cada imagen con Jquery y luego aplicar un evento on click para que se visualice la capa, más el efecto especial que le quiera añadir -distinto en cada caso-. Son tres en total, una para cada imagen.
Luego necesitaría un botón de cerrar para cada una y poder volver así a la página principal.
Si me puedes orientar un poco.
1 Respuesta
Respuesta de miguelsgav
1
¿Quieres qué se abra en una ventana modal aparte con efecto o quieres que haga un efecto dentro de lo que es el div?
Como necesitas el botón de cerrar me imagino que te refieres a abrir ventanas modales con la imagen y con algún tipo de efecto.
No obstante aquí te dejo una web con diferentes tipos de scripts jquery para visualizar imágenes con efectos en divs.
http://almacenplantillasweb.es/2010/06/10-plugins-y-tecnicas-jquery-para-crear-efectos-con-imagenes/
Y te dejo tambien la libreria que mas me gusta a mi para las ventanas modales.
http://jquery.com/demo/thickbox/
Si tienes alguna duda puedes contactarme de nuevo.
No obstante se un poco más especifica con lo que deseas para que mi respuesta pueda ser más concreta.
Como necesitas el botón de cerrar me imagino que te refieres a abrir ventanas modales con la imagen y con algún tipo de efecto.
No obstante aquí te dejo una web con diferentes tipos de scripts jquery para visualizar imágenes con efectos en divs.
http://almacenplantillasweb.es/2010/06/10-plugins-y-tecnicas-jquery-para-crear-efectos-con-imagenes/
Y te dejo tambien la libreria que mas me gusta a mi para las ventanas modales.
http://jquery.com/demo/thickbox/
Si tienes alguna duda puedes contactarme de nuevo.
No obstante se un poco más especifica con lo que deseas para que mi respuesta pueda ser más concreta.
Gracias por tu respuesta, ya me he puesto con ello.
Solo una pregunta...¿No se puede visualizar un div con un determinado efecto a partit del cilc en una foto y luego ese div tener un botón de cierre?
Es que no me vaya a estar planteando algo imposible...
Gracias
Solo una pregunta...¿No se puede visualizar un div con un determinado efecto a partit del cilc en una foto y luego ese div tener un botón de cierre?
Es que no me vaya a estar planteando algo imposible...
Gracias
Supongo que te referirás a que la foto es un "menu" y la foto es una especie de hipervínculo.
En un principio si que se puede, dado que existen funciones javascript para modificar el contenido de los div.
<head>
function cambiar(imagen)
{
switch(imagen)
case:'imagenflores'
{
document.getElementById('nombrediv').innerHTML = "Codigo HTML que quieras poner en el div";
}
}
</head>
Con esto date cuenta que cambiara el div con el código HTML o Javascript o función jQuery que quieras meterle. Entonces puedes ponerle un efecto a la imagen con jQuery o flash o cualquier otro sistema.
Para el botón cerrar. Incorporalo en el código del div pero creando un case en blanco con código en blanco y entonces el div saldrá en blanco.
Te dejo también el código para el link
<a href=# onClick="javascript:cambiar(nombreimagen)"><img src="imagen.jpg"></a>
Donde nombre imagen date cuenta que es el valor que tu le quieras poner, puedes hacer tantos case como quieras con sus respectivos valores.
En un principio si que se puede, dado que existen funciones javascript para modificar el contenido de los div.
<head>
function cambiar(imagen)
{
switch(imagen)
case:'imagenflores'
{
document.getElementById('nombrediv').innerHTML = "Codigo HTML que quieras poner en el div";
}
}
</head>
Con esto date cuenta que cambiara el div con el código HTML o Javascript o función jQuery que quieras meterle. Entonces puedes ponerle un efecto a la imagen con jQuery o flash o cualquier otro sistema.
Para el botón cerrar. Incorporalo en el código del div pero creando un case en blanco con código en blanco y entonces el div saldrá en blanco.
Te dejo también el código para el link
<a href=# onClick="javascript:cambiar(nombreimagen)"><img src="imagen.jpg"></a>
Donde nombre imagen date cuenta que es el valor que tu le quieras poner, puedes hacer tantos case como quieras con sus respectivos valores.
Hola miguelsgav!
He intentando probar el código que me mandaste, pero no lo debo hacer bien, y no me sale nada.
Igual he querido hacer algo demasiado complicado para la preparación que tengo.
Estaba pensando en hacer de cada imagen un hipervínculo y pasar una función javascript simple al hacer onClick. La función consistiría en la visualización del div que está oculto Luego ya pondría un botón de cierre al div resultante.
<head>
<script language="javascript">
function visualizardivverde(){
div id="divverde" style="visibility:visible";
}
</script>
</head>
<body>
<a href="#" onClick="javascript:visualizardivverde">ladearribasincolor.jpg</a>
¿Es correcto este código o he metido la pata en algo?
Ya no quiero molestarte más, pero, al margen de esto me queda una duda.
¿De qué manera con jquery seleccionas una imagen? Parce algo muy simple, pero he visto cómo seleccionar párrafos, titulares..., pero una imagen, no, y aunque ya no lo vaya a hacer así me queda la curiosidad.
Un saludo y muchas gracias por todo
Mónica
He intentando probar el código que me mandaste, pero no lo debo hacer bien, y no me sale nada.
Igual he querido hacer algo demasiado complicado para la preparación que tengo.
Estaba pensando en hacer de cada imagen un hipervínculo y pasar una función javascript simple al hacer onClick. La función consistiría en la visualización del div que está oculto Luego ya pondría un botón de cierre al div resultante.
<head>
<script language="javascript">
function visualizardivverde(){
div id="divverde" style="visibility:visible";
}
</script>
</head>
<body>
<a href="#" onClick="javascript:visualizardivverde">ladearribasincolor.jpg</a>
¿Es correcto este código o he metido la pata en algo?
Ya no quiero molestarte más, pero, al margen de esto me queda una duda.
¿De qué manera con jquery seleccionas una imagen? Parce algo muy simple, pero he visto cómo seleccionar párrafos, titulares..., pero una imagen, no, y aunque ya no lo vaya a hacer así me queda la curiosidad.
Un saludo y muchas gracias por todo
Mónica
Para eso realmente no necesitas hacer funciones aparte, basta con poner:
onclick="document.getElementById('Dfamilias').style.visibility = 'visible';"
Date cuenta que en la función estas trabajando con código javascript, javascript como código no te va a reconocer div id="taltal" style="taltal".
Si te fijas en el código on click, repasas y es como si dijeras de este documento, coge el elemento con ID tal, en su estilo entra en su propiedad visibilidad y cambiala al valor tal.
Al fin y al cabo la programación es un idioma estructurado, que tiene su código y lenguaje propio. Si no le hablas en su idioma, nunca te hará caso y no hará lo que tu quieres que te haga.
Respecto a tu duda sobre seleccionar imágenes, no se exactamente a que te refieres, si pudieras ser un poco más concreta.
Aunque por lo que he visto y no se si sera a lo que te refieres, los scripts jquery de imágenes con los que he trabajado suelen usar las imágenes contenidas en un div, de tal manera que tu tienes el div por ejemplo.
<div id="imagenesjquery">
<img src="taltal1.jpg"></img>
<img src="taltal2.jpg"></img>
<img src="taltal3.jpg"></img>
<script>
$('#slideImagenes').jqFancyTransitions({ width: 960, height: 234 });
</script>
</div>
Entonces el script jquery selecciona las imágenes de dicho div y las da los efectos previamente configurados en el jquery o según el script los pasados por parámetros.
Por cierto, tranquila que no molestas para eso estamos, todos en este mundillo empezamos preguntando e inclusive yo todavía pregunto un montón de cosas en foros.
Un saludo y espero que de algo te valgan las explicaciones :)
onclick="document.getElementById('Dfamilias').style.visibility = 'visible';"
Date cuenta que en la función estas trabajando con código javascript, javascript como código no te va a reconocer div id="taltal" style="taltal".
Si te fijas en el código on click, repasas y es como si dijeras de este documento, coge el elemento con ID tal, en su estilo entra en su propiedad visibilidad y cambiala al valor tal.
Al fin y al cabo la programación es un idioma estructurado, que tiene su código y lenguaje propio. Si no le hablas en su idioma, nunca te hará caso y no hará lo que tu quieres que te haga.
Respecto a tu duda sobre seleccionar imágenes, no se exactamente a que te refieres, si pudieras ser un poco más concreta.
Aunque por lo que he visto y no se si sera a lo que te refieres, los scripts jquery de imágenes con los que he trabajado suelen usar las imágenes contenidas en un div, de tal manera que tu tienes el div por ejemplo.
<div id="imagenesjquery">
<img src="taltal1.jpg"></img>
<img src="taltal2.jpg"></img>
<img src="taltal3.jpg"></img>
<script>
$('#slideImagenes').jqFancyTransitions({ width: 960, height: 234 });
</script>
</div>
Entonces el script jquery selecciona las imágenes de dicho div y las da los efectos previamente configurados en el jquery o según el script los pasados por parámetros.
Por cierto, tranquila que no molestas para eso estamos, todos en este mundillo empezamos preguntando e inclusive yo todavía pregunto un montón de cosas en foros.
Un saludo y espero que de algo te valgan las explicaciones :)
Muchas gracias por todo!
Excelentes respuestas, ya he solucionado lo de la página con el último código que me diste.
No me creo que ya este funcionando.
Gracias de verdad
Excelentes respuestas, ya he solucionado lo de la página con el último código que me diste.
No me creo que ya este funcionando.
Gracias de verdad
