「直接鏈接到任何fancybox」，但網址在地址欄

我看了這篇文章How to create a direct link to any fancybox box，我設法實現它。不過，我注意到，只要有人點擊圖片，URL就不會改變。所以，基本上，所有的腳本都是讓我把圖像鏈接給人。如果人們想要抓住自己的圖像鏈接並分享它們，該怎麼辦？當人們瀏覽網站時，是否也可以在地址欄中顯示不同的圖片網址？「直接鏈接到任何fancybox」，但網址在地址欄

來源

2012-09-07 coldpumpkin

歡迎來到StackOverflow！請限制自己每個帖子一個問題/主題。按「提問」即可開始新建一個。這將使人們更容易審查和回答您的問題。謝謝！ – Greg

好吧，對不起。 – coldpumpkin

如果我理解正確：

當訪問者點擊的圖像，圖像中的fancybox彈出。
當訪問者瀏覽到page.html＃image01時，頁面加載的圖像已經顯示在fancybox中。
當訪客點擊image02時，您希望將網址更新爲page.html＃image02。

在這種情況下，您可以在單擊圖像時設置url散列片段。

location.hash = "image02";

使用你提供的例子：

var thisHash = window.location.hash; 
$(document).ready(function() { 
    $('.thumbs').fancybox({ 
     prevEffect: 'fade', 
     nextEffect: 'fade', 
     closeBtn: true, 
     arrows: true, 
     nextClick: true, 
     padding: 15, 
     helpers: { 
      thumbs: { 
       width: 80, 
       height: 80 
      } 
     }, 
     beforeShow: function() { 
      var id = this.element.attr("id") 
      if (id) { 
       window.location.hash = id; 
      } 
     }, 
     beforeClose: function() { 
      window.location.hash = ""; 
     } 
    }); 

    if (thisHash) { 
     $(thisHash).trigger('click'); 
    } 
});

來源

2012-09-07 16:48:20 Greg

嗨。這首先不起作用，因爲如果我插入「。」，Dreamweaver告訴我存在錯誤並且確實會導致衝突，因爲當我打開圖像時，它會將我重定向到圖像本身。其次，這是行不通的，因爲代碼是用於頁面內的所有圖像。我會盡快用一個示例頁面更新此評論。 – coldpumpkin

再次。下面是示例＃1（不帶location.hash）的鏈接：http://josemelo.net/example/index.html 下面是示例＃2（帶有location.hash）的鏈接：http：/ /josemelo.net/example/index2.html – coldpumpkin

@coldpumpkin - 您將location.hash作爲屬性添加到fancybox的選項對象中。這是不正確的。我的例子'location.hash =「image02」;'是一個聲明。它應該在事件處理程序中調用。 – Greg

我用格雷格的代碼，但我使用這些選項來代替（以不同的方式引用的ID，因爲格雷格的方法是不適合我的工作）：

onStart: function(selectedArray, selectedIndex, selectedOpts) { 
     var id = $(selectedArray[ selectedIndex ]).attr('id'); 

     if (id) { 
      window.location.hash = id; 
     } 
    }, 
    onClosed: function() { 
     window.location.hash = ""; 
    }

來源

2013-07-04 15:34:17

beforeShow: function() { 
    var id = $(this.element).attr("href"); 

    if (id) { 
     window.location.hash = id; 
    } 
}, 
afterClose: function() { 
    history.pushState("", document.title, window.location.pathname + window.location.search); 
},

來源

2016-09-20 16:19:50

「直接鏈接到任何fancybox」，但網址在地址欄

回答

相關問題