将缩放功能添加到jQuery Polaroid Gallery

Question

我正在使用来自此站点的jquery和css3照片库，我希望能够在onclick上放大图像。 作者曾说过有一种方法可以做到这一点，但没有明确说明如何做到（我不是jquery专家）。

我尝试创建一个单独的脚本来更改图像的宽度和高度，但是我认为现有的jquery或css可能已经覆盖了它。
这只是一个测试，看看我是否可以来回更改它：

var size = false;
function enlarge(){

    if (size == false){
    document.getElementById("photo1").style.width = "100%";
    document.getElementById("photo1").style.height = "100%";
    size = true; 
    }
    else{
        document.getElementById('photo1').width = '134px';
        document.getElementById('photo1').height = '134px';
        size = false;
    }

关于我如何实现这一目标的任何想法？

Answer 1

我想到了三种不同的方式来完成您要问的事情（就在我脑海中）。

1. 从图像的较小版本开始，当用户单击图像时，它会切换到较大版本（模糊程度最小）
2. 更改包含元素的大小。 确保包含元素的样式为max-width:100%; max-height:100%; max-width:100%; max-height:100%;
3. 使用CSS3转换 （2D / 3D比例）

我创建了一个jsFiddle，演示了最后两个选项（我想您可以轻松找出第一个）。

至于插件是否正在劫持您的样式更改问题，这将需要对特定代码进行一些调试。

例子

Answer 2

假设您从click函数传递了函数$(this)并传递了它（enlarge（item）），那么您应该能够实现它。 你也可以在其他地方

$('img').each(function(){
    $(this).width = '134px';
    $(this).height = '134px';
});

这样您就不必担心在单击另一个按钮后再调用它。 我会对其进行测试，但是不确定您已经拥有什么，并将整个内容放入jsfiddle中对我来说不起作用（加上不在家里，因此只能使用v13，因此我无法正确测试）。