在響應式設計中禁用燈箱

我已經搜索過關於jQuery和響應式設計的SO帖子，但沒有找到任何相似的運氣。我的問題是，我有一個網站，當它點擊> 960px時，它會掉下所有的眼睛糖，變得流暢。在某些頁面上，我使用lightbox預覽縮略圖中的較大圖像。當960px被擊中時，我想放棄燈箱效果。下面是我收藏如何設置：在響應式設計中禁用燈箱

收藏：

<a href="images/some-img.jpg" rel="lightbox" title="some title">some text &raquo;</a>

有沒有辦法說禁止的rel =「收藏夾」使用jQuery在> 960像素？提前致謝！

來源

2012-12-27 Ben

從你的問題，這聽起來像你只想在更小的屏幕寬度的燈箱？我通常會做相反的事情，因爲燈箱不適合移動。 –

沒有你的權利，它不能很好地發揮。這是一個錯字... < – Ben

您必須爲此使用js。根據您正在使用的Lightbox庫，您可能需要在重新添加lightbox rel屬性後重新初始化它。

var lightboxOnResize = function lightboxOnResize() { 
    if ($(window).width() < 960) { 
     $('a[rel="lightbox"]') 
      .removeProp('rel') 
      .addClass('lightboxRemoved'); 
    } else { 
     $('a.lightboxRemoved').prop('rel', 'lightbox'); 
    } 
} 

$(document).ready(lightboxOnResize); 
$(window).resize(lightboxOnResize);

來源

2012-12-27 13:29:41 ryan

爲了比我更好的代碼+1 ;-) –

這應該做的@ryan我應該感激它。我會在午飯後把它磨掉，謝謝你。（PS喜歡這個天氣嗎？Im也是來自PA） – Ben

刪除屬性在我們的環境下不起作用:(調試此刻查找根本原因，也許從'Lightbox.imageArray''刪除一個項目等信息。 –

這是編碼方法。

當你把lighbox連接到div時，你需要提供一個條件。

條件會是這樣的

如果（screenPixel> 960） { 我的收藏夾加入到div }

來源

2012-12-27 13:21:11

像這樣的東西可能會奏效：此代碼是未經測試，只會刪除rel="lightbox"，不要將其重新添加到調整大小中。應該很容易添加，如果它對你很重要。

var responsiveLightbox = function() { 
    var viewportWidth = $(window).width(); 
    if (viewportWidth > 960){ 
     $('[rel=lightbox]').attr('rel', ''); 
    } 
} 

$(document).ready(function() { 
    responsiveLightbox(); 
}); 
$(window).resize(function() { 
    responsiveLightbox(); 
});

來源

2012-12-27 13:22:55

這不會處理窗口被調整大一些 – ryan

如我的迴應的頂部所述。通常對於響應式設計，我不會太擔心人們來回調整窗口大小的用例。這就是說，你的代碼更好。 –

無以前的答案的工作對我來說，從一個特定元素中刪除燈箱，所以我張貼另一種解決方案，可以幫助某人當前遇到類似的問題。

我Lightbox2的版本調用一個函數initList結合click功能和基於DOM供燈箱什麼元素都被「標記」，然後調用start功能。如果您想爲特定屏幕尺寸的特定元素停用Lightbox，那麼可以解除點擊事件的解除綁定。

要小心，但要解除綁定，因爲可能有其他腳本具有附加到元素的點擊行爲！如果將處理程序存儲在變量中，稍後可以參考unbind('click', handler)這樣的行爲。不幸的是，我的Lightbox2版本沒有以這種方式設置，並且據我所知，版本2.8.2 on Github沒有解除綁定功能，也沒有全局引用處理程序變量。因此，在這種情況下，如果還有其他需要保留的點擊事件，則必須修改代碼庫。

在任何情況下，代碼將是這樣的：

$(document).ready(function() { 
    if (screen.width < 1024) { 
    $('#some-id').unbind('click'); 
    } 
});

你甚至不必刪除rel財產在a元素：

<a href="./linkedcontenturl.ext" id="some-id" rel="lightframe" target="_blank">click here!</a>

根據內容您鏈接到（例如PDF），添加target="_blank"也是一個好主意，但重要的是首先在目標設備上測試體驗，不同的設備可能會顯示不同的行爲。

來源

2016-04-07 08:53:38

在響應式設計中禁用燈箱

回答

相關問題