如何用css和jquery創建一個類似facebook的畫廊？

-1

我想在我的網站上添加一個限制寬度的照片庫（高度無關緊要）。我嘗試了很多類型的畫廊，但所有這些都取決於照片的寬度或高度。然後，我想「爲什麼不使用像Facebook一樣的模板？」，但我的問題是，我不知道如何。我不需要像Facebook這樣的複雜畫廊，但我需要autoresize可點擊的照片（看起來在相冊中呈現照片的小縮略圖），並且當您用左右箭頭單擊它們以擴大到正常尺寸時。你能幫我實現我的目標嗎？如果有什麼不清楚的地方，請在評論部分問我，我的英語說得不好。 PS：我所有的網站都是基於html，jquery和css的。如何用css和jquery創建一個類似facebook的畫廊？

來源

2013-03-16 Adi Micutzu

無法在Javascript中輕鬆調整圖像大小 - 這意味着首先下載整個圖像，這對於大型圖庫來說會非常緩慢。您應該使用任何您熟悉的技術（例如PHP/ASP.Net/Python/Ruby）在服務器上生成縮略圖。 – Basic 2013-03-17 00:00:57

您可以使用下面的CSS屬性重新縮放圖像，雖然如上所述，這將不會執行您的加載時間任何優惠和服務器端腳本將是一個更可取的選項，如果你願意鑽研進入PHP。如果沒有，請隨意創建一個具有設置寬度和高度的div以及下面的屬性和背景圖像，並且應該可以工作。缺點是你可能無法在不使用onClick/JavaScript的情況下鏈接div。

background-size: 100%;

至於jQuery的，你可以使用http://fancybox.net燈箱插件，允許用戶點擊一個「縮略圖」，查看全尺寸圖像，並使用箭頭鍵切換圖像。

來源

2013-03-17 00:24:57

最好的解決方案是有一個服務器端調整腳本，將您的圖像縮放到預定義的約束（例如縮略圖，預覽和全尺寸）。有很多方法可以做到這一點，例如用於PHP的http://www.reconn.us/image_thumbnail.html。

更簡單的方法是隻使用CSS樣式屬性讓瀏覽器調整圖像大小。這有一個缺點，即服務器將始終發送大圖像，無論用戶想要以全尺寸查看它們，只需要在img標籤中設置寬度和高度。

來源

2013-03-17 00:09:32 hexblot

如何用css和jquery創建一個類似facebook的畫廊？

回答

相關問題