Error al cargar un carrusel usando la función ahah de ajax Una ves mas necesito de su valiosa ayuda.
Tengo una pagina en la que utilizo la función ajax ahah que encontré en Internet para poder cargar una pagina dentro de un div y de esta forma evitar que se recargue nuevamente todo el sitio web.
El carrusel de imágenes funciona correctamente al llamarlo desde su propia url,pero al llamarla usando ajax no llama al carrusel, el carrusel esta programado en jquery.
Aquí les dejo el link para que vean el problema.[URL="http://sancarlosapopa.webcindario.com/carruseljquery/"]http://sancarlosapopa.webcindario.com/carruseljquery/[/URL].
Aquí les coloco el código de index.php
Código:
Aquí el link de llamada.php<html>
<head>
<title>
Error al usar include
</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script type="text/javascript" src="js/funtions.js"></script>
<script>
$(function(){
$('#carousel').infiniteCarousel({
imagePath: '',
transitionSpeed:300,
displayTime: 6000,
internalThumbnails: false,
thumbnailType: 'buttons',
customClass: 'myCarousel',
progressRingColorOpacity: '0,0,0,.9',
progressRingBackgroundOn: false,
margin: 10,
easeLeft: 'easeOutExpo',
easeRight:'easeOutQuart',
inView: 1,
advance: 1,
autoPilot: true,
prevNextInternal: true,
autoHideCaptions: false
});
});
</script>
</head>
<body>
<h1>Texto del index</h1>
Este link llama a carrusel atravez de include.
<a href="llamada.php">Ir a llamada.php</a><br/>
<a href="javascript:void(0)" onclick="ahah1('llamada.php','principal')">Ir a</a>
<div id="principal">
Contenido original.
</div>
</body>
</html>
Código:
Aquí el link para carrusel.php<a href="index.php">Regresar al Index</a>
<?php
echo "Echo del include";
include("carrusel.php");
?>
Código:
aquí esta el código para la función ajax ahah fuctions.js<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Infinite Carousel 3 Demo</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
$(function(){
$('#carousel').infiniteCarousel({
imagePath: '',
transitionSpeed:300,
displayTime: 6000,
internalThumbnails: false,
thumbnailType: 'buttons',
customClass: 'myCarousel',
progressRingColorOpacity: '0,0,0,.9',
progressRingBackgroundOn: false,
margin: 10,
easeLeft: 'easeOutExpo',
easeRight:'easeOutQuart',
inView: 1,
advance: 1,
autoPilot: true,
prevNextInternal: true,
autoHideCaptions: false
});
});
</script>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
body {
background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top, #cccccc 0%, #888888 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#888888)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cccccc 0%,#888888 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cccccc 0%,#888888 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cccccc 0%,#888888 100%); /* IE10+ */
background: linear-gradient(top, #cccccc 0%,#888888 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#888888',GradientType=0 ); /* IE6-9 */
}
div.ic_myCarousel {
margin: 100px auto 0 auto;
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
clear:right;
background: #eee;
}
.ic_myCarousel .ic_button {
background: #999;
width: 10px;
height: 10px;
position: relative;
float: left;
margin-right: 6px;
border-radius: 10px;
margin-top: 1px;
border: 1px solid #eee;
}
.ic_myCarousel .ic_thumbnails {
box-shadow: 0px 1px 4px #666;
position: relative;
overflow: auto;
border-radius: 10px;
padding: 2px 6px;
height: 14px;
margin: 0 auto;
display: inline-block;
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(187,187,187,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(187,187,187,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(187,187,187,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(187,187,187,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(187,187,187,1) 100%);
background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(187,187,187,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#bbbbbb',GradientType=0 );
}
/* keep this after the ic_button code for proper border coloring */
.ic_myCarousel2 .ic_active, .ic_myCarousel .ic_active, .ic_vidCarousel .ic_active {
background: #fff;
border: 1px solid #faa;
}
.ic_caption {
opacity: .6;
background: #fff;
font-size: 12px;
font-family: arial;
padding: 4px 8px;
width: auto;
}
div p {
color: #333333;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 18px;
text-shadow: 0 1px 1px #C9C9C9;
}
.options {
font-size: 16px;
}
</style>
</head>
<body>
<h4 style="margin:14px 20px 20px 0;float:right;font-family:Arial;color:#666666;font-weight:bold;text-shadow:0 1px 1px #eee;">
<a href="http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-infinite-carousel-plugin/" style="text-decoration:none;color:#666">Return to CatchMyFame's Infinite Carousel</a></h4>
<ul id="carousel">
<li><img width="600" height="338" alt="" src="p1.jpg" />
<p class="ic_caption">HTML1</p>
</li>
<li><img width="600" height="338" alt="" src="p2.jpg" />
<p><strong><em>HTML2</em></strong>.</p>
</li>
<li><img width="600" height="338" alt="" src="p3.jpg" />
<p><strong><em>HTML3</em></strong>.</p>
</li>
</ul>
</body>
</html>
Código:
Espero puedan ayudarme. o darme otra idea de como lograr el carrusel utilizando ajax para llamar la pagina.function ahah1(url,id) {
document.getElementById(id).innerHTML = 'loading data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(id);};
req.open("POST", url, true);
req.send(null);
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ahahDone(id);};
req.open("POST", url, true);
req.send();
}
}
}
function ahahDone(id) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(id).innerHTML = results;
} else {
document.getElementById(id).innerHTML="ahah error:\n" +
req.statusText;
}
}
}
Desde ya muchas Gracias.
