在一个页面上实现nivoslider和jqueryui.com/demos/对话

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"));
        }
    });     
});