Slider hoogte

Hoi, ik heb een slider (warmte-montage.nl) maar die wil ik dus kleiner maken,
hoe kan ik dat doen?

/*
 *     Easy Slider 1.7 - jQuery plugin
 *    written by Alen Grakalic    
 *    http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *    Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *    Dual licensed under the MIT (MIT-LICENSE.txt)
 *    and GPL (GPL-LICENSE.txt) licenses.
 *
 *    Built for jQuery library
 *    http://jquery.com
 *
 */
 
/*
 *    markup example for $("#slider").easySlider();
 *    
 *     <div id="slider">
 *        <ul>
 *            <li><img src="images/01.jpg" alt="" /></li>
 *            <li><img src="images/02.jpg" alt="" /></li>
 *            <li><img src="images/03.jpg" alt="" /></li>
 *            <li><img src="images/04.jpg" alt="" /></li>
 *            <li><img src="images/05.jpg" alt="" /></li>
 *        </ul>
 *    </div>
 *
 */

(function($) {

    $.fn.easySlider = function(options){
      
        // default configuration properties
        var defaults = {            
            prevId:         prevBtn,
            prevText:         Previous,
            nextId:         nextBtn,    
            nextText:         Next,
            controlsShow:    true,
            controlsBefore:    ,
            controlsAfter:    ,    
            controlsFade:    true,
            firstId:         firstBtn,
            firstText:         First,
            firstShow:        false,
            lastId:         lastBtn,    
            lastText:         Last,
            lastShow:        false,                
            vertical:        false,
            speed:             800,
            auto:            false,
            pause:            2000,
            continuous:        false, 
            numeric:         false,
            numericId:         controls
        }; 
        
        var options = $.extend(defaults, options);  
                
        this.each(function() {  
            var obj = $(this);                 
            var s = $("li", obj).length;
            var w = $("li", obj).width(); 
            var h = $("li", obj).height(); 
            var clickable = true;
            obj.width(w); 
            obj.height(h); 
            obj.css("overflow","hidden");
            var ts = s-1;
            var t = 0;
            $("ul", obj).css(width,s*w);            
            
            if(options.continuous){
                $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
                $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
                $("ul", obj).css(width,(s+1)*w);
            };                
            
            if(!options.vertical) $("li", obj).css(float,left);
                                
            if(options.controlsShow){
                var html = options.controlsBefore;                
                if(options.numeric){
                    html += <ol id="+ options.numericId +"></ol>;
                } else {
                    if(options.firstShow) html += <span id="+ options.firstId +"><a href="javascript:void(0);">+ options.firstText +</a></span>;
                    html +=  <span id="+ options.prevId +"><a href="javascript:void(0);">+ options.prevText +</a></span>;
                    html +=  <span id="+ options.nextId +"><a href="javascript:void(0);">+ options.nextText +</a></span>;
                    if(options.lastShow) html +=  <span id="+ options.lastId +"><a href="javascript:void(0);">+ options.lastText +</a></span>;                
                };
                
                html += options.controlsAfter;                        
                $(obj).after(html);                                        
            };
            
            if(options.numeric){                                    
                for(var i=0;i<s;i++){                        
                    $(document.createElement("li"))
                        .attr(id,options.numericId + (i+1))
                        .html(<a rel=+ i + href="javascript:void(0);">+ (i+1) +</a>)
                        .appendTo($("#"+ options.numericId))
                        .click(function(){                            
                            animate($("a",$(this)).attr(rel),true);
                        });                                                 
                };                            
            } else {
                $("a","#"+options.nextId).click(function(){        
                    animate("next",true);
                });
                $("a","#"+options.prevId).click(function(){        
                    animate("prev",true);                
                });    
                $("a","#"+options.firstId).click(function(){        
                    animate("first",true);
                });                
                $("a","#"+options.lastId).click(function(){        
                    animate("last",true);                
                });                
            };
            
            function setCurrent(i){
                i = parseInt(i)+1;
                $("li", "#" + options.numericId).removeClass("current");
                $("li#" + options.numericId + i).addClass("current");
            };
            
            function adjust(){
                if(t>ts) t=0;        
                if(t<0) t=ts;    
                if(!options.vertical) {
                    $("ul",obj).css("margin-left",(t*w*-1));
                } else {
                    $("ul",obj).css("margin-left",(t*h*-1));
                }
                clickable = true;
                if(options.numeric) setCurrent(t);
            };
            
            function animate(dir,clicked){
                if (clickable){
                    clickable = false;
                    var ot = t;                
                    switch(dir){
                        case "next":
                            t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                        
                            break; 
                        case "prev":
                            t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
                            break; 
                        case "first":
                            t = 0;
                            break; 
                        case "last":
                            t = ts;
                            break; 
                        default:
                            t = dir;
                            break; 
                    };    
                    var diff = Math.abs(ot-t);
                    var speed = diff*options.speed;                        
                    if(!options.vertical) {
                        p = (t*w*-1);
                        $("ul",obj).animate(
                            { marginLeft: p }, 
                            { queue:false, duration:speed, complete:adjust }
                        );                
                    } else {
                        p = (t*h*-1);
                        $("ul",obj).animate(
                            { marginTop: p }, 
                            { queue:false, duration:speed, complete:adjust }
                        );                    
                    };
                    
                    if(!options.continuous && options.controlsFade){                    
                        if(t==ts){
                            $("a","#"+options.nextId).hide();
                            $("a","#"+options.lastId).hide();
                        } else {
                            $("a","#"+options.nextId).show();
                            $("a","#"+options.lastId).show();                    
                        };
                        if(t==0){
                            $("a","#"+options.prevId).hide();
                            $("a","#"+options.firstId).hide();
                        } else {
                            $("a","#"+options.prevId).show();
                            $("a","#"+options.firstId).show();
                        };                    
                    };                
                    
                    if(clicked) clearTimeout(timeout);
                    if(options.auto && dir=="next" && !clicked){;
                        timeout = setTimeout(function(){
                            animate("next",false);
                        },diff*options.speed+options.pause);
                    };
            
                };
                
            };
            // init
            var timeout;
            if(options.auto){;
                timeout = setTimeout(function(){
                    animate("next",false);
                },options.pause);
            };        
            
            if(options.numeric) setCurrent(0);
        
            if(!options.continuous && options.controlsFade){                    
                $("a","#"+options.prevId).hide();
                $("a","#"+options.firstId).hide();                
            };                
            
        });
      
    };

})(jQuery);

