Tema: Problema carga carrusel: imágenes apiladas
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 16/01/2012, 10:39
moniliformis
 
Fecha de Ingreso: enero-2012
Mensajes: 3
Antigüedad: 12 años, 3 meses
Puntos: 0
Solucionado. Problema carga carrusel: imágenes apiladas
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Docs. del LLano</title>
  6. <link rel="shortcut icon" href="imatges/favicon.ico">
  7. <link href="css/estilo.css" rel="stylesheet" type="text/css" />
  8. <script src="js/jquery.js"></script>
  9.  
  10.  
  11. <script type="text/javascript">
  12.  
  13. $.fn.infiniteCarousel = function () {
  14.  
  15.     function repeat(str, num) {
  16.         return new Array( num + 1 ).join( str );
  17.     }
  18.   
  19.     return this.each(function () {
  20.         var $wrapper = $('> div', this).css('overflow', 'hidden'),
  21.             $slider = $wrapper.find('> ul'),
  22.             $items = $slider.find('> li'),
  23.             $single = $items.filter(':first'),
  24.             
  25.             singleWidth = $single.outerWidth(), 
  26.             visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
  27.             currentPage = 1,
  28.             pages = Math.ceil($items.length / visible);            
  29.  
  30.  
  31.         // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
  32.         if (($items.length % visible) != 0) {
  33.             $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
  34.             $items = $slider.find('> li');
  35.         }
  36.  
  37.         // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
  38.         $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
  39.         $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
  40.         $items = $slider.find('> li'); // reselect
  41.         
  42.         // 3. Set the left position to the first 'real' item
  43.         $wrapper.scrollLeft(singleWidth * visible);
  44.         
  45.         // 4. paging function
  46.         function gotoPage(page) {
  47.             var dir = page < currentPage ? -1 : 1,
  48.                 n = Math.abs(currentPage - page),
  49.                 left = singleWidth * dir * visible * n;
  50.             
  51.             $wrapper.filter(':not(:animated)').animate({
  52.                 scrollLeft : '+=' + left
  53.             }, 500, function () {
  54.                 if (page == 0) {
  55.                     $wrapper.scrollLeft(singleWidth * visible * pages);
  56.                     page = pages;
  57.                 } else if (page > pages) {
  58.                     $wrapper.scrollLeft(singleWidth * visible);
  59.                     // reset back to start position
  60.                     page = 1;
  61.                 } 
  62.  
  63.                 currentPage = page;
  64.             });                
  65.             
  66.             return false;
  67.         }
  68.         
  69.         $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
  70.         
  71.         // 5. Bind to the forward and back buttons
  72.         $('a.back', this).click(function () {
  73.             return gotoPage(currentPage - 1);                
  74.         });
  75.         
  76.         $('a.forward', this).click(function () {
  77.             return gotoPage(currentPage + 1);
  78.         });
  79.         
  80.         // create a public interface to move to a specific page
  81.         $(this).bind('goto', function (event, page) {
  82.             gotoPage(page);
  83.         });
  84.     });  
  85. };
  86.  
  87. $(document).ready(function () {
  88.   $('.infiniteCarousel').infiniteCarousel();
  89. });
  90. </script>
  91. <link href="css/estil.css" rel="stylesheet" type="text/css" />
  92. <!--[if IE 6]>
  93. <link href="css/ie6.css" rel="stylesheet" type="text/css" />
  94. <![endif]-->
  95. <script language="JavaScript" type="text/JavaScript">
  96. <!--
  97.  
  98. function MM_preloadImages() { //v3.0
  99.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  100.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  101.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  102. }
  103.  
  104. function MM_findObj(n, d) { //v4.01
  105.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  106.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  107.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  108.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  109.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  110. }
  111.  
  112. function MM_nbGroup(event, grpName) { //v6.0
  113.   var i,img,nbArr,args=MM_nbGroup.arguments;
  114.   if (event == "init" && args.length > 2) {
  115.     if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
  116.       img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
  117.       if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
  118.       nbArr[nbArr.length] = img;
  119.       for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
  120.         if (!img.MM_up) img.MM_up = img.src;
  121.         img.src = img.MM_dn = args[i+1];
  122.         nbArr[nbArr.length] = img;
  123.     } }
  124.   } else if (event == "over") {
  125.     document.MM_nbOver = nbArr = new Array();
  126.     for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
  127.       if (!img.MM_up) img.MM_up = img.src;
  128.       img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
  129.       nbArr[nbArr.length] = img;
  130.     }
  131.   } else if (event == "out" ) {
  132.     for (i=0; i < document.MM_nbOver.length; i++) {
  133.       img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  134.   } else if (event == "down") {
  135.     nbArr = document[grpName];
  136.     if (nbArr)
  137.       for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
  138.     document[grpName] = nbArr = new Array();
  139.     for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
  140.       if (!img.MM_up) img.MM_up = img.src;
  141.       img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
  142.       nbArr[nbArr.length] = img;
  143.   } }
  144. }
  145. //-->
  146. </script>
  147. </head>
  148. <body onload="MM_preloadImages('imatges/barranaveg/tarifa2.jpg','imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg','Image1','imatges/barranaveg/inici2.jpg')">
  149. <body onLoad="MM_preloadImages('imatges/barranaveg/clients2.jpg','imatges/barranaveg/contacte2.jpg')">
  150.     <div id="page-background"><img src="imatges/logobo.jpg" alt="Smile" name="Image1" width="100%" height="100%">
  151.       <table border="0" align="center" cellpadding="0" cellspacing="0" id="content"; name="content">        
  152.           <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>
  153.           <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>
  154.           <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>
  155.           <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>
  156.           <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> 
  157.     </table>
  158. </div>
  159. <!-- <div id="ie6pagewrap"> -->
  160. <div id="ie6pagecontainer">
  161.     <div id="page-background2"><img src="imatges/fonsbo.jpg" width="100%" height="100%" alt="Smile" /> </div>  
  162.     <div id="content2" align="center">
  163.                 <h1>Sed ut perspiciatis unde</h1>
  164.  
  165.                 <p>Sed ut perspiciatis unde </p>
  166.                 <h1>Lorem ipsum dolor sit amet</h1>
  167.                 
  168. <p>Go on, try it - resize your browser!</p>
  169. <div class="carouselc" id="carouselc">
  170. <h1 align="center">Carousel Infinito</h1>
  171.     
  172. <div class="infiniteCarousel">
  173.   <div style="overflow: hidden;" class="wrapper">
  174.     <ul>
  175.       <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>
  176.           
  177.           <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>
  178.         
  179.         <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>
  180.     </ul>        
  181.     </div><a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>
  182. </div>
  183. <p>ee</p>
  184. <p>&nbsp;</p>
  185.  
  186. <p>kljkj</p>
  187. <p>&nbsp;</p>
  188.     </div>
  189.      <!--END CONTENT2-->                
  190. </div>
  191.  
  192. <!-- </div> -->
  193. </body>
  194. </html>