Tema: Slide
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/11/2010, 12:03
bkolores
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 16 años
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