在点击(facebook风格)表单上显示照片

Question

我需要帮助在单击照片时显示更大的照片。让我解释得更好。

我正在做一个艺术项目。我在CodeIgniter上使用MVC（模型视图控制器），我想，如果可以向我展示代码，以及将其放在哪里…所以当我点击图像时，它会变得更大，就像facebook上的照片一样。。。它们很小，但当你点击它们时，它们会变大，这样你就可以更好地看到图像。

知道吗？

将不胜感激：）

Answer 1

好的，这是js小提琴：

http://jsfiddle.net/tK6up/2/

这是代码。它假设您使用的是最新的jQuery库：HTML:

<img class="small_img" src="http://www.fleces.com/media/images/fleces_logo.png" style="width:100px;" />
<div id="large">
</div>

CSS：

#large{
    display:none; 
    position:absolute; 
    z-index:100; 
    top:10%; 
    left:10%;
}
.small_img{
    width:100px;
}

jQuery:

$(document).ready(function(){    
    $('.small_img').on('click', function(){
       $('#large').html($(this).clone().removeClass('small_img')).fadeIn("medium");
    });
    $('#large').on('click', function(){
        $(this).fadeOut("medium");   
    });
});

请记住，我刚刚把这个拼凑在一起。我不知道脸书做什么，因为我不使用那个网站。我只是根据你的描述。事实上，你可能会使用lightbox来处理弹出窗口，几乎可以肯定的是，你会根据自己的需要重新设计css的样式。但是，根据你的大纲，这是可行的。