Autor Tema: Conseguir efecto JavaScript imagen que sube y baja al hacer click  (Leído 10233 veces)

programador independiente

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 58
    • Ver Perfil
Buen día compañeros, expongo mi pregunta:

Cómo puedo conseguir el efecto de esta web:

http://bextlan.com/proyectos/alumnos/don-gato/personajes.html

Me refiero al efecto de que cuando le das click a uno de los personajes, se despliegue el texto de arriba y cuando se elije otro personaje, cierra el texto del personaje anterior y abre el nuevo texto del personaje elegido.

Al principio creí que lo podía hacer con Jquery con las funcioes .show y .hide, pero esta función lo que hace es que oculta una div y luego muestra la div, estuve investigando pero no consigo dar con este efecto.

Lo que hice fue copiar el código de esta web y lo que conseguí es que sí hace el efecto de subir y bajar, pero me presenta el mismo texto, y es que no sé dónde o cómo introducir el texto de cada personaje.

dejo el código html:
nombre del archivo: personajes.html
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Personajes</title>
<meta name="description" content="Sección Personajes de Don Gato."/>
<!-- Importante para que sea responsive, aquí se adapta al device -->
<meta name"viewport" content="width=device-width,initial-scale=1, maximum-scale=1"/>
<!-- http://www.convertico.com/ imagen de tipo ico de 16px x 16px -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<!-- imagen de 57px x 57 px formato png para visualizar en ipad -->
<link rel="apple.touch-icon" href="apple-touch-icon.png"/>
<!-- http://humanstxt.org/ datos de la gente que colaboró en el sitio -->
<!-- <link rel="author" type="text/plain" href="humans.txt"/> -->
<!-- Mapa de sitio en formato XML http://www,sitemaps.org/
Generador de mapa de sitio http://www.xlm-sitemaps.com -->
<link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<link rel="stylesheet" href="css/estilos.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
!window.jQuery && document.write("<script src='js/jquery.min.js'><\/script>");
</script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/efectos.js"></script>
<script>
$(document).on("ready",mostrarPersonajes);
</script>

</head>

<body>
<header>
<h1>
<a href="index.html"><img src="img/top-cat-logo.png" title="Don Gato"></a>
</h1>
<nav>
<ul>
<!-- <li><a class="cambio" href="index.html">Inicio</a></li> -->
<li><a class="cambio" href="historia.html">Historia</a></li>
<li><a class="cambio" href="personajes.html">Personajes</a></li>
<li><a class="cambio" href="capitulos.html">Capítulos</a></li>
<li><a class="cambio" href="galeria.html">Galería</a></li>
</ul>
</nav>

</header>
<section id="contenido">
<section id="personajes-descripcion">
<h2>Top Cat</h2>
<p>
Top Cat, conocido en español como Don Gato y su pandilla o simplemente como Don Gato, es una serie animada para la televisión de apenas 30 episodios, ideada por el joven Luis Pistocchi y producida por Hanna-Barbera en 1961 y emitida en el horario estelar en la cadena ABC de los Estados Unidos a partir del 27 de septiembre de 1961 hasta el 8 de abril de 1962.
</p>
</section>
<section id="personajes-html5">
<div>
<!--si funciona con los li, pero por ahora no lo utilizaré
<ul>
<li id="don_gato_" class="personajes">
<a href="#">Don Gato</a>
</li>
<li id="benito_" class="personajes">
<a href="#">Benito</a>
</li>
</ul>-->
<figure id="don_gato_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/don.png" title="Don Gato" />
<figcaption class="cambio">Don Gato</figcaption>
</a>
</figure>
<figure id="benito_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/ben.png" title="Benito" />
<figcaption class="cambio">Benito</figcaption>
</a>
</figure>
<figure id="cucho_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/cu.png" title="Cucho" />
<figcaption class="cambio">Cucho</figcaption>
</a>
</figure>
<figure id="demostenes_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/demos.png" title="Demóstenes" />
<figcaption class="cambio">Demóstenes</figcaption>
</a>
</figure>

<figure id="espanto_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/espan.png" title="Espanto" />
<figcaption class="cambio">Espanto</figcaption>
</a>
</figure>
<figure id="panza_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/pan.png" title="Panza" />
<figcaption class="cambio">Panza</figcaption>
</a>
</figure>
<figure id="matute_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/matu.png" title="Matute" />
<figcaption class="cambio">Matute</figcaption>
</a>
</figure>

</div>
</section>


</section>

<footer>
Sitio Don gato por Fco. Hdez. Mayo 2013
</footer>

</body>
</html>

