0

html5 ギャラリーに問題があります。このギャラリーは、最後のスライド トランジションの後の HTML ページを指している必要があります。3 つのスライド (画像で構成された一種のスプラッシュ) があり、3 番目の画像の後、Web サイトのホームページにリダイレクトしたいと考えています。

<div class="slider">
    <figure class="active">
        <img src="gallery/hp-1.jpg" onload="imageLoaded();" alt="image 1" />
    </figure>
    <figure>
        <img src="gallery/hp-2.jpg" alt="image 2" />
    </figure>
    <figure>
        <img src="gallery/hp-3.jpg" alt="image 3" />
    </figure>
</div>

<script>
(function($, window, document, undefined) {

    var Html5Gallery = {

        isTransitionInProgress : false,
        isMusicPlaying         : false,
        fMusicPlayer           : null,
        nextSwitch             : null,
        fMusicPlayerIsLoaded   : false,
        isWindowReady          : false,
        imageIsStillLoading    : true,

        init : function(element, options) 
        {
            var self = this;
            $(window).ready(function(){
                self.isWindowReady = true;
                if (!self.imageIsStillLoading) {
                    self.handleReadness();
                }
            });

            this.options = $.fn.extend({}, $.fn.Html5Gallery.options, options);
            this.imageIsStillLoading = true;

            $(window).bind("resize", this.handleResizing);

            window.flashIsLoaded = function() {
                self.flashPlayerLoaded();
            };

            window.imageLoaded = function() {

                if(!$("figure.active img").get(0).complete)
                {
                    self.isTransitionInProgress = true;
                    setTimeout(imageLoaded, 100);     
                    return;
                }

                self.imageIsStillLoading = false;

                if (self.isWindowReady) {
                    self.handleReadness();
                }
            };

        },

        nextImage: function(e)
        {
            if (this.isTransitionInProgress)
            {
                return;
            }

            this.cancelNextScheduledImage();

            var from = $("figure.active");
            var to = (from.next().is("figure") ? from.next() : from.parent().children(":first"));
            this.isTransitionInProgress = true;
            this.switchImages(from, to);
        },

        prevImage: function(e)
        {
            if (this.isTransitionInProgress)
                return;

            var from = $("figure.active");
            var to = (from.prev().is("figure") ? from.prev() : from.parent().children(":last"));
            this.isTransitionInProgress = true;
            this.switchImages(from, to);
        },

        switchImages: function(from, to)
        {
            var self              = this;
            var isNextImageLoaded = to.children("img").get(0).complete;
            if (isNextImageLoaded)
            {
                from.stop().fadeOut(self.options.transitionSpeed, function(){

                    from.removeClass("active").css("display", "none");
                    to.addClass("active");
                    self.handleResizing();
                    to.hide().fadeIn(self.options.transitionSpeed, function(){
                        self.isTransitionInProgress = false;
                        self.scheduleNextImage();
                    });
                });

                return;
            }

            $("#loading").hide().fadeIn(self.options.transitionSpeed, function(){
                from.removeClass("active").css("display", "none");
                to.addClass("active");
                if (isNextImageLoaded)
                {
                    self.handleResizing();
                    self.hideLoading();
                }   
                else
                {
                    imageLoaded();
                }
            });
        },

        hideLoading: function()
        {
            var self = this;

            $("#loading").fadeOut(this.options.transitionSpeed, function(){
                self.isTransitionInProgress = false;
                self.scheduleNextImage();
            });
        },

        cancelNextScheduledImage: function()
        {
            clearTimeout(this.nextSwitch);
            this.nextSwitch = null;
        },

        scheduleNextImage: function()
        {
            var self = this;
            this.cancelNextScheduledImage();
            if (!this.isTransitionInProgress && this.options.autoSwitch)
            {
                this.nextSwitch = setTimeout(function(){
                    self.nextImage();
                }, this.options.pauseOnPictureFor);
            }
        },

    };
})
</script>

ここからすべてのコードを含む html ファイルをダウンロードできます。

ご協力ありがとうございました。シモーネ

4

1 に答える 1

0

最初のスライドにループバックするロジックにフックできます。これは、次の要素が要素であるかどうかを確認figureし、そうでない場合は、最初のfigure要素を取得してそれに切り替えることで機能します。このロジックをオーバーライドして、最後のスライドが次のように表示された後にページをリダイレクトできます（テストされていません）。

nextImage: function(e)
{
    if (this.isTransitionInProgress)
    {
        return;
    }

    this.cancelNextScheduledImage();

    var from = $("figure.active");
    // var to = (from.next().is("figure"); ? from.next() : from.parent().children(":first"));
    var to = from.next(); 

    if (to.is("figure")) {
        this.isTransitionInProgress = true;
        this.switchImages(from, to);
    } else {
        window.location.replace("http://stackoverflow.com");
    }
},

速度と明確さのためにURLを所定の位置にハードコーディングしましたが、より良いアプローチは、メソッドoptionsのパラメーターとして受け取るオブジェクトを介してプラグインにURLを渡すことです。init

于 2012-07-17T11:31:46.573 に答える