Слайдер изображений на сайте (задержка первого кадра)
Здравствуйте. Хочу сделать на сайте небольшой слайдер. Нашел в сети Числовое слайдшоу на основе jQuery плагина - number slideshow. Проверил, все работает, меня устраивает. Но если я в первый слайд вставляю видео, то вначале я вижу пустое окно слайдера и только спустя какое то время появляется это видео. На этом слайдере есть кнопки управления, если навести мышь на любую из кнопок (1-4), то показывается слайд под этим номером. В самом начале когда я вижу серый фон, если я наведу мышь на первую кнопку управления, видео сразу показывается. Я не программист, поэтому прошу не судить за такое описание, но очень прошу помощи подсказать что мне нужно изменить, чтобы при открытии страницы видео сразу же показывалось на 1 слайде без задержки. Заранее спасибо.
Код плагина: (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); Вот так выводится слайдер на странице: <script type="text/javascript" src="js/number_slideshow.js"></script> <script language="javascript" type="text/javascript"> $(function() { $("#number_slideshow").number_slideshow({ slideshow_autoplay: 'enable',//enable disable slideshow_time_interval: '3000', slideshow_window_background_color: "", slideshow_window_padding: '1', slideshow_window_width: '1500', slideshow_window_height: '500', slideshow_border_size: '1', slideshow_border_color: 'black', slideshow_show_button: 'enable',//enable disable slideshow_show_title: 'disable',//enable disable slideshow_button_text_color: '#CCC', slideshow_button_background_color: '#333', slideshow_button_current_background_color: '#666', slideshow_button_border_color: '#000', slideshow_loading_gif: 'loading.gif',//картинка загрузки, её можно сменить. slideshow_button_border_size: '1' }); }); </script> <div id="number_slideshow" class="number_slideshow"> <ul> <li><video autoplay muted loop><source src="/images/main_slider/video2_out.webm" type="video/webm"/></video></li> <li><a href="#"><img src="/images/main_slider/202.jpg" ></a></li> <li><a href="#"><img src="/images/main_slider/203.jpg" /></a></li> <li><a href="#"><img src="/images/main_slider/204.jpg" /></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> И есть еще стили: .number_slideshow{ line-height: 20px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px; position: relative; display: none; margin-left: auto; margin-right: auto; } .number_slideshow .number_slideshow_nav{ filter: alpha(opacity=60); opacity: 0.6; padding: 0px; margin: 0px; position: absolute; bottom: 10px; right: 10px; } .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: 8px; padding-right: 8px; } .number_slideshow ul{ margin: 0px; background-position:center center; background-repeat: no-repeat; } .number_slideshow ul li{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; 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; } |
Часовой пояс GMT +3, время: 06:37. |