Point to html page after last slide of html5 gallery

I've a problem with a html5 gallery. This gallery must point to a html page after last slide transition. I have 3 slides (a sort of splash composed by images) and after the third image I want to redirect on my website's home page.

<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>

You can download here the html file complete with all code.

Thank you for your help. Simone

Answers


You can hook into the logic which loops back to the first slide. This works by checking whether the next element is a figure element and, if not, grabbing the first figure element and switching to it. You can override this logic to redirect your page after the last slide has displayed like so (not tested):

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

I've hardcoded the URL in place for speed and clarity, but a better approach would be to pass the URL to the plugin via the options object it receives as a parameter of the init method.


Need Your Help

Strange IE vs Firefox Javascript animation speed

javascript jquery firefox timer internet-explorer-9

I have the following function that ties into a bunch of different plugin settings, allowing you to configure the handles, speed, and angles for rotating objects. Everything runs crystal clear and r...