如何縮放以適合我的情況？

Question

我正在嘗試創建一個功能，當用戶單擊圖像時，div將從圖像的大小彈出並設置動畫以適合整個瀏覽器窗口。

它會像

 -----------------
|                 |
|      img1       |
|          img2   |
 -----------------

單擊ima2

 -----------------
|                 |
| image2 contents |
|                 |
 -----------------

單擊img2時，具有內容的div將彈出並設置動畫以適合整個瀏覽器可見的屏幕。 我正在考慮使用CSS轉換來執行此操作，但是我不確定如何開始以及如何鎖定圖像內容位置。 誰能給我一些提示嗎？ 非常感謝！

Answer 1

你是說像FIDDLE這樣的東西嗎？

JS

var $dialogpopup = $( ".hiddenimagediv" ).dialog({
                  autoOpen: false,
                  height: 'auto',
                  width: 'auto',
                  position: {my: "top middle",
                             at: "top middle",
                             of: ".imagediv"},
                  title:"Your Picture"});

$('.imagediv').click(function(){
                               $dialogpopup.dialog('open');
                               });

您可以刪除上方的小節，播放格式等。

Answer 2

如果要縮放頁面上的圖像，我最近構建了一個腳本來很好地處理此問題：

https://github.com/kthornbloom/Smoothzoom

Answer 3

我過去曾經使用過Nivo燈箱，並且設置起來非常簡單。 基本上，它只是頁面上的彈出窗口，在內容的頂部顯示圖像，圖庫甚至視頻（帶有覆蓋層）。
http://dev7studios.com/plugins/nivo-lightbox/

我知道這只是其中許多其他燈箱之一，但是這個燈箱對我來說效果很好。