Как сделать масштаб в моем случае?

Question

Я пытаюсь создать функцию, которая, когда пользователь нажимает на изображение, div будет появляться и анимироваться по размеру изображения, чтобы он соответствовал всему окну браузера.

Это будет что-то вроде

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

После нажатия ima2

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

при img2 щелчке по DIV, который имеет содержание выскочит и анимацию, чтобы соответствовать всему браузеру экрана для просмотра. Я думаю, используя css transform для этого, но я не уверен, как начать и как заблокировать позицию содержимого изображения. Может ли кто-нибудь дать мне несколько советов? Большое спасибо!

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 Lightbox в прошлом, и это довольно просто настроить. В основном это просто всплывающее окно на вашей странице, которое показывает изображение, галерею или даже видеообъявление содержимого (с наложением).
http://dev7studios.com/plugins/nivo-lightbox/

Я знаю, что это только одна из многих других лайтбоксов, но эта работа отлично подходит для меня.