Question

我希望有人可以提供任何帮助!!

我有使用jqModal（http://dev.iceburg.net/jquery/jqModal/）启动模态窗口的网页。 jqModal正在调用一个带有NIVO Slider的外部html文件。

当我在没有jqModal窗口的情况下单独查看外部html页面时，NIVO SLIDER运行良好。

但是当我通过jqModal查看外部页面时，滑块不起作用。

以下是我的链接：

这是外部html：link text

以下是使用jqModal查看的外部html：link text（点击第1号）。

任何建议都应该很棒。我真的被卡住了。这两个脚本是否相互冲突？我是否需要在启动时触发jqModal中的某些内容？

真的需要帮助。

谢谢

以下是具有NIVO SLIDER的外部html页面的代码：

    <script src="/src/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="/src/jquery/jquery.nivo.slider.js" type="text/javascript"></script>
    <link href="/src/css/logicpak.css" rel="stylesheet" type="text/css">


    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider({
    effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    slices:15,
    animSpeed:500, //Slide transition speed
    pauseTime:3000,
    startSlide:0, //Set starting Slide (0 index)
    directionNav:false, //Next & Prev
    directionNavHide:false, //Only show on hover
    controlNav:false, //1,2,3...
    controlNavThumbs:false, //Use thumbnails for Control Nav
    controlNavThumbsFromRel:true, //Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', //Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){}, //Triggers after all slides have been shown
    lastSlide: function(){}, //Triggers when last slide is shown
    afterLoad: function(){} //Triggers when slider has loaded
    });
    });


    function loadPage(list) {
    location.href=list.options[list.selectedIndex].value
    }

    </script>


    <title>Untitled 1</title>
    </head>

这是启动jqModal的网页代码：

     <!DOCTYPE html>
     <html>

      <head>
      <title>Manuacturer of Folding Cartons</title>
      <meta content="feeding orphans around the world" name="description">
      <link href="/src/css/logicpak.css" rel="stylesheet" type="text/css">
      <script src="/src/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
      <script src="/src/jquery/jqmodal.js" type="text/javascript"></script>



      <script  type="text/javascript">
      $().ready(function() {
      $('#ex1').jqm({ajax: 'carton01.htm', trigger: '.ex1trigger'});
      });
      </script>

      </head>

Answer 1

我认为这与你在$(window).load()中包装滑块初始化代码这一事实有关，当通过AJAX加载对话框内容时不会触发，因为内容只是被追加到页面并被设置为对话框（实际上没有在新的浏览器窗口中加载）。这就是为什么你的例子不在对话框中时可以工作的原因。

由于您是通过AJAX检索HTML，因此您只需将滑块初始化代码移动到jqModal的onLoad处理程序（插件主页上的最后一个参数）：

$('#dialog').jqm({
    onLoad:function() {
        // slider code here.  This will be called when the AJAX
        // call returns.
    },
    ajax: 'page.html'
});

我会标准化调用滑块插件的元素的类，以便您可以使每个回调的onload函数相同。像这样：

var setupSlider = function() {
    // common slider initialization code.
    $(".slider").nivoSlider({ ... });
}

$('#dialog').jqm({
    onLoad:setupSlider,
    ajax: 'page.html'
});

如何触发jquery滑块（NIVO SLIDER）在jqModal窗口中工作？

1 个答案: