我试图调用超大插件(http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/)onclick,到目前为止我点击我的不同菜单图像是改变了,但看起来像超大的html标记构建不得重建,现在我得到了这个:
html wich调用函数brown()onclick:
<ul id="rooms_menu" style="display:none;">
<li><a href="javascript:;" onclick="brown()">menu title</a></li>
<p class="rooms_desc">description text</p>
我回应ajax响应的html:
<div id="script">
<script>$(function(){
$.supersized({
slides : [
{image : 'img/rooms-default.jpg'}
//{image : 'img/rooms-default.jpg'}
]
})
})</script>
</div>
brow()是一个ajax函数:
function brown(){
$.ajax({
url: 'ajax.php?action=brown',
success: function(data){
$('#script').html(data);
}
})
}
然后ajax.php文件将其内容加载到#script div:
switch($_GET["action"]){
case "brown":
echo "<script>$(function(){
$.supersized({
slides : [
{image : 'img/rooms-brown-01.jpg'},
{image : 'img/rooms-brown-02.jpg'}
]
})
})</script>";
break;
case "rose": etc.....
所以当我第一次在菜单上点击时图像会更新,但是如果我点击另一个菜单标题,图像也会更新但幻灯片显示开始变得混乱,看起来html标记不会重建,当我只使用时每个菜单标题一个图像(超大数组中只有一个图像)没有问题。 R上。
答案 0 :(得分:4)
在使用
添加新脚本之前$('#script').html(data);
尝试称之为:
if($.supersized.vars.slideshow_interval){
clearInterval($.supersized.vars.slideshow_interval);
}
该方法应如下所示:
function brown(){
$.ajax({
url: 'ajax.php?action=brown',
success: function(data){
if($.supersized.vars.slideshow_interval){
clearInterval($.supersized.vars.slideshow_interval);
}
$('#script').html(data);
}
});
}
答案 1 :(得分:2)
您可以简单地返回图像标记(例如
),而不是从PHP返回整个脚本<img src="images/image1.jpg" /><img src="images/image1.jpg" />
...)。然后在ajax成功回调代替 - $('#script')。html(data); - 你可以做到
$('#script').empty();
$('#script').html(data);
$('#script').supersized();
答案 2 :(得分:2)
我相信这是设置一切的$.supersize.resizenow
方法,你试过调用它吗?
如果不这样做,你有一个可以在网上访问的链接吗?你可以看一下吗?
答案 3 :(得分:2)
在添加新事件之前,您是否尝试解除绑定事件? 像这样:
switch($_GET["action"]){
case "brown":
echo "<script>$(function(){
$(window).unbind("resize");//add this. you could also add
//$('#supersized').html('') to remove markup created by the plugin
$.supersized({
slides : [
{image : 'img/rooms-brown-01.jpg'},
{image : 'img/rooms-brown-02.jpg'}
]
})
})</script>";
break;
您可能必须执行此操作,因为插件会将事件绑定到窗口,即使您删除了插件创建的上一个html,旧事件仍会绑定并触发两次。
如果您发现任何差异,请告诉我
编辑 - 我查看了插件的代码。我想,问题在于第16行的命令: setInterval("theslideshow()", options.slideinterval);
以给定的间隔调用一个函数,如果它没有被清除,当你再次调用该插件时,会设置一个新的间隔,因此你会遇到时间问题。您可以像这样更正插件。而不是
if (options.slideshow == 1){
setInterval("theslideshow()", options.slideinterval);
}
把
firstRunofThisPlugin = true;
if (options.slideshow == 1){
if (firstRunofThisPlugin){
firstRunofThisPlugin = false;
}else{
clearInterval(linkToTheLastInterval);
}
linkToTheLastInterval = setInterval("theslideshow()", options.slideinterval);
}
您正在做的是保存setInterval()调用的引用,然后在下次调用插件时清除该引用。
这使用两个全局变量,但是如果它解决了问题,我可以帮助你重写它而不使用全局变量。
P.S。为什么不更新插件的版本?
答案 4 :(得分:2)
为什么不加载所有集合并根据需要显示/隐藏它们?
<script>
$(function(){
function selectSet() {
$(".set").hide();
$(".set."+$(this).attr("id")).show();
};
$(".set.brown").each(selectSet);
});
</script>
<a href="javascript:;" id="brown" onclick="selectSet()">Choose me!</a>
<a href="javascript:;" id="rose" onclick="selectSet()">No choose me!</a>
<div class="set brown">
<script>
$(function() {
$.supersized({
slides: [
{image: 'img/rooms-1.jpg'},
{image: 'img/rooms-2.jpg'}
]
});
});
</script>
</div>
<div class="set rose">
<script>
$(function() {
$.supersized({
slides: [
{image: 'img/rooms-3.jpg'},
{image: 'img/rooms-4.jpg'}
]
});
});
</script>
</div>