当前位置：文江博客话题详情

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

发布于 2024-10-09 14:33:23 字数 2958 浏览 0 评论 0原文

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

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

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

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

这是我的链接：

这是外部 html：链接文本

这是使用 jqModal 查看的外部 html ：链接文本（点击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>

原文

I hope someone can offer any help!!

I have web page that initiates a modal window using jqModal (http://dev.iceburg.net/jquery/jqModal/). The jqModal is calling an external html file that has a NIVO Slider.

When I look at the external html page by itself without the jqModal window, the NIVO SLIDER works well.

But when I look at the external page via jqModal, the slider does not work.

Here are my links:

Here is the external html: link text

Here is the external html viewed with jqModal: link text (Click on No. 1).

Any suggestions ould be awesome. I'm really stuck. Are the two scripts conflicting with each other? Do I need to trigger something in jqModal when it initiates?

Really need help.

Thank you

Here is the code for the external html page that has the NIVO SLIDER:

    <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>

HERE IS THE CODE FOR THE PAGE THAT INITIATES THE 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猥琐帝 2024-10-16 14:33:23

我认为这与您将滑块初始化代码包装在 $(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'
});

I think this has something to do with the fact that you're wrapping the slider initialization code in $(window).load(), which will not be fired when the dialog content is loaded via AJAX, since the content is just being appended to the page and being styled as a dialog (not actually loaded in a new browser window). This is why your example works when it's not in a dialog.

Since you're retrieving the HTML via AJAX, you could just move your slider initialization code to the onLoad handler of the jqModal (last parameter on the main page for the plugin):

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

I would standardize the class of the element the slider plugin is called on so that you can make the onload function the same for every callback. Something like this:

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

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

回复收藏 0 原文

~没有更多了~