Voor zover ik kan zien moet je de div die je gebruikt als slider in je CSS een andere height meegeven. Dit neemt de slider dan over.

Maar er is in die code toch geen css mee gegeven?

Reinier schreef:

Maar er is in die code toch geen css mee gegeven?

var w = $("li", obj).width(); 
            var h = $("li", obj).height();

Die slaat de height / width van het element op, en gebruikt die in de slider.

Hoe en waar moet ik die veranderen dan?

Reinier schreef:

Hoe en waar moet ik die veranderen dan?

je zet die slider neem ik aan in een layout? Dus zet je de slider in een div om m op zn plek te krijgen waar jij wil en die div geef je de height mee die jij wil. Dus je past dit aan in je eigen css van je layout.

Ja heb ik gedaan,

/* First slider (left) */
#first {float:left;}
#first ul, #first li, #first2 ul, #first2 li{margin:0; padding:0;list-style:none;}
#first li, #first2 li {width:235px;height:510px;overflow:hidden;}    
#prevBtn, #nextBtn,    #first1next, #first1prev{display:none;visibility:hidden;}    

/* Second slider (second left) */
#second {float:left;}
#second ul, #second li, #second2 ul, #second2 li{margin:0; padding:0;list-style:none;}
#second li, #second2 li {width:235px;height:510px;overflow:hidden;}    
#prevBtn, #nextBtn,    #second1next, #second1prev{display:none;visibility:hidden;}    

#first a, #second a {display:block;}
#first img, #second img, #third img {display:block;float:left;}

/* Third slider (right) */
#third {float:left;width:468px;height:510px; background-color:#8c090f;}

/* Alternate slider*/
ul.slideshow {list-style:none;width:936px;height:510px;overflow:hidden;position:relative;margin-left:2px;padding:0;}    
ul.slideshow li {position:absolute;left:0;right:0;}
ul.slideshow li.show {z-index:500;}
ul img {border:none;}
#slideshow-caption {width:936px;height:100px;position:absolute;bottom:0;left:0;    color:#fff;background:url(../img/captionbg.jpg);z-index:500;}
#slideshow-caption .slideshow-caption-container {padding:10px 10px;z-index:1000;}
#slideshow-caption h6 {margin:10px;padding:0;font-size:18px;}
#slideshow-caption p {margin:10px;padding:0;}

maar als je height edit is er geen verandering..
nouja tot morgen

ik zie 4x height: 510px; staan in die css die je nu post.
Verander die eens alle 4 dan.

Bedankt Marjolein Ik heb het veranderd naar 300, en nu is de grootte goed

Fijn dat het gelukt is, en graag gedaan