dejo el código js
archivo del archivo: efectos.js
Código: [Seleccionar]
//funcion del index.html
function iniciarSlider()
{
$(".flexslider").flexslider({
animation:"slide",
direction:"horizontal",
slideshowSpeed: 3000
});
}

//funcion de acerca.html
function formulaHTML5()
{
//alert("probando");
var imgFormula = $("#acerca-historia figure img");

imgFormula.on("mouseover",function(){
$(this).css({
background:"rgba(190,236,249,.6)",
borderRadius:"1em",
boxShadow:"-.1em -.1em .5em #F60 inset"
});
});

imgFormula.on("mouseout",function(){
$(this).css({
background:"transparent",
borderRadius:"0",
boxShadow:""
});
});

imgFormula.on("click",function(){
$("#acerca-historia figcaption").slideToggle(2000);
});
}



//funciones de personajes.html
function mostrarPersonajes()
{
//alert("Probando");
var figureId, figcaption, url;

$(".personajes").on("mouseover",function(){
figureId = $(this).attr("id");
//alert(figureId);
figcaption = "#"+figureId+" figcaption";
$(figcaption).animate({opacity:1},"swing");
});

$(".personajes").on("mouseout",function(){
figureId = $(this).attr("id");
//alert(figureId);
figcaption = "#"+figureId+" figcaption";
$(figcaption).animate({opacity:0},"swing");
});

$("#don_gato_").on("click",quePersonaje);
$("#benito_").on("click",quePersonaje);
$("#cucho_").on("click",quePersonaje);
$("#demostenes_").on("click",quePersonaje);
$("#espanto_").on("click",quePersonaje);
$("#panza_").on("click",quePersonaje);

$("#matute_").on("click",quePersonaje);


$(".ejemplo").fancybox();
}

function quePersonaje(enlace)
{
enlace.preventDefault();
figureId = $(this).attr("id");
url = "html/"+figureId+".html";
$("#personajes-descripcion").slideUp(2000,function(){
$(this).load(url);
}).slideDown(2000);
}

creo que la clave para resolver este asunto está en el final del código Js:
Código: [Seleccionar]
function quePersonaje(enlace)
{
enlace.preventDefault();
figureId = $(this).attr("id");
url = "html/"+figureId+".html";
$("#personajes-descripcion").slideUp(2000,function(){
$(this).load(url);
}).slideDown(2000);
}

Y me parece que debo incluir la funcion innerhtml() en el código html para poder adherir el párrafo que suplirá al de cada personaje, pero no sé cómo utilizar esta funcion.

Por favor, espero me puedan ayudar, ya llevo varios días tratando de resolver esto, pero no puedo.

Dios les Bendiga y les Conserve la Salud.
« Última modificación: 07 de Octubre 2014, 19:45 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Conseguir efecto como el de esta web
« Respuesta #1 en: 06 de Octubre 2014, 23:05 »
La explicación de innerHTML (y de muchas cosas más) la tienes aquí: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206


programador independiente

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 58
    • Ver Perfil
Re:Conseguir efecto como el de esta web
« Respuesta #2 en: 07 de Octubre 2014, 16:27 »
Que tal compañero Ogramar, un salud cordial.

Sabes, en días pasados le había echado una mirada a varios temas del curso de JavaScript que me indicas, justo en el tema de innerHTML, y fue entonces que me di a la tarea de investigar sobre esto, pero creo que no es exactamente lo que necesito, es decir, con esta funcion si reemplazo un texto, pero no de la forma en que yo lo requiero, y para ser sincero mencione lo de innerHTML (perdon po ello  :-X) por andar en este tema a tientas, la verdad es que no comprendo cómo realizar el efecto que necesito.

La verdad es que he buscado mucho en la red, y me encuentro con la manera de hacer bien las cosas pero en 2 partes separadas, me explico:

Alguien explica cómo cambiar el texto de una div de forma inmediata al dar click sobre una imagen o sobre un texto, incluso (lo más frecuente) sobre un botón.

luego en otro tema diferente, otra persona explica la funcionalidad que tiene "SlideDown y SlideUp"; pero nadie ha puesto un ejemplo de aplicar un Slideup+reemplazo de texto+SlideDown = a mi felicidad!!! jeje.

Sin embargo el efecto que busco sólo lo he visto en la web que puse como ejemplo en mi primer mensaje de este post, me refiero, a que cuando doy click en la imagen de alguno de los personajes, no me cambia el texto de inmadiato, sino que primero se ejecuta el SlideUp del elemento que contiene al párrafo, luego cambia el texto (el cambio del texto no se aprecia por el usuario) y finalmente se ejecuta el SlideDown y ya se puede apreciar que cambió el contenido del párrafo.

