指向html5圖庫的最後一張幻燈片後的html頁面

Question

我有一個html5圖庫的問題。 此圖庫必須在上次切換幻燈片後指向html頁面。 我有3張幻燈片（一種由圖像組成的飛濺），並且在我想在我的網站主頁上重定向的第三張圖像之後。

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

您可以下載here html文件完整的代碼。

謝謝你的幫助。 Simone

Answer 1

您可以掛鉤回到第一張幻燈片的邏輯。這通過檢查下一個元素是否爲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，但更好的方法是通過通過作爲init方法參數接收的options對象的插件URL。