将缩放功能添加到 jquery 宝丽来画廊答案

【问题标题】：Add zoom functionality to jquery polaroid gallery将缩放功能添加到 jquery 宝丽来画廊
【发布时间】：2012-06-13 18:40:12
【问题描述】：

我正在使用来自this 站点的 jquery 和 css3 照片库，并且我希望能够在点击时放大图像。作者已经说过有一种方法可以做到这一点，但没有明确说明如何（我不是 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;
    }

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

【问题讨论】：

您的var size 需要是全局的或其他的； else 块永远不会执行。

标签： javascript jquery css photo

【解决方案1】：

我想到了三种不同的方法来完成您的要求（就在我的脑海中）。

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

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

至于插件是否在劫持你的风格变化，这需要对你的特定代码进行一些调试。

Examples

【讨论】：

我已经成功使用了您编写的 css3 缩放函数，想知道如何在不复制代码、myImage1、myImage2 等的情况下将该函数应用于多个元素...
@redleaf - 就像将 css 类添加到您想要影响的元素一样简单。

【解决方案2】：

假设您从 click 函数传递函数 $(this) 并传递它（放大（项目）），您应该能够实现它。你也可以在你的 else 中有一个

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

这样您就不必担心在单击另一个后调用它。我会测试它，但不确定你已经拥有什么，并且将整个东西放在 jsfiddle 中对我来说不起作用（加上不在家里，所以只使用 v13，所以我无法正确测试）。

【讨论】：