Здравствуйте. Хочу сделать на сайте небольшой слайдер. Нашел в сети Числовое слайдшоу на основе jQuery плагина - number slideshow. Проверил, все работает, меня устраивает. Но если я в первый слайд вставляю видео, то вначале я вижу пустое окно слайдера и только спустя какое то время появляется это видео. На этом слайдере есть кнопки управления, если навести мышь на любую из кнопок (1-4), то показывается слайд под этим номером. В самом начале когда я вижу серый фон, если я наведу мышь на первую кнопку управления, видео сразу показывается. Я не программист, поэтому прошу не судить за такое описание, но очень прошу помощи подсказать что мне нужно изменить, чтобы при открытии страницы видео сразу же показывалось на 1 слайде без задержки. Заранее спасибо.
Код плагина:
// Copyright 2010 htmldrive.net Inc.
/**
* @projectHomepage: http://www.htmldrive.net/go/to/number-slideshow
* @projectDescription: Number slideshow - simple and practical numbers image slideshow jQuery plugin.
* @author htmldrive.net
* @version 2.2, update: preload image and show loading animation.
* @license http://www.apache.org/licenses/LICENSE-2.0
* More script and css style : htmldrive.net
*/
(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;
}