Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Slide

 Estas en el tema de Slide en el foro de Frameworks JS en Foros del Web. Amigos estoy viendo un plugin de jquery con un slide de imagenes necesito algunas ayudas que no se mucho el archivo se llama easy_slider1.7 por ...
  #1 (permalink)  
Antiguo 04/11/2010, 12:03
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 16 años, 7 meses
Puntos: 1
Slide
Amigos estoy viendo un plugin de jquery con un slide de imagenes necesito algunas ayudas que no se mucho el archivo se llama easy_slider1.7 por si lo conocen

primero el html
Código HTML: 
Ver original
  1. <div id="container">
  2.  
  3.  
  4.  
  5.     <div id="content">
  6.     
  7.         <div id="slider">
  8.             <ul>                
  9.                 <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
  10.                 <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
  11.                 <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
  12.                 <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
  13.                 <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
  14.             </ul>
  15.         </div>
  16.         
  17.     </div>
  18.  
  19. </div>
css por defecto

Código CSS: 
Ver original
  1. body {
  2.         background:#fff url(../images/bg_body.gif) repeat-x;
  3.         font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
  4.         color:#333;
  5.         line-height:180%;
  6.         margin:0;
  7.         padding:0;
  8.         text-align:center;
  9.     }
  10.     h1{
  11.         font-size:180%;
  12.         font-weight:normal;
  13.         margin:0;
  14.         padding:0 20px;
  15.         }
  16.     h2{
  17.         font-size:160%;
  18.         font-weight:normal;
  19.         }   
  20.     h3{
  21.         font-size:140%;
  22.         font-weight:normal;
  23.         }   
  24.     img{border:none;}
  25.     pre{
  26.         display:block;
  27.         font:12px "Courier New", Courier, monospace;
  28.         padding:10px;
  29.         border:1px solid #bae2f0;
  30.         background:#e3f4f9; 
  31.         margin:.5em 0;
  32.         width:674px;
  33.         }   
  34.             
  35.     /* image replacement */
  36.         .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
  37.             margin:0;
  38.             padding:0;
  39.             display:block;
  40.             overflow:hidden;
  41.             text-indent:-8000px;
  42.             }
  43.     /* // image replacement */
  44.             
  45.     #container{ 
  46.         margin:0 auto;
  47.         position:relative;
  48.         text-align:left;
  49.         width:696px;
  50.         background:#fff;        
  51.         margin-bottom:2em;
  52.         }   
  53.     #header{
  54.         height:80px;
  55.         line-height:80px;
  56.         background:#5DC9E1;
  57.         color:#fff;
  58.         }               
  59.     #content{
  60.         position:relative;
  61.         }           
  62.  
  63. /* Easy Slider */
  64.  
  65.     #slider ul, #slider li,
  66.     #slider2 ul, #slider2 li{
  67.         margin:0;
  68.         padding:0;
  69.         list-style:none;
  70.         }
  71.     #slider2{margin-top:1em;}
  72.     #slider li, #slider2 li{ 
  73.         /* 
  74.             define width and height of list item (slide)
  75.             entire slider area will adjust according to the parameters provided here
  76.         */ 
  77.         width:696px;
  78.         height:241px;
  79.         overflow:hidden; 
  80.         }   
  81.     #prevBtn, #nextBtn,
  82.     #slider1next, #slider1prev{ 
  83.         display:block;
  84.         width:30px;
  85.         height:77px;
  86.         position:absolute;
  87.         left:-30px;
  88.         top:71px;
  89.         z-index:1000;
  90.         }   
  91.     #nextBtn, #slider1next{ 
  92.         left:696px;
  93.         }                                                       
  94.     #prevBtn a, #nextBtn a,
  95.     #slider1next a, #slider1prev a{  
  96.         display:block;
  97.         position:relative;
  98.         width:30px;
  99.         height:77px;
  100.         background:url(../images/btn_prev.gif) no-repeat 0 0;   
  101.         }   
  102.     #nextBtn a, #slider1next a{ 
  103.         background:url(../images/btn_next.gif) no-repeat 0 0;   
  104.         }