Mira, ayer hice lo siguiente:

Adherí el siguiente código justo antes del cierre del </head>:
Código: [Seleccionar]
<script type="text/javascript"> $(document).ready(function(){$("#don_gato_").click(function() {$('#personajes-descripcion').html("<p>Este contenido es el de Don Gato</p>");});});</script>
Y esto me resuelve el problema a la mitad, porque si bien si me sustituye el contenido del párrafo, pero no me lo hace de la forma correcta, es decir, al dar click en el personaje de "Don Gato" me cambia de inmediato el texto del párrafo y luego comienza el desplazamiento del elemento hacia arriba y luego hacia abajo. Entonces teniendo en cuenta esto lo que me restaría por resolver es cómo hago para que las acciones las ejecute al revés, es decir, que al dar click sobre un personaje primero suba el elemento y cuando baje ya me haya cambiado el contenido del párrafo, tal cual como se ve en la página: http://bextlan.com/proyectos/alumnos/don-gato/personajes.html

Muchas gracias por todo compañero Ogramar, espero no ser un fastidio, pero es que necesito resolver este detalle lo más pronto posible y no encuentro respuesta por ningún lado.

Dios te Bendiga y te Conserve la Salud.
« Última modificación: 07 de Octubre 2014, 17:03 por programador independiente »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Conseguir efecto como el de esta web
« Respuesta #3 en: 07 de Octubre 2014, 19:43 »
Hola de nuevo, te veo dándole muchas vueltas y lo que se me ocurre son dos cosas. Si quieres hacerlo tú mismo comprendiendo lo que haces tendrías que ir a los conocimientos fundamentales para poder programarlo:

HTML -- > http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

CSS -- > http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

JavaScript --> http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Y si simplemente quieres que funcione sin saber cómo, coge el código de esta página y cópialo (tendrás que hacer algunas modificaciones en rutas, etc.).

Te pongo adjuntos 3 archivos, guárdalos en tu pc y pulsa sobre personajes.html para ver cómo trabaja el código

Salu2

programador independiente

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 58
    • Ver Perfil
Re:Conseguir efecto JavaScript imagen que sube y baja al hacer click
« Respuesta #4 en: 07 de Octubre 2014, 22:22 »
Gracias por responder compañero Ogramar.

Sabes, el código que pegué en un pricipio hace lo mismo que los archivos que me has adjuntado, es decir, sólo ejecuta el slideup y el slidedown, pero el párrafo sigue siendo el mismo cada vez que sube y baja y es ahí en donde está el detalle que no puedo solucionar.

Por eso digo que la clave para que cargue el texto de cada personaje está en esta línea de código:
Código: [Seleccionar]
url = "html/"+figureId+".html";
$("#personajes-descripcion").slideUp(2000,function(){
$(this).load(url);
}).slideDown(2000);

Osea, lo que interpreto aquí es que:

1. Tome el contenedor con el id=personajes-descripcion
2. lo suba a 2000 milisegundos
3. ejecute la funcion de cargar la url (la cual contiene el nuevo texto del personaje que elegí)
4. baje a 2000 milisegundos

y por supuesto cuando baja el contenedor, ya trae el nuevo texto del párrafo.

lo que no logro interpretar es la primer línea:
Código: [Seleccionar]
url = "html/"+figureId+".html";
lo que supongo de esta línea es: que la url es igual a carpeta html+ el id de la imagen con extensión .html pero no logro resolver el enigma jeje.

Bueno seguiré investigando, si lo resuelvo por supuesto que regreso a poner la solución.

Si tienes alguna idea o sugerencia de por donde estaría la solución, te agradecería mucho me la hicieras saber.

Saludos, Dios te Bendiga y te Conserve la Salud.
« Última modificación: 07 de Octubre 2014, 22:25 por programador independiente »

programador independiente

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 58
    • Ver Perfil
Re:Conseguir efecto JavaScript imagen que sube y baja al hacer click
« Respuesta #5 en: 07 de Octubre 2014, 22:45 »
Que tal compañero Ogramar.

Esto lo debí decir desde un principio.

Si vas a la web: http://bextlan.com/proyectos/alumnos/don-gato/personajes.html

