Problema carga carrusel: imágenes apiladas

moniliformis · #1 (**permalink**) 10/01/2012, 18:54

Hola a todos,
Resulta que en la página donde quiero poner un carrusel de jquery, éste se carga mal: no funciona y las imágenes aparecen apiladas. No sé si se trata de algún conflicto o no, pero esto ya no lo sé solucionar sólo. Gracias por la ayuda que me podáis prestar.
Aquí está el código html:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Header &amp; Footer: Cross Browser</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
 
 
<script type="text/javascript" src="js/jquery.js"></script> >
    jQuery.noConflict();
 
    jQuery.fn.infiniteCarousel = function () {
 
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var jQuery.wrapper = jQuery('> div', this).css('overflow', 'hidden'),
            jQuery.slider = jQuery.wrapper.find('> ul'),
            jQuery.items = jQuery.slider.find('> li'),
            jQuery.single = jQuery.items.filter(':first'),
            
            singleWidth = jQuery.single.outerWidth(), 
            visible = Math.ceil(jQuery.wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil(jQuery.items.length / visible);            
 
 
        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if ((jQuery.items.length % visible) != 0) {
            jQuery.slider.append(repeat('<li class="empty" />', visible - (jQuery.items.length % visible)));
            jQuery.items = jQuery.slider.find('> li');
        }
 
        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        jQuery.items.filter(':first').before(jQuery.items.slice(- visible).clone().addClass('cloned'));
        jQuery.items.filter(':last').after(jQuery.items.slice(0, visible).clone().addClass('cloned'));
        jQuery.items = jQuery.slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        jQuery.wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            jQuery.wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    jQuery.wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    jQuery.wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 
 
                currentPage = page;
            });                
            
            return false;
        }
        
        jQuery.wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        // 5. Bind to the forward and back buttons
        jQuery('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        jQuery('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        jQuery(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};
 
jQuery(document).ready(function () {
  jQuery('.infiniteCarousel').infiniteCarousel();
});
</script>
<link href="css/estil.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
 
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>
</head>
<body onload="MM_preloadImages('imatges/barranaveg/inici2.jpg','imatges/barranaveg/serveis2.jpg','imatges/barranaveg/tarifa2.jpg','imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg','Image1')">
<body onLoad="MM_preloadImages('imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg')">
    <div id="page-background"><img src="imatges/logobo.jpg" alt="Smile" name="Image1" width="100%" height="100%">
      <table id="content"; border="0" align="center" cellpadding="0" cellspacing="0">       
          <td><a href="blanc.htm" target="_top" onclick="MM_goToURL('parent','blanc.htm');return document.MM_returnValue;MM_nbGroup('down','group1','inici1','',1)" onMouseOver="MM_nbGroup('over','inici1','imatges/barranaveg/inici2.jpg','Image1',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/inici1.jpg" alt="" name="inici1" width="100%" height="34" border="0"></a></td>
          <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','serveis1','imatges/barranaveg/serveis2.jpg','Image1','imatges/barranaveg/serveis2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/serveis1.jpg" alt="" name="serveis1" width="100%" height="34" border="0" onload=""></a></td>
          <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','tarifa1','imatges/barranaveg/tarifa2.jpg','Image1','imatges/barranaveg/tarifa2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/tarifa1.jpg" alt="" name="tarifa1" width="100%" height="34" border="0" onload=""></a></td>
          <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','clients1','imatges/barranaveg/clients2.jpg','Image1','imatges/barranaveg/clients2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/clients1.jpg" alt="" name="clients1" width="100%" height="34" border="0" onload=""></a></td>
          <td><a href="javascript:;" onMouseOver="MM_nbGroup('over','contacte1','imatges/barranaveg/contacte2.jpg','Image1','imatges/barranaveg/contacte2.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/contacte1.jpg" alt="" name="contacte1" width="100%" height="34" border="0" onload=""></a></td> 
    </table>
</div>
<!-- <div id="ie6pagewrap"> -->
<div id="ie6pagecontainer">
    <div id="page-background2"><img src="imatges/fonsbo.jpg" width="100%" height="100%" alt="Smile" /> </div>  
    <div id="content2" align="center">
                <h1>Sed ut perspiciatis unde</h1>
        <div class="carouselc" id="carouselc">
        <h1>Infinite Carousel</h1>
         
        <div class="Carousel Infinito">
          <div style="overflow: hidden;" class="wrapper">
            <ul>
              <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/1.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
         
                  <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/2.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
         
 
            </ul>
              </div><a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>
        </div>
        </div>
               
                <h1>Lorem ipsum dolor sit amet</h1>
                
 
    </div>
     <!--END CONTENT2-->                
</div>
 
<!-- </div> -->
</body>
</html>

dubafek · #2 (**permalink**) 10/01/2012, 22:02

Hola!

Si este es tu código original, hay algunos errores html que deben ser los que no permiten el normal funcionamiento. Los que vi yo fueron:
- En la línea 9 tienes un '>' suelto y luego no abres la etiqueta <script> para el código entre las líneas 10 y 89
- Abres dos veces la etiqueta <body>

Yo probaría arreglando eso, porque si no es ahí el error, podría estar en javascript (que no los miré mucho) o en la declaración de las imágenes para el carrusel. Eso se me ocurre a mi.

Ojalá puedas solucionarlo,

Saludos!!

moniliformis · #3 (**permalink**) 11/01/2012, 06:26

Hola, dubafek,
Gracias por responder tan deprisa y ya he hecho lo me me has dicho, pero no lo he solucionado. Se me olvidó decir que no entiendo mucho de programación.

Lo que me pasa es que el diseño de página que tengo me funciona perfectamente si trabajo con 2 marcos, superior e inferior. El problema que tenía con los marcos es que se me descentraban los contenidos cuando hacia zoom y en el marco inferior aparecía la barra de desplazamiento. Eso lo solucioné integrándolo todo en una sola página con una cabecera fija (antiguo marco superior), pero ahora lo que no funciona es el carrusel (que iba en el marco inferior), en el que solo me salen la imágenes apiladas.

He buscado mucho por internet y no parece que nadie haya tenido este problema.
Gracias por la ayuda que me podáis prestar y saludos a todos.

moniliformis · #4 (**permalink**) 16/01/2012, 10:39

Hola a todos,
Solucioné el problema copiando y pegando el código que me funcionaba en el contexto de los marcos, que comenté en mi mensaje anterior.
Aquí está mi código, por si tenéis curiosidad:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Docs. del LLano</title>
<link rel="shortcut icon" href="imatges/favicon.ico">
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
 
 
<script type="text/javascript">
 
$.fn.infiniteCarousel = function () {
 
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            
 
 
        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }
 
        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 
 
                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};
 
