jQuery或PHP無縫圖像庫

我正在尋找一種方式來顯示各種寬度和高度的圖像庫，以便它們之間沒有任何空格。jQuery或PHP無縫圖像庫

事情是這樣的解決方案，但與IE兼容，寧願排水平而不是垂直列：http://css-tricks.com/seamless-responsive-photo-grid/

失敗插件或類似的，有沒有人對如何達致這任何信息？我已經用一些PHP瞭解了它，並想出瞭如何按比例將圖像縮放到給定的最大行高並跟蹤剩餘空間的大小，但是當圖像短於最大值（你仍然會得到一些空白）。

一個想法是隻顯示圖像，然後使用jQuery來縮放它們（使用寬度/高度屬性），這樣我就可以拍攝y圖像並找出如何將它們合併成一排x像素寬。

彎頭油脂不短，只需要在正確的方向微調。任何幫助讚賞

來源

2012-03-05 jammypeach

我一直在努力得到你想要的東西，而現在放置圖像在正確的地方。我看起來也是Chris Coyier的無縫照片網格，並且在我引入過濾時遇到了一些問題。

關於css-column無縫照片網格here和here，您可以看到我的問題/答案在計算器上。

然後，我嘗試了JavaScript的方法，通過在流體evnvironment使用jQuery Masnory。你可以在this stackoverflow的文章中看到如何做到這一點。

它的工作原理，但我仍然試圖找出爲什麼有插圖中的圖像垂直間隙。

所以我的答案是用磚石，如果你想有一個JavaScript的方法，但也知道，我從來沒有見過它的無縫和響應性光實現。我仍在尋找。

來源

2012-03-06 05:57:37 davecave

使有趣的閱讀，感謝您的鏈接。我最終做的是用固定寬度的水平行而不是列創建我自己的自動縮放畫廊，並使用一點點的PHP來顯示行中的最後一張圖片，如果它比剩餘空間大50％它會稍微裁剪一下），或者拉伸前一個來填充空間並將該圖像向下壓到下一行。花了血腥的時間來全力以赴：S一旦我完成了錯誤，我將在某個時刻打出答案 – jammypeach 2012-03-06 09:13:45

好吧，所以首先，你應該精神上將空間標記爲網格。所以，你的'帆布'是x單位寬，y單位高。現在，將圖像分配到保存其x，y起點的結構中，並將其分成寬和高的單元數。

現在最有趣的部分 - 如何執行使用PHP我會創造像

$images = array(array(x1_1, y1_1, length_1, width_1, src_1) 
        array(x1_2, y1_2, length_2, width_2, src_2))

一個數組，會告訴你關於你的照片，你需要知道它們打印到屏幕上的一切。

echo "<div id=\"myDiv\">; 
foreach($images as $i){ 
    echo "<img src=\"{$i[5]}\" height=\"{$i[3]}\" width=\"{$i[4]}\" x1=\"{$i[0]}\ y1=\"{$i[1]}\">"; 
echo "</div>";

在這一點上，我會使用jQuery通過將比例乘以屬性來修改高度和寬度元素。

$(document).ready(function(){ 
    var scale = 30; //30 pixels maybe? 
    //I'm not a jquery ninja, so please assume my syntax is wrong 
    $("#myDiv").children().each(function(){ 
     this.attr("height", this.attr("height")*scale); 
     this.attr("width", this.attr("width")*scale); 
    }); 

})

現在基於X1和Y1性質

$(document).ready(function(){ 
    var scale = 30; //30 pixels maybe? 
    //I'm not a jquery ninja, so please assume my syntax is wrong 
    $("#myDiv").children().each(function(){ 
     this.css('property', value); 
    }); 

})

來源

2012-03-05 13:23:26 Jake

jQuery或PHP無縫圖像庫

回答

相關問題