y das click derecho sobre el contendor color morado e inspeccionas el elemento y revisas el código, justo en donde comienza el section id=contenedor te encontrarás lo siguiente:
Código: [Seleccionar]
<section id="personajes-descripcion">
<h2>Top Cat</h2>
<p>
Top Cat, conocido en español como Don Gato y su pandilla o simplemente como Don Gato, es una serie animada para la televisión de apenas 30 episodios, ideada por el joven Luis Pistocchi y producida por Hanna-Barbera en 1961 y emitida en el horario estelar en la cadena ABC de los Estados Unidos a partir del 27 de septiembre de 1961 hasta el 8 de abril de 1962.
</p>
</section>

Ahora si vuelves a la web y das click por ejemplo en el primer personaje "Don Gato"
y le das click derecho al contenedor morado e inspeccionas el elemento y revisas el código, justo en donde comienza el section id=contenedor te encontrarás lo siguiente:
Código: [Seleccionar]
<section id="personajes-descripcion" style="display: block;">
<hgroup>
<!-- <h2>Implementaciones HTML5</h2> -->
<h3>Don Gato</h3>
</hgroup>
<div>
<p>
Don Gato, un gato amarillo con sombrero, chaleco violeta es el protagonista de la serie y líder de la pandilla de gatos, alrededor de los cuales la serie gira. Don Gato es traspuesto y persuasivo, un líder que puede también ser un amigo. En varias ocasiones la pandilla no hace caso a Don Gato, o malinterpretan sus intenciones, con resultados desastrosos.
</p>
<!-- <a href="#tecnologias-ejemplo" class="cambio ejemplo">Ver ejemplo de Semántica</a> -->
</div>

Como verás cambia el contenido del párrafo, según el personaje que elijas, además de agregar un hgroup entre otras cosillas, pero no logró dar con la forma de cómo es que saca este nuevo párrafo en pantalla al ejecutar el slideUp y el slideDown.

Entonces concluyendo, me hago a mi mismo 3 preguntas:

1. Acaso el que realizo esta web escondió algunas líneas de código Java?
2. Realizó un documento html de donde obtiene los párrafos de cada personaje cargando la url del mismo?
3. Si la respuesta no es ninguna de las anteriores: Qué me estoy perdiendo aquí? Hay algún detalle que no he visto aún?

Saludos, Dios te Bendiga y te Conserve la Salud.
« Última modificación: 07 de Octubre 2014, 23:11 por programador independiente »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Conseguir efecto JavaScript imagen que sube y baja al hacer click
« Respuesta #6 en: 08 de Octubre 2014, 08:06 »
Del código JavaScript se ve que está extrayendo el texto desde direcciones del tipo http://bextlan.com/proyectos/alumnos/don-gato/html/benito_.html (si cambias benito_ por cucho_ obtendrás el de cucho y así sucesivamente). Al tenerlo como ruta relativa no te carga en local.

En teoría podrías usar esa dirección absoluta (url) para ejecutarlo en local, pero parece que no lo admite por restricciones de la función / navegador (algunas funcionalidades son restringidas por los navegadores por motivos de privacidad, derechos de autor, etc.) debido a que esa ruta absoluta no se considera un recurso local.

Para hacerlo funcionar guárdate los ficheros html y modifica la ruta.

El fragmento de código quedaría así:

Código: [Seleccionar]
function quePersonaje(enlace)
{
enlace.preventDefault();
figureId = $(this).attr("id");
url = ""+figureId+".html";
$("#personajes-descripcion").slideUp(2000,function(){
$(this).load(url);
}).slideDown(2000);
}

Y tienes que guardarte los html en la misma carpeta (te adjunto un par de html, para el resto de personajes tendrías que hacer lo mismo)

Con esto debería funcionarte  :D

programador independiente

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 58
    • Ver Perfil
Re:Conseguir efecto JavaScript imagen que sube y baja al hacer click
« Respuesta #7 en: 08 de Octubre 2014, 18:36 »
Caramba compañero Ogramar.

Funcionó!!! Eres un Master!!

Sabes, ayer por la noche había intentado hacer algo similar a lo que me indicas en tu último mensaje, pero nunca encendí el servidor local (ya estaba cansado  ::) y no podía pensar con claridad  ;D) y ahora mismo al ver tu mensaje justo en la línea "para ejecutarlo en local" me percate de eso (acepto, insultos, comentarios, burlas, etc.. jajaja).

Muchas gracias compañero, te llevas todos los créditos!!

Ya estaba buscándole por otro lado, con decirte que ya hasta había elaborado un código con efecto de acordeón para utilizarlo en vez de este jejeje.

Pero que bien, que me has dado la solución, gracias infinitas, te debo una  ;)!!!

Saludos, Dios te Bendiga y te Conserve la Salud.
« Última modificación: 08 de Octubre 2014, 19:15 por programador independiente »

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".