$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
</script>
<link href="css/estil.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script language="JavaScript" type="text/JavaScript">
<!--
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>
<body onload="MM_preloadImages('imatges/barranaveg/tarifa2.jpg','imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg','Image1','imatges/barranaveg/inici2.jpg')">
<body onLoad="MM_preloadImages('imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg')">
    <div id="page-background"><img src="imatges/logobo.jpg" alt="Smile" name="Image1" width="100%" height="100%">
      <table border="0" align="center" cellpadding="0" cellspacing="0" id="content"; name="content">        
          <td><a href="scrollunic.htm" target="_top" onclick="MM_nbGroup('down','group1','inici1','',1)" onMouseOver="MM_nbGroup('over','inici1','imatges/barranaveg/inici2.jpg','Image1',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/inici1.jpg" alt="" name="inici1" width="100%" height="34" border="0" onload=""></a></td>
          <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','serveis1','',1)" onMouseOver="MM_nbGroup('over','serveis1','','Image1',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/serveis3.jpg" alt="" name="serveis1" width="100%" height="34" border="0" onload=""></a></td>
          <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','tarifa1','',1)" onMouseOver="MM_nbGroup('over','tarifa1','imatges/barranaveg/tarifa2.jpg','Image1',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/tarifa1.jpg" alt="" name="tarifa1" width="100%" height="34" border="0" onload=""></a></td>
          <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','clients1','',1)" onMouseOver="MM_nbGroup('over','clients1','imatges/barranaveg/clients2.jpg','Image1',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/clients1.jpg" alt="" name="clients1" width="100%" height="34" border="0" onload=""></a></td>
          <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','contacte1','',1)" onMouseOver="MM_nbGroup('over','contacte1','imatges/barranaveg/contacte2.jpg','Image1',1)" onMouseOut="MM_nbGroup('out')"><img src="imatges/barranaveg/contacte1.jpg" alt="" name="contacte1" width="100%" height="34" border="0" onload=""></a></td> 
    </table>
</div>
<!-- <div id="ie6pagewrap"> -->
<div id="ie6pagecontainer">
    <div id="page-background2"><img src="imatges/fonsbo.jpg" width="100%" height="100%" alt="Smile" /> </div>  
    <div id="content2" align="center">
                <h1>Sed ut perspiciatis unde</h1>
 
                <p>Sed ut perspiciatis unde </p>
                <h1>Lorem ipsum dolor sit amet</h1>
                
<p>Go on, try it - resize your browser!</p>
<div class="carouselc" id="carouselc">
<h1 align="center">Carousel Infinito</h1>
    
<div class="infiniteCarousel">
  <div style="overflow: hidden;" class="wrapper">
    <ul>
      <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/1.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
          
          <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/2.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
        
        <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/13.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
    </ul>        
    </div><a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>
</div>
<p>ee</p>
<p>&nbsp;</p>
 
<p>kljkj</p>
<p>&nbsp;</p>
    </div>
     <!--END CONTENT2-->                
</div>
 
<!-- </div> -->
</body>
</html>