![](/img/trans.png)
[英]Calling function of a JQUERY Plugin ( supersized ) via its API as part of a .click
[英]calling jQuery supersized plugin onclick
我正在尝试调用超大插件 ( http://buildinte.net.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/ ) onclick,到目前为止,当我点击不同的菜单时,图像是改变了,但看起来 html 由 supersized 构建的标记没有被重建,现在我有这个:
html 调用 function 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>
html,我回显 ajax 响应:
<div id="script">
<script>$(function(){
$.supersized({
slides : [
{image : 'img/rooms-default.jpg'}
//{image : 'img/rooms-default.jpg'}
]
})
})</script>
</div>
brown() 是一个 ajax function:
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。
在添加新脚本之前
$('#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);
}
});
}
不是从 PHP 返回整个脚本,你可以简单地返回图像标签(比如
<img src="images/image1.jpg" /><img src="images/image1.jpg" />
...)。 然后在 ajax 成功回调中替换 - $('#script').html(data); - 你可以做
$('#script').empty();
$('#script').html(data);
$('#script').supersized();
我相信这是设置一切的$.supersize.resizenow
方法,你试过调用它吗?
如果做不到这一点,您是否有一个可以访问的链接 web 可以在您尝试此操作的地方访问,以便我看一下?
您是否尝试过在附加新事件之前取消绑定事件? 像这样:
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;
您可能必须这样做,因为插件将一个事件绑定到 window,即使您删除了插件创建的先前 html,旧事件仍然绑定并且会触发两次。
如果您发现任何差异,请告诉我
编辑 - 我看过插件的代码。 我认为问题出在第 16 行的命令中:
setInterval("theslideshow()", options.slideinterval);
a function 在给定的时间间隔被调用,如果它没有被清除,当你再次调用插件时,一个新的时间间隔被设置,所以你有时间问题。 您可以像这样更正插件。 代替
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() 调用的引用,然后在您下次调用插件时清除该引用。
这使用了两个不好的全局变量,但如果它解决了问题,我可以帮助您在不使用全局变量的情况下重写它。
PS你为什么不更新插件的版本?
为什么不加载所有集合并根据需要显示/隐藏它们?
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.