1

I am using "rcarousel – a continuous jQuery UI carousel" located at http://ryrych.github.io/rcarousel/. After creating the carousel, I wish to change the content on one of the carousel panes. I could change the content easily enough with the following script: $('#carousel').find('input.change').click(function(){$(this).parent().parent().find('div.display').html('New content');});

Problem is if you go to another pane, then back, the "changed" pane reverts back to it's original content.

A live example is located at http://tapmeister.com/test/ryrych-rcarousel/examples/dynamic.php, and the script is included below.

var active=true;

$("#carousel").rcarousel(
    {
        visible: 1,
        step: 1,
        width: 780,
        height: 240,
        speed: 500,
        startAtPage: 2,
        start: function() {
            var carousel=$(this),parent=carousel.parent();
            $('#next-slide').click(function(){if(active) {carousel.rcarousel("next");}});
            $('#prev-slide').click(function(){if(active) {carousel.rcarousel("prev");}});

            for ( var i = 0; i < carousel.rcarousel( "getTotalPages" ); i++ ) {
                $("<a />",{href:'#','class':'carousel-bullet off'})
                .bind("click", {page: i},
                    function( event ) {
                        if(active) {
                            carousel.rcarousel( "goToPage", event.data.page );
                            event.preventDefault();
                        }
                    }
                )
                .appendTo( "#carousel-pages" );
            }

            // mark first page as active
            $( "a:eq(0)", "#carousel-pages" )
            .removeClass( "off" )
            .addClass( "on" )
            .css("background-image", "url(images/page-on.png)" );

            $("#next-slide, #prev-slide, .carousel-bullet" )
            .hover(
                function(){
                    if(active){$( this ).css("opacity", 0.7 );}
                },
                function(){
                    if(active){$( this ).css("opacity", 1.0 );}
                }
            );

        },
        pageLoaded: function( event, data ) {
            $( "a.on", "#carousel-pages" )
            .removeClass( "on" )
            .css("background-image", "url(images/page-off.png)" );

            $( "a", "#carousel-pages" )
            .eq( data.page )
            .addClass( "on" )
            .css("background-image", "url(images/page-on.png)" );
        }

    }
);

<div id="carousel-container">
    <div id="carousel">

        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 0</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 1</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 2</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 3</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 4</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 5</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>

    </div>
    <a href="#" id="next-slide" class="change-slide"></a>
    <a href="#" id="prev-slide" class="change-slide"></a>
    <div id="carousel-pages"></div>
</div>
4

1 に答える 1

0

updatePageDOM()プラグインに次のメソッドを追加します

updatePageDOM: function() {
    var $root = $(this.element),
    data=$root.data("data");
    //Note that data.paths[data.pageIndex] and data.pages[data.pageIndex][0] is the same
    data.paths[data.pageIndex].html($root.find('div.slide').html());
},
于 2013-05-14T12:40:05.717 に答える