0

スライドショーと 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>
4

1 に答える 1

0

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"));
        }
    });     
});
于 2014-03-05T21:09:08.817 に答える