Hola a todos.
Tengo el siguiente problema. tengo un carousel que funciona perfectamente con contenidos estaticos e intente hacerlo que sirva con contenido dinamico usando ajax. pues sirve a medias
ya que cuando uso el ajax el js de carousel me arroja un alert de fallo pero el carousel sigue pasando normalmente en algunos navegadores.
index.html
Código:
<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="http://mp3.lolintlservices.com/developer/js/carousel/jcarousel.js"></script>
<title>Documento sin título</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
//ajax
function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}
//funcion cargar
function cargar(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina, true);
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML = ajax.responseText;
// Jcarousel asignado nuevamente despues del cargado en ajax
function mycarousel_initCallback(carousel){
$('#btprev').bind('click', function() {
carousel.prev();
return false;
});
$('#btnext').bind('click', function() {
carousel.next();
return false;
});
};
$("#Jcarousel").jcarousel({ scroll: 1, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null });
// Jcarousel asignado nuevamente despues del cargado en ajax
}}
ajax.send(null);
}
// evento boton cargar colores
$('#cargar').bind('click', function() {
cargar('colores.html','contenedor');
return false;
});
// Jcarousel
function mycarousel_initCallback(carousel){
$('#btprev').bind('click', function() {
carousel.prev();
return false;
});
$('#btnext').bind('click', function() {
carousel.next();
return false;
});
};
$("#Jcarousel").jcarousel({ scroll: 1, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null });
});
// Jcarousel
</script>
<div style="width:200px; height:200px;" id="contenedor">
<ul id="Jcarousel">
<li style="width:200px;height:200px;background-color:#06C">1111 </li>
<li style="width:200px;height:200px;background-color:#339">2222 </li>
<li style="width:200px;height:200px;background-color:#6C9">3333 </li>
<li style="width:200px;height:200px;background-color:#FC3">4444 </li>
</ul>
</div>
<a href="#" id="btprev" style="text-decoration:none; color:#707070; width:56px;">Anterior</a>
<a href="#" id="btnext" style="text-decoration:none; color:#707070; width:56px ">Siguiente</a> <br /><br />
<a href="#" id="cargar" >Cargar nuevos colores</a>
</body>
</html>
y esta es la que se carga con el ajax.
colores.html
Código:
<ul id="Jcarousel">
<li style="width:200px;height:200px;background-color:#F3F">5555 </li>
<li style="width:200px;height:200px;background-color:#FF0">6666 </li>
<li style="width:200px;height:200px;background-color:#969">7777 </li>
<li style="width:200px;height:200px;background-color:#6C3">8888 </li>
</ul>
NOTA: si le quito la alert de error que envia el JS del carousel , funciona bien en algunos navegadores y en otros no.
GRACIAS espero que puedan ayudarme
. Salu2