Question

我想实现Nivoslider的幻灯片放映以及jQueryUI pop-op框。当我将它们作为单独的实体实现时，弹出框就会停止工作。

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

顺便说一下，当谈到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"));
        }
    });     
});

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

1 个答案: