Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/06/2012, 09:44
Avatar de rogertm
rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 19 años, 3 meses
Puntos: 638
Pregunta Mismo plugin no funciona en uno de tres sliders

Hola gente, estoy usando este plugin para manejar unos sliders en un proyecto que estamos terminando. El asunto es que funciona bien en dos de los lugares que lo uso, pero en un tercero no hace nada.

La configuración no es muy complicada, tiene varios parámetros que he puesto bien, al menos eso creo:
Aquí defino las clases que manejan los botones Anterior y Siguiente
Código Javascript:
Ver original
  1. var tab_buttons = {
  2.     previous:$('#idx-tabs .tab-prev'),
  3.     next:$('#idx-tabs .tab-next')
  4. };

Aquí las clases que manejan el contenido: wrapperSelector es el selector que contiene toda la caja, navOuterSelector y navItemsSelector no existen, pero en otro contexto no los ponía y tenía algunos problemas, luego todo se arregló, en este caso estén o no no funciona el slider:
Código Javascript:
Ver original
  1. $('#idx-tabs').lofJSidernews({
  2.     wrapperSelector: '.tabs-slide-wrapper',
  3.     navOuterSelector: '.tabs-nav-wrapper',
  4.     navItemsSelector: '.tabs-nav-wrapper li',
  5.     buttons: tab_buttons
  6. });

En general todo el código que maneja los tres sliders es el siguiente:
Código Javascript:
Ver original
  1. $(document).ready( function(){
  2.     /** Recursos Gratuitos Tabs Slider */
  3.     var tab_buttons = {
  4.         previous:$('#idx-tabs .tab-prev'),
  5.         next:$('#idx-tabs .tab-next')
  6.     };
  7.     $('#idx-tabs').lofJSidernews({
  8.         duration: 1200,
  9.         interval: 5000,
  10.         auto: true,
  11.         mainWidth: 530,
  12.         mainHeight: 40,
  13.         wrapperSelector: '.tabs-slide-wrapper',
  14.         navOuterSelector: '.tabs-nav-wrapper',
  15.         navItemsSelector: '.tabs-nav-wrapper li',
  16.         buttons: tab_buttons
  17.     });
  18.    
  19.     /** Widget One slider */
  20.     var widget_buttons = {
  21.         previous:$('#widget-one-wrapper .widget-prev'),
  22.         next:$('#widget-one-wrapper .widget-next')
  23.     };
  24.     $('#widget-one-wrapper').lofJSidernews({
  25.         duration: 1200,
  26.         interval: 5000,
  27.         auto: true,
  28.         mainWidth: 308,
  29.         mainHeight: 250,
  30.         navigatorWidth: 60,
  31.         navigatorHeight: 35,
  32.         maxItemDisplay: 5,
  33.         navPosition: 'horizontal',
  34.         wrapperSelector: '.widget-one-wrap-inner',
  35.         navOuterSelector: '.widget-one-nav-wrapper',
  36.         navItemsSelector: '.widget-one-nav-wrap-inner li',
  37.         buttons: widget_buttons
  38.     });
  39.  
  40.     /** Header Slider */
  41.     var slide_buttons = {
  42.         previous:$('#slider-wrapper .carousel-prev'),
  43.         next:$('#slider-wrapper .carousel-next')
  44.     };
  45.     $('#slider-wrapper').lofJSidernews({
  46.         duration: 1200,
  47.         interval: 5000,
  48.         auto: true,
  49.         mainWidth: 590,
  50.         mainHeight: 230,
  51.         navigatorWidth: 400,
  52.         navigatorHeight: 90,
  53.         maxItemDisplay: 3,
  54.         wrapperSelector: '.sliders-inner-wrapper',
  55.         navOuterSelector: '.slider-nav-wrapper',
  56.         navItemsSelector: '.slider-nav-wrapper-inner li',
  57.         buttons: slide_buttons
  58.     });
  59.  
  60. });

El código html que tengo es algo como esto:
Código HTML:
Ver original
  1. <div id="idx-tabs" class="nav-tabs index-tabs">
  2.     <div class="tabs-wrapper tabs-slide-wrapper">
  3.         <ul>
  4.             <li>Universidad</li>
  5.             <li>Matemática</li>
  6.             <li>Cultura General</li>
  7.         </ul>
  8.     </div><!-- .tabs-wrapper -->
  9.     <div class="tabs-control">
  10.         <span class="tab-prev">&laquo;</span>
  11.         <span class="tab-next">&raquo;</span>
  12.     </div>
  13. </div><!-- #idx-tabs -->

El plugin lo que hace es que le asigna a la clase .tabs-slide-wrapper un left:0, que debería cambiar a -Npx a medida que camina el slider, al que luego le tengo que asignar un position:absolute con respecto a su contenedor, hasta ahí todo OK, pero al usar los botones no funcionan, tampoco cambiando el parámetro auto: true/false

Pueden ver aquí los tres sliders en cuestión, el del problema es el de las tabs en Recursos Gratuitos http://ceformat.s4w.biz/index/recursos-gratuitos

Muchas gracias de antemano
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose