jquery-ui - 在一页上实现 nivoslider 和 jqueryui.com/demos/dialog

Question

我想为幻灯片和 jQueryUI 弹出框实现 Nivoslider。当我将它们实现为单独的实体时，弹出框将停止正常工作。

有没有办法一起实现它们，还是有致命错误？

顺便说一句，谈到 js，我是一个完全的菜鸟 - 请善待并为我拼写出来：D

这是 Nivoslider 的代码：

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed: 2000, // Slide transition speed
    pauseTime: 6000, // How long each slide will show
    });
});
</script>

这是 jQuery UI 弹出框的代码：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>

Answer 1

我的实现基于 Nivo Slider 提供的演示脚本，只需添加 jquery UI 并使用此代码。它存储滑块信息并在每次打开对话框时重新创建滑块。

HTML 代码

<div id="wrapper">
        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

        <button id="btnTestMe">Open Slideshow</button>
    </div>

    <div id="dlgTestMe">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>  
    </div>

jQuery 代码

$('#btnTestMe').click(function(e){
    e.preventDefault();
    $('#dlgTestMe').dialog({
        open: function(){
                var data = $('.slider-wrapper').html();
                if (typeof($(this).data("slider")) == "undefined"){
                    $(this).data("slider", data);
            }                   
            $('#slider').nivoSlider();
        }, beforeClose: function(){
            $('#slider, .nivo-controlNav, .nivo-html-caption').detach();
            $(this).children('.slider-wrapper').html($(this).data("slider"));
        }
    });     
});