- Tema Autor
- #1
Buenas Tardes, Dias o Noches Srs.
Ya tiempo q me registre en este interesante foro en el cual se aprenden muchas cosas, pero hoy en mi 1er post tal vez tenga algo q ofrecer en mi interrogante y pues, si me pueden ayudar seria genial .
Mi interrogante de ahora tal vez le haya sucedido a algunos o sino, les pueda suceder mas adelante, a lo q va de diseñar y programar con el famoso Jquery. : )
Estoy haciendo una página web, en la cual quiero q; al darle click en cierto hipervínculo (<a> ó cualquier elemento); me carge en un DIV una nueva pagina adherida (la cual contiene animaciones JQuery), todo eso en una sola pagina llamada “pagina1.html”
El código es el sgte:
“pagina1.html”:
<head>
<script type="text/javascript" src="../js/jquery.js"></script>
</head
<body>
<a class="ddd" href="#">MUESTRAME LA ANIMACION DE PAGINA2 EN EL DIV YOYO</a>
<div id="yoyo"> </div>
<script type="text/javascript">
$("a.ddd").click(function(){
$("#yoyo").load(
"pagina2.html"
)
})
</script>
</body>
Weno, Quiero q, en la “pagina1.html” me cargue la “pagina2.html” con unos efectos animados con JQuery lo cual los cogi desde esta página => http://css-tricks.com/revealing-photo-slider/ --bueno, en si cogi todo el archivo xD, pero igual se los recomiendo- Aquello fue lo q pegué en la pagina2.html .
Este es el código del “index.html” de la pagina q les recomendé antes, por si no desean visitar esa pagina y descargar todo el .rar q hay ahí;
“pagina2.html”:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Revealing Photo Slider with jQuery by CSS-Tricks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="page-wrap">
<h1>Revealing Photo Slider</h1>
<table><tr>
<td><div class="photo_slider">
<img src="images/mthood.jpg"/>
<div class="info_area">
<h3>Climbing Mt. Hood</h3>
<p><em>By: <a href="http://flickr.com/photos/kevinomara/">Brother O'Mara</a></em></p>
</div>
</div></td>
<td><div class="photo_slider">
<img src="images/baloon.jpg"/>
<div class="info_area">
<h3>Climbing Mt. Hood</h3>
<p><em>By: <a href="http://flickr.com/photos/kevinomara/">Brother O'Mara</a></em></p>
</div>
</div></td>
<td><div class="photo_slider">
<img src="images/lighthouse.jpg"/>
<div class="info_area">
<h3>Lighthouse Rays</h3>
<p><em>By: <a href="http://flickr.com/photos/nzdave/">(nz)dave</a></em></p>
</div>
</div></td>
<td><div class="photo_slider">
<img src="images/giraffe.jpg"/>
<div class="info_area">
<h3>Pucker up!</h3>
<p><em>By: <a href="http://flickr.com/photos/ucumari/">ucumari</a></em></p>
</div>
</div></td>
</tr></table>
</div>
<script type="text/javascript" src="js/photorevealer.js"></script>
</body>
</html>
Como verán… Si ejecuto solo la pagina2.html , esta todo OK, - realiza su efecto en perfecto estado- , pero si, lo ejecuto desde el link de la primera pagina (ese q dice: MUESTRAME LA ANIMACION DE PAGINA2 EN EL DIV YOYO), Lo ejecuta como si no se hubiera hecho nada en Jquery -
=S …
Por favor estaría extremadamente agradecido con Uds si es q por ahí me brinden alguna pista, sugerencia, opinión , ayuda … el cual me dirija a la solución.
P
porsiacaso no lo quiero poner en la Pagina1.html porque quiero q mi web sea mas liviana.
Saludos
Carloz
Ya tiempo q me registre en este interesante foro en el cual se aprenden muchas cosas, pero hoy en mi 1er post tal vez tenga algo q ofrecer en mi interrogante y pues, si me pueden ayudar seria genial .
Mi interrogante de ahora tal vez le haya sucedido a algunos o sino, les pueda suceder mas adelante, a lo q va de diseñar y programar con el famoso Jquery. : )
Estoy haciendo una página web, en la cual quiero q; al darle click en cierto hipervínculo (<a> ó cualquier elemento); me carge en un DIV una nueva pagina adherida (la cual contiene animaciones JQuery), todo eso en una sola pagina llamada “pagina1.html”
El código es el sgte:
“pagina1.html”:
<head>
<script type="text/javascript" src="../js/jquery.js"></script>
</head
<body>
<a class="ddd" href="#">MUESTRAME LA ANIMACION DE PAGINA2 EN EL DIV YOYO</a>
<div id="yoyo"> </div>
<script type="text/javascript">
$("a.ddd").click(function(){
$("#yoyo").load(
"pagina2.html"
)
})
</script>
</body>
Weno, Quiero q, en la “pagina1.html” me cargue la “pagina2.html” con unos efectos animados con JQuery lo cual los cogi desde esta página => http://css-tricks.com/revealing-photo-slider/ --bueno, en si cogi todo el archivo xD, pero igual se los recomiendo- Aquello fue lo q pegué en la pagina2.html .
Este es el código del “index.html” de la pagina q les recomendé antes, por si no desean visitar esa pagina y descargar todo el .rar q hay ahí;
“pagina2.html”:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Revealing Photo Slider with jQuery by CSS-Tricks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="page-wrap">
<h1>Revealing Photo Slider</h1>
<table><tr>
<td><div class="photo_slider">
<img src="images/mthood.jpg"/>
<div class="info_area">
<h3>Climbing Mt. Hood</h3>
<p><em>By: <a href="http://flickr.com/photos/kevinomara/">Brother O'Mara</a></em></p>
</div>
</div></td>
<td><div class="photo_slider">
<img src="images/baloon.jpg"/>
<div class="info_area">
<h3>Climbing Mt. Hood</h3>
<p><em>By: <a href="http://flickr.com/photos/kevinomara/">Brother O'Mara</a></em></p>
</div>
</div></td>
<td><div class="photo_slider">
<img src="images/lighthouse.jpg"/>
<div class="info_area">
<h3>Lighthouse Rays</h3>
<p><em>By: <a href="http://flickr.com/photos/nzdave/">(nz)dave</a></em></p>
</div>
</div></td>
<td><div class="photo_slider">
<img src="images/giraffe.jpg"/>
<div class="info_area">
<h3>Pucker up!</h3>
<p><em>By: <a href="http://flickr.com/photos/ucumari/">ucumari</a></em></p>
</div>
</div></td>
</tr></table>
</div>
<script type="text/javascript" src="js/photorevealer.js"></script>
</body>
</html>
Como verán… Si ejecuto solo la pagina2.html , esta todo OK, - realiza su efecto en perfecto estado- , pero si, lo ejecuto desde el link de la primera pagina (ese q dice: MUESTRAME LA ANIMACION DE PAGINA2 EN EL DIV YOYO), Lo ejecuta como si no se hubiera hecho nada en Jquery -
=S …Por favor estaría extremadamente agradecido con Uds si es q por ahí me brinden alguna pista, sugerencia, opinión , ayuda … el cual me dirija a la solución.
P
porsiacaso no lo quiero poner en la Pagina1.html porque quiero q mi web sea mas liviana.Saludos
Carloz
