[英]Delay setting in jQuery Banner Rotator plugin not working
I'm working with an awesome and flexible jQuery banner rotator but I needed to modify it to load the slides from an external source. 我正在使用一个很棒且灵活的jQuery横幅旋转器,但是我需要对其进行修改以从外部来源加载幻灯片。 I got the external source working great and the slideshow loading but I can't seem to get it to recognize the delay setting. 我的外部信号源工作得很好,幻灯片放映也很好,但是我似乎无法识别延迟设置。
Basically I modified how the plugin initiates so that it loads my external content and then formats it before the slideshow function. 基本上,我修改了插件的启动方式,以便它加载我的外部内容,然后在幻灯片功能之前对其进行格式化。
// Grabs data from Sphere Photo Gallery and formats the HTML for jQuery Banner Rotator plugin
function sphereSlider(options) {
$.get("PhotoGallery.aspx.htm",function(data){
var html = '';
$(data).find('#pg_summary img').each(function(i){
var imgsrc = $(this).attr("src");
html += "<li>";
html += "<a href='"+imgsrc+"'><img src='"+imgsrc+"' border=0/></a>";
html += "<div class='imgCaption'>";
html += "<h1>"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace(" ","")+"</h1>";
html += "<a href='"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace(" ","")+"'></a>";
html += "<div class='slideDesc'>"+$(data).find('#pg_summary .pg_longdescriptor:eq('+i+')').html()+"</div>";
html += "</div>";
html += "</li>";
});
$('.thumbnails ul').html(html);
$(".container").wtRotator(options);
});
}
And then in the html I call my function like this: 然后在html中,我这样调用我的函数:
<script type="text/javascript">
$(document).ready(function() {
sphereSlider({
width:900,
height:254,
thumb_width:24,
thumb_height:24,
button_width:24,
button_height:24,
button_margin:5,
auto_start:true,
delay:5000,
play_once:false,
transition:"block.fade",
transition_speed:800,
auto_center:true,
easing:"",
cpanel_position:"inside",
cpanel_align:"BR",
timer_align:"top",
display_thumbs:false,
display_dbuttons:false,
display_playbutton:false,
display_thumbimg:false,
display_side_buttons:true,
display_numbers:false,
display_timer:true,
mouseover_select:false,
mouseover_pause:true,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
tooltip_type:"text",
shuffle:false,
block_size:75,
vert_size:55,
horz_size:50,
block_delay:25,
vstripe_delay:75,
hstripe_delay:180
});
}
);
</script>
It should work since all other settings are working. 由于所有其他设置都可以使用,因此它应该可以使用。 It's just the delay time that is not correctly being set. 只是延迟时间没有正确设置。 Any help would be appreciated. 任何帮助,将不胜感激。 I have uploaded the full source to http://www.truimage.biz/cc/rotator.zip for troubleshooting. 我已将完整源上载到http://www.truimage.biz/cc/rotator.zip以进行故障排除。
Thanks! 谢谢!
You can solve this problem easily by removing a couple of texts. 您可以删除一些文本来轻松解决此问题。
Because there are a wrong annotation in "js/jquery.wt-rotator.js". 因为“ js / jquery.wt-rotator.js”中的注解错误。
From : 来自:
//Line: 1842
//set delay
//this._delay = this._$items[i].data("delay");
To : 至 :
//set delay
this._delay = this._$items[i].data("delay");
I think the $.each function works assync, so the Slider was created before all of your images was outputed into HTML. 我认为$ .each函数可以异步运行,因此在所有图像输出到HTML之前就创建了Slider。
Try using for insted of each: 尝试对每个使用insted:
$.get("PhotoGallery.aspx.htm",function(data){
var lbls=$(data).find('#pg_summary img');
var html = '';
for (var i=0; i< lbls.length; i++ ){
var imgsrc = $(lbls[i]).attr("src");
html += "<li>";
html += "<a href='"+imgsrc+"'><img src='"+imgsrc+"' border=0/></a>";
html += "<div class='imgCaption'>";
html += "<h1>"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace(" ","")+"</h1>";
html += "<a href='"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace(" ","")+"'></a>";
html += "<div class='slideDesc'>"+$(data).find('#pg_summary .pg_longdescriptor:eq('+i+')').html()+"</div>";
html += "</div>";
html += "</li>";
}
$('.thumbnails ul').html(html);
$(".container").wtRotator(options);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.