Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать растягивающийся слайд вместо фиксированного? (https://javascript.ru/forum/misc/43016-kak-sdelat-rastyagivayushhijjsya-slajjd-vmesto-fiksirovannogo.html)

Danilkin500 18.11.2013 17:51

Как сделать растягивающийся слайд вместо фиксированного?
 
Есть js:
(function(a){
    a.fn.number_slideshow=function(p){
        var p=p||{};
        var n=p&&p.slideshow_autoplay?p.slideshow_autoplay:"enable";
        var o=p&&p.slideshow_time_interval?p.slideshow_time_interval:"5000";
        var q=p&&p.slideshow_window_background_color?p.slideshow_window_background_color:"white";
        var r=p&&p.slideshow_window_padding?p.slideshow_window_padding:"5";
        var s=p&&p.slideshow_window_width?p.slideshow_window_width:"400";
        var t=p&&p.slideshow_window_height?p.slideshow_window_height:"400";
        var u=p&&p.slideshow_border_size?p.slideshow_border_size:"1";
        var v=p&&p.slideshow_border_color?p.slideshow_border_color:"black";
        var w=p&&p.slideshow_show_button?p.slideshow_show_button:"enable";
        var H=p&&p.slideshow_show_title?p.slideshow_show_title:"enable";
        var x=p&&p.slideshow_button_text_color?p.slideshow_button_text_color:"red";
        var z=p&&p.slideshow_button_background_color?p.slideshow_button_background_color:"black";
        var A=p&&p.slideshow_button_current_background_color?p.slideshow_button_current_background_color:"white";
        var B=p&&p.slideshow_button_border_color?p.slideshow_button_border_color:"blue";
        var C=p&&p.slideshow_button_border_size?p.slideshow_button_border_size:"2";
        var s_l_g=p&&p.slideshow_loading_gif?p.slideshow_loading_gif:"loading.gif";
        var first = false;
        r += "px";
        s += "px";
        t += "px";
        u += "px";
        C += "px";
        var D;
        var E=0;
        var F=a(this);
        var G=F.find("ul:first").children("li").length;
        if(F.find("ul").length==0||F.find("li").length==0){
            a.append("Require content");
            return null
        }
        F.show();
        F.find("ul:first").children("li").children("a").children("img").css("width",s).css("height",t);
        F.find("ul:first").css("background-image","url("+s_l_g+")").css("background-position","center center");
        s_s_ul(F.find("ul:first"),r,s,t,u,v,q,z,x,s_l_g);
        s_s_n(F.find(".number_slideshow_nav"),x,w,z,A,B,C);
        F.find("ul:first").children("li").hide();
        var img = new Image();
        img.src = F.find("ul:first").children("li").eq(0).children("a").children("img").attr("src");
        img.onload = function(){
            if(first == false){
                first = true;
                play();
            }
        };
        if(img.complete){
            if(first == false){
                first = true;
                play();
            }
        }
        F.find("ul:first").hover(function(){
            clearTimeout(D);
        },function(){
            D=setTimeout(play,o);
        });
        F.find(".number_slideshow_nav").children("li").hover(
            function(){
                stop($(this));
            },
            function(){
            }
        );
        function play(){
            if(n=="enable"){
                clearTimeout(D);
                if(E >= G){
                    E = 0;
                }
                F.find("ul:first").children("li").fadeOut();
                F.find("ul:first").children("li").eq(E).fadeIn();
                F.find(".number_slideshow_nav").children("li").css("background-color",z);
                F.find(".number_slideshow_nav").children("li").eq(E).css("background-color",A);
                E++;
                if(E>=G){
                    E=0
                }
                D=setTimeout(play,o)
            }else{
                F.find("ul:first").children("li").eq(E).fadeIn();
            }
        }
        function stop(a){
            clearTimeout(D);
            var b=a.parent().children().index(a);
            if(b != (E-1)){
                E=b+1;
                /*
                if(E>=G){
                    E=0
                }
                */
                F.find("ul:first").children("li").fadeOut();
                F.find("ul:first").children("li").eq(b).fadeIn();
                F.find(".number_slideshow_nav").children("li").css("background-color",z);
                F.find(".number_slideshow_nav").children("li").eq(b).css("background-color",A)
            }
        }
        function s_s_ul(a,b,c,d,e,f,g,h,i,l_g){
            a.children("li").css("width",c).css("height",d);
            if(H == 'enable'){
                a.children("li").each(function(i){
                     a.children("li").eq(i).append("<p>"+a.children("li").eq(i).children("a").children("img").attr("alt")+"</p>");
                });
            }
            a.children("li").children("p").css("background-color",h).css("color",i).css('width',parseInt(c)-10);
            b=parseInt(b);
            c=parseInt(c);
            d=parseInt(d);
            e=parseInt(e);
            var h=c+e*2+b*2;
            var i=d+e*2+b*2;
            F.css("width",h);
            F.css("height",i);
            var j=d+"px";
            var k=c+"px";
            var l="border: "+f+" solid "+" "+e+"px; height:"+j+"; width:"+k+"; padding:"+b+"px; background-color:"+g+"; background-image:url("+l_g+");";
            a.attr("style",l)
        }
        function s_s_n(b,c,d,e,f,g,h){
            h=parseInt(h);
            var j=b.children("li");
            var a=j.children("a");
            a.css("color",c);
            var k="border: "+g+" solid "+" "+h+"px; background-color:"+e+";";
            j.attr("style",k);
            if(d!="enable"){
                b.hide()
            }
        }
    }
})(jQuery);


Также дополнительно js:

<script language="javascript" type="text/javascript">
            $(function() {
                $("#number_slideshow").number_slideshow({
                    slideshow_autoplay: 'enable',//enable disable
                    slideshow_time_interval: '5000',
                    slideshow_window_background_color: "#ccc",
                    slideshow_window_padding: '0',
                    slideshow_window_width: '900',
                    slideshow_window_height: '234',
                    slideshow_border_size: '1',
                    slideshow_border_color: '#3d6884',
                    slideshow_show_button: 'enable',//enable disable
                    slideshow_show_title: 'disable',//enable disable
                    slideshow_button_text_color: '#fff',
                    slideshow_button_background_color: '#527284',
                    slideshow_button_current_background_color: '#375b70',
                    slideshow_button_border_color: '#000',
                    slideshow_loading_gif: 'http://sportklick.ru/images/loading.gif',//loading pic position, you can replace it.
                    slideshow_button_border_size: '0'
                });
            });
        </script>


Есть css:

.number_slideshow{
// line-height: 20px;
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
position: relative;
display: none;
}
.number_slideshow .number_slideshow_nav{
filter: alpha(opacity=70);
opacity: 0.7;
padding: 0px;
margin: 0px;
position: absolute;
bottom: 5px;
right: 5px;
}
.number_slideshow .number_slideshow_nav li{
// box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
// -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
// -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
// -o-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
// -khtml-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
margin-left: 6px;
position: relative;
float: left;
}
.number_slideshow .number_slideshow_nav li a{
padding-left: 5px;
padding-right: 5px;
}
.number_slideshow ul{
margin: 0px;
background-position:center center;
background-repeat: no-repeat;
}
.number_slideshow ul li{
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-khtml-border-radius: 3px;
padding: 0px;
margin: 0px;
list-style: none;
position: absolute;
}
.number_slideshow ul li p{
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
padding-left: 5px;
padding-right: 5px;
filter: alpha(opacity=60);
opacity: 0.6;
font-size: 13px;
// line-height: 23px;
}
.number_slideshow ul li a{
text-decoration: none;
}
.number_slideshow ul li a img{
border: none;
}







Также сам слайд:

<div id="number_slideshow" class="number_slideshow">
			<ul>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></a></li>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></a></li>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></a></li>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></a></li>
			</ul>
			<ul class="number_slideshow_nav">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			</ul>
			<div style="clear: both"></div>
			</div>





Как сделать вместо слайда с фиксированной шириной(как описано выше) слайд растягивающийся(что на что изменить и поправить)??? Помогите разобраться! Заранее спасибо!

p.s. хочу заметить что при изменении ширины должна изменяться также высота строго пропорционально изменениям ширины (просто мало ли если кто не учтет).

Еще раз заранее спасибо! Жду Вашей помощи!


Часовой пояс GMT +3, время: 23:28.