y el js
Código Javascript: 
Ver original
  1. (function($) {
  2.  
  3.     $.fn.easySlider = function(options){
  4.       
  5.         // default configuration properties
  6.         var defaults = {            
  7.             prevId:         'prevBtn',
  8.             prevText:       'Previous',
  9.             nextId:         'nextBtn',  
  10.             nextText:       'Next',
  11.             controlsShow:   true,
  12.             controlsBefore: '',
  13.             controlsAfter:  '', 
  14.             controlsFade:   true,
  15.             firstId:        'firstBtn',
  16.             firstText:      'First',
  17.             firstShow:      false,
  18.             lastId:         'lastBtn',  
  19.             lastText:       'Last',
  20.             lastShow:       false,              
  21.             vertical:       false,
  22.             speed:          800,
  23.             auto:           false,
  24.             pause:          2000,
  25.             continuous:     false, 
  26.             numeric:        false,
  27.             numericId:      'controls'
  28.         }; 
  29.         
  30.         var options = $.extend(defaults, options);  
  31.                 
  32.         this.each(function() {  
  33.             var obj = $(this);              
  34.             var s = $("li", obj).length;
  35.             var w = $("li", obj).width(); 
  36.             var h = $("li", obj).height(); 
  37.             var clickable = true;
  38.             obj.width(w); 
  39.             obj.height(h); 
  40.             obj.css("overflow","hidden");
  41.             var ts = s-1;
  42.             var t = 0;
  43.             $("ul", obj).css('width',s*w);          
  44.             
  45.             if(options.continuous){
  46.                 $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
  47.                 $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
  48.                 $("ul", obj).css('width',(s+1)*w);
  49.             };              
  50.             
  51.             if(!options.vertical) $("li", obj).css('float','left');
  52.                                 
  53.             if(options.controlsShow){
  54.                 var html = options.controlsBefore;              
  55.                 if(options.numeric){
  56.                     html += '<ol id="'+ options.numericId +'"></ol>';
  57.                 } else {
  58.                     if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
  59.                     html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
  60.                     html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
  61.                     if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';              
  62.                 };
  63.                 
  64.                 html += options.controlsAfter;                      
  65.                 $(obj).after(html);                                     
  66.             };
  67.             
  68.             if(options.numeric){                                    
  69.                 for(var i=0;i<s;i++){                       
  70.                     $(document.createElement("li"))
  71.                         .attr('id',options.numericId + (i+1))
  72.                         .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
  73.                         .appendTo($("#"+ options.numericId))
  74.                         .click(function(){                          
  75.                             animate($("a",$(this)).attr('rel'),true);
  76.                         });                                                 
  77.                 };                          
  78.             } else {
  79.                 $("a","#"+options.nextId).click(function(){     
  80.                     animate("next",true);
  81.                 });
  82.                 $("a","#"+options.prevId).click(function(){     
  83.                     animate("prev",true);               
  84.                 }); 
  85.                 $("a","#"+options.firstId).click(function(){        
  86.                     animate("first",true);
  87.                 });             
  88.                 $("a","#"+options.lastId).click(function(){     
  89.                     animate("last",true);               
  90.                 });             
  91.             };
  92.             
  93.             function setCurrent(i){
  94.                 i = parseInt(i)+1;
  95.                 $("li", "#" + options.numericId).removeClass("current");
  96.                 $("li#" + options.numericId + i).addClass("current");
  97.             };
  98.             
  99.             function adjust(){
  100.                 if(t>ts) t=0;       
  101.                 if(t<0) t=ts;   
  102.                 if(!options.vertical) {
  103.                     $("ul",obj).css("margin-left",(t*w*-1));
  104.                 } else {
  105.                     $("ul",obj).css("margin-left",(t*h*-1));
  106.                 }
  107.                 clickable = true;
  108.                 if(options.numeric) setCurrent(t);
  109.             };
  110.             
  111.             function animate(dir,clicked){
  112.                 if (clickable){
  113.                     clickable = false;
  114.                     var ot = t;             
  115.                     switch(dir){
  116.                         case "next":
  117.                             t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                       
  118.                             break; 
  119.                         case "prev":
  120.                             t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
  121.                             break; 
  122.                         case "first":
  123.                             t = 0;
  124.                             break; 
  125.                         case "last":
  126.                             t = ts;
  127.                             break; 
  128.                         default:
  129.                             t = dir;
  130.                             break; 
  131.                     };  
  132.                     var diff = Math.abs(ot-t);
  133.                     var speed = diff*options.speed;                     
  134.                     if(!options.vertical) {
  135.                         p = (t*w*-1);
  136.                         $("ul",obj).animate(
  137.                             { marginLeft: p }, 
  138.                             { queue:false, duration:speed, complete:adjust }
  139.                         );              
  140.                     } else {
  141.                         p = (t*h*-1);
  142.                         $("ul",obj).animate(
  143.                             { marginTop: p }, 
  144.                             { queue:false, duration:speed, complete:adjust }
  145.                         );                  
  146.                     };
  147.                     
  148.                     if(!options.continuous && options.controlsFade){                    
  149.                         if(t==ts){
  150.                             $("a","#"+options.nextId).hide();
  151.                             $("a","#"+options.lastId).hide();
  152.                         } else {
  153.                             $("a","#"+options.nextId).show();
  154.                             $("a","#"+options.lastId).show();                   
  155.                         };
  156.                         if(t==0){
  157.                             $("a","#"+options.prevId).hide();
  158.                             $("a","#"+options.firstId).hide();
  159.                         } else {
  160.                             $("a","#"+options.prevId).show();
  161.                             $("a","#"+options.firstId).show();
  162.                         };                  
  163.                     };              
  164.                     
  165.                     if(clicked) clearTimeout(timeout);
  166.                     if(options.auto && dir=="next" && !clicked){;
  167.                         timeout = setTimeout(function(){
  168.                             animate("next",false);
  169.                         },diff*options.speed+options.pause);
  170.                     };
  171.             
  172.                 };
  173.                 
  174.             };
  175.             // init
  176.             var timeout;
  177.             if(options.auto){;
  178.                 timeout = setTimeout(function(){
  179.                     animate("next",false);
  180.                 },options.pause);
  181.             };      
  182.             
  183.             if(options.numeric) setCurrent(0);
  184.         
  185.             if(!options.continuous && options.controlsFade){                    
  186.                 $("a","#"+options.prevId).hide();
  187.                 $("a","#"+options.firstId).hide();              
  188.             };              
  189.             
  190.         });
  191.       
  192.     };
  193.  
  194. })(jQuery);


también incluye el archivo jquery que todos conocemos.
el problema inicial es que automaticamente me aparecen unos botones y no puedo quitarlos
__________________
Si Crees que puedes o no, en ambos casos tienes Razón. (H. Ford).


http://img710.imageshack.us/img710/1...developers.gif
  #2 (permalink)  
Antiguo 04/11/2010, 14:47
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: Slide
podrias subir tu proyecto o prueba de la galeria para que podamos ver online los botones que quieres quitar

Etiquetas: slide
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:22.