调用jQuery超大插件onclick [英] calling jQuery supersized plugin onclick

问题描述

我试图调用超大插件（http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/）onclick，到目前为止我点击我的不同菜单图像是改变了，但看起来像超大的html标记构建没有得到重建，现在我得到了这个：

html它调用函数brown（）onclick：

 < ul id =rooms_menustyle =display：none;> 
< li>< a href =javascript：; onclick =brown（）>菜单标题< / a>< / li> 
< p class =rooms_desc>说明文字< / 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]）{
 casebrown：
 echo< script> $（function（）{
 $ .supersized（ {
幻灯片：[
 {image：'img / rooms-brown-01.jpg'}，
 {image：'img / rooms-brown-02.jpg'} 
] 
}）
 
}）< / script>; 
休息; 
 caserose：etc ..... 
  

因此图片会在更新时更新我在菜单上第一次点击但如果我点击另一个菜单标题，图像也会更新，但幻灯片开始乱码，看起来html标记不会重建，当我每个菜单标题只使用一个图像时（只有一个图像）在超大数组中）没有问题。
R。

解决方案

在添加新脚本之前

< 。pre> $（ '＃脚本'）的html（数据）;


尝试拨打此电话：

  if（$。supersized.vars.slideshow_interval）{
 clearInterval（$。supersized.vars.slideshow_interval）; 
} 
  

该方法应如下所示：

  function brown（）{
 $ .ajax（{
 url：'ajax.php？action = brown'，
成功：function（data）{
 if（$。supersized.vars.slideshow_interval）{
 clearInterval（$。supersized.vars.slideshow_interval）; 
} 
 $（'＃script '）。html（数据）; 
} 
}）; 
 
} 
  

I am trying to call the supersized plugin (http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/) onclick, so far when i click on my diferent menus the images are changed, but it looks like html markup build by supersized dont get rebuild, right now i got this:

html wich calls a 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>

the html where i echo an ajax response:

<div id="script">

<script>$(function(){
        $.supersized({
                      slides    :   [
                     {image     : 'img/rooms-default.jpg'}
                     //{image     : 'img/rooms-default.jpg'}
                                    ]
                     })
                     })</script>

</div>

brow() is an ajax function:

 function brown(){
      $.ajax({
      url: 'ajax.php?action=brown',
      success: function(data){
        $('#script').html(data);
             }
           })

         }

then the ajax.php file loads its content to #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.....

so the images are updated when i click for the first time on a menu but if i click another menu title the images are updated too but the slideshow starts messing , it looks like the html markup is not rebuild, when i use only one image per menu title(only one image in supersized array) there is no problem. R.

解决方案

before adding the new script with

$('#script').html(data);

try to call this:

if($.supersized.vars.slideshow_interval){
  clearInterval($.supersized.vars.slideshow_interval);
}

the method then should look like:

function brown(){
  $.ajax({
    url: 'ajax.php?action=brown',
    success: function(data){
      if($.supersized.vars.slideshow_interval){
        clearInterval($.supersized.vars.slideshow_interval);
      }
      $('#script').html(data);
    }
  });

}

这篇关于调用jQuery超大插件onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！