Tema: ¿Cómo colocar dos veces el mismo Scroller?
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 30/05/2011, 03:10
quimfv
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 9 meses
Puntos: 574
Respuesta: ¿Cómo colocar dos veces el mismo Scroller?
Como su nombre indica los id deben ser únicos

id -> identificador

luego hay que tocar los scripts para que actuen sobre ellos
Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>News Slider</title>
  5.  
  6. <style type='text/css'>
  7.     .single_news_container1, 
  8.     .single_news_container2 { 
  9.         display:none; /* IMPORTANT: hide all the news containers */ 
  10.     }
  11.     body { font-family: 'Arial'; } /* just styling */
  12.     
  13.     .single_news_container h3,
  14.     .single_news_container2 h3 { padding:0px; margin:0px; margin-bottom:10px; }
  15.     
  16.     #news_navigation1,
  17.     #news_navigation2{
  18.     font-size:20px;
  19.     text-align:center;
  20.     padding:5px;
  21.     background-color: #000;
  22.     color:white;
  23. }
  24.     
  25.     #all_news_container1, #all_news_container2 { padding:10px; color:black; height:200px; border:1px solid #336499;}
  26.     
  27.     #wrapper, #wrapper2 { width:400px;  }
  28. </style>
  29.  
  30. <script type='text/javascript' src='js/jquery.js'></script>
  31.  
  32. <script type='text/javascript'>       
  33. var scrollers_No=2;
  34.  
  35. $(document).ready(function(){
  36.     var news_No= new Array();
  37.     var prev_html = '&lt;&lt'; 
  38.     var next_html = '&gt;&gt;';
  39.  
  40.     for (i=1;i<=scrollers_No;i++){
  41.         $('.single_news_container'+i+':first').fadeIn(100);
  42.         $('.single_news_container'+i+':first').addClass('news_visible'+i);
  43.         news_No[i]= $('.single_news_container'+i).length;   
  44.         $('#news_navigation'+i).html('<a href="javascript:prev_news('+i+');">' + prev_html + '</a> <span id="current_news_num'+i+'">1</span>/<span id="max_news_num'+i+'">' + news_No[i] +'</span><a href="javascript:next_news('+i+');">' + next_html + '</a>'); 
  45.     }
  46.         
  47.         
  48. });
  49.  
  50.  
  51. function prev_news(scroller){
  52.         
  53.             if($('.news_visible'+scroller).prev('.single_news_container'+scroller).length){
  54.             
  55.                 $('.news_visible'+scroller).fadeOut(100, function(){
  56.                     $('.news_visible'+scroller).removeClass('news_visible'+scroller).prev('.single_news_container'+scroller).addClass('news_visible'+scroller).fadeIn(100); 
  57.                     var current = parseInt($('#current_news_num'+scroller).text());
  58.                     if(current>1) $('#current_news_num'+scroller).text(current - 1);
  59.                 });
  60.             }    
  61.             
  62. }
  63.  
  64.  
  65. function next_news(scroller){
  66.             if($('.news_visible'+scroller).next('.single_news_container'+scroller).length){
  67.                 $('.news_visible'+scroller).fadeOut(100, function(){
  68.                     $('.news_visible'+scroller).removeClass('news_visible'+scroller).next('.single_news_container'+scroller).addClass('news_visible'+scroller).fadeIn(100); 
  69.                     var current = parseInt($('#current_news_num'+scroller).text());
  70.                     var maxNews = parseInt($('#max_news_num'+scroller).text());
  71.                     if(current<maxNews) $('#current_news_num'+scroller).text(current + 1);
  72.                 });
  73.             }  
  74. }
  75.  
  76. </script>
  77.  
  78. </head>
  79. <body>
  80.  
  81. <!--START THE DIV THAT WILL WRAP IT ALL UP-->
  82.  
  83. <div id='wrapper'>
  84.     
  85.     <!--START THE DIV THAT HOLDS ALL THE NEWS CONTAINERS-->
  86.     <div id='all_news_container1'>
  87.         
  88.         <!--START SINGLE NEWS CONTAINER-->
  89.         <div class='single_news_container1'>
  90.         
  91.             <!--PUT THE TITLE-->
  92.             <h3>Megaupload</h3>
  93.  
  94.             
  95.             <!--AND THE CONTENT-->
  96.             <p><A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A> <A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A></p>
  97.             
  98.         </div>
  99.         <!--END SINGLE NEW CONTAINER-->
  100.         
  101.         <!--AND REPEAT IT HOW MUCH TIMES YOU WANT...-->
  102.         <div class='single_news_container1'>
  103.             <h3>Why do we use it?</h3>
  104.  
  105.             <p><A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A> <A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A></p>
  106.         </div>
  107.         
  108.         <div class='single_news_container1'>
  109.             <h3>Where does it come from?</h3>
  110.             <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur.</p>
  111.         </div>
  112.  
  113.         
  114.         <div class='single_news_container1'>
  115.             <h3>Where can i get some?</h3>
  116.             <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
  117.         </div>
  118.         
  119.         <div class='single_news_container1'>
  120.             <h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
  121.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  122.  
  123.         </div>
  124.         <!--DONE WITH SINGLE NEWS CONTAINERS-->
  125.         
  126.             
  127.     </div>
  128.     <!--END THE DIV THAT HOLDS ALL THE NEWS CONTAINERS-->
  129.  
  130.     <!--AN EMPTY DIV WHERE JQUERY MADE NAVIGATION WILL BE-->
  131.     <div id='news_navigation1'></div>
  132.  
  133. </div>
  134.  
  135. <p>&nbsp;</p>
  136.  
  137.  
  138. <div id='wrapper2'>
  139.  
  140.     
  141.     <!--START THE DIV THAT HOLDS ALL THE NEWS CONTAINERS-->
  142.     <div id='all_news_container2'>
  143.         
  144.         <!--START SINGLE NEWS CONTAINER-->
  145.         <div class='single_news_container2'>
  146.         
  147.             <!--PUT THE TITLE-->
  148.             <h3>Rapidshare</h3>
  149.             
  150.             <!--AND THE CONTENT-->
  151.  
  152.             <p><A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A> <A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A></p>
  153.             
  154.         </div>
  155.         <!--END SINGLE NEW CONTAINER-->
  156.         
  157.         <!--AND REPEAT IT HOW MUCH TIMES YOU WANT...-->
  158.         <div class='single_news_container2'>
  159.             <h3>Why do we use it?</h3>
  160.             <p><A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A> <A HREF="http://www.megaupload.com/?d=31C787YE" TARGET="_new">http://www.megaupload.com/?d=31C787YE</A></p>
  161.  
  162.         </div>
  163.         
  164.         <div class='single_news_container2'>
  165.             <h3>Where does it come from?</h3>
  166.             <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur.</p>
  167.         </div>
  168.         
  169.         <div class='single_news_container2'>
  170.             <h3>Where can i get some?</h3>
  171.  
  172.             <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
  173.         </div>
  174.         
  175.         <div class='single_news_container2'>
  176.             <h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
  177.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  178.         </div>
  179.         <!--DONE WITH SINGLE NEWS CONTAINERS-->
  180.  
  181.         
  182.             
  183.     </div>
  184.     <!--END THE DIV THAT HOLDS ALL THE NEWS CONTAINERS-->
  185.  
  186.     <!--AN EMPTY DIV WHERE JQUERY MADE NAVIGATION WILL BE-->
  187.     <div id='news_navigation2'></div>
  188.  
  189. </div>
  190.  
  191. <!--END THE WRAPPING DIV-->
  192.   
  193. </body>
  194. </html>


Seguro que hay formas mas elegantes de resolverlo... pero así funciona.
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
Última edición por quimfv; 30/05/2011 a las 08:15