調整大小彩盒上窗口調整

彩盒似乎是很適合「開箱即用」的響應式設計。我與百分比覆蓋默認尺寸設置，然後設置最大值這樣的事情不會失控在大屏幕：調整大小彩盒上窗口調整

$.colorbox.settings.width = "92%"; 
$.colorbox.settings.height = "90%"; 
$.colorbox.settings.maxHeight = 850; 
$.colorbox.settings.maxWidth = 1200;

工程。我還將cboxTitle元素的大小設置爲與其上面img的寬度完全一致，以便我的有時冗長的標題始終排列得很好。

$(document).bind('cbox_complete', function(){ 
    var photoWidth = $(".cboxPhoto").innerWidth(); 
    var photoContainer = $("#cboxContent").outerWidth(); 
    var leftPix = (photoContainer - photoWidth)/2;  
    $("#cboxTitle").css({'left' : leftPix, 'width' : photoWidth}); 
});

這似乎也工作。這留下了可怕的部分：處理窗口大小調整事件。我想下面的

$(window).on("resize", function(){ 
    $.fn.colorbox.resize({ 
     height: "90%", 
     width: "92%" 
    }); 
});

（我實際使用自定義debouncedresize事件而不是標準的jQuery調整大小，以油門的Webkit調整大小事件流，但我要離開的那部分因爲它是不相關的。另外，我在調整大小的選項，因爲否則不會進行調整時重複相同的寬度和高度的百分比值。:(）

最後這部分是不工作的。我會試圖打破的問題：當用戶以標準尺寸destop加載一個顏色框

1），然後縮放視窗ñ arrower，cboxPhoto元素的高度不能正確縮放。寬度正在收縮，但高度保持不變，形成「擠壓」。所以我嘗試添加height:auto到CSS的cboxPhoto。這恢復了寬高比，但現在cboxPhoto元素太大了，被裁剪。我之前沒有收到模態內的滾動條。如果我關閉了colorbox並以新的瀏覽器視口寬度重新打開它，照片的尺寸就不是這樣了。

2）cboxTitle CSS中不被重新計算。 colorbox調整大小功能似乎不會觸發cbox_complete事件。不應該嗎？

我很想解決這些問題，但我也感覺到，考慮到當前插件的狀態，解決此用例的最簡單方法是在窗口大小調整時關閉並重新加載整個colorbox，但回到用戶在調整大小事件之前查看的畫廊中完全相同的內容。但是我很不清楚如何編碼。預先感謝任何幫助！

P.S.每個人，請讓我說，只有設計師調整窗口大小。對不起，我只是不買。人們擴展當一個驚人的照片在屏幕上，和平板電腦尤其是得到旋轉所有的時間...

來源

2012-05-30 Ben

這是我見過的最深思熟慮的問題之一;謝謝你。 Re＃2，我的想法是，這是插件作者的選擇。調整大小=重新顯示;理性思維可以不同。您的解決方法聽起來很方便。 –

這裏有什麼消息嗎？我很感興趣！ – headkit

你有沒有嘗試這樣的事：

if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     setTimeout(function(){ 
       $.colorbox.resize({ 
        width: '100%', 
        height: '80%' 
       }); 
      }, 1500); 
    }

嘗試沒有「.fn」，並與一些延遲，也...

來源

2012-08-12 21:03:46 headkit

是的，這是行不通的。我其實還在尋找這個答案！ – Ben

也許您需要關閉調整大小的方塊，然後在沒有更多大小調整事件發生一段時間時重新打開它。 – headkit

不依賴於定時器。 – Dementic

你能簡單地設置在調整大小顏色框窗口的CSS高度和寬度？

$(window).on("resize", function(){ 
    //check if colorbox is open. This 'if' is from stackoverflow, I haven't tested 
    if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     //replace colorboxID with the correct ID colorbox uses 
     document.getElementById('coloboxID').style.width='92%'; 
     document.getElementById('coloboxID').style.height='90%'; 
    } 
});

來源

2013-06-26 16:33:01

我會阻止在這種情況下使用$.resize。我認爲，CSS Media Queries功率響應設計。那麼爲什麼不使用媒體查詢。

我從來沒有試過colorbox在實踐中，但我想$.colorbox.settings.width = "92%";插入一個內聯CSS元素。

刪除這些設置。阻止您的colorbox元素中的任何內聯CSS。然後，只需使用CSS爲width和height提供大型桌面的初始縮放比例。

並使用Media Queries來放大窗口大小的模式大小。

#colorbox{ 
    height: 90%; 
    width: 92%; 
} 

@media (max-width: 992px) { 
    #colorbox{ 
     height: 90%; 
     width: 92%; 
    } 
}

多個查詢也是完全合法的。因此，您可以在更小的尺寸上設置模態尺寸。

@media (max-width: 430px) { 
    #colorbox{ 
     height: 96%; 
     width: 98%; 
    } 
}

您可以使用px代替%，但在這種情況下，你彩盒模式寬度/高度將是跳躍從一個尺寸移動到另一個的時候有點是。但在這種情況下，您可以使用CSS的transition屬性來調整大小的過程。

來源

2014-02-14 09:20:41 Zafar

調整大小彩盒上窗口調整

回答

相關問題