将缩放功能添加到 jquery 宝丽来图库

Add zoom functionality to jquery polaroid gallery

本文关键字：宝丽来 jquery 缩放 功能 添加      更新时间：2023-09-26

我正在使用这个网站的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;
    }

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

我想到了三种不同的方法来做你所问的（就在我脑海中）。

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

我创建了一个 jsFiddle 来演示最后两个选项（我假设你可以很容易地找出第一个选项）。

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

例子

假设你从点击函数传递函数$(this)并传递它（enlarge（item）），你应该能够让它发生。 你也可以在你的 else 中有一个

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

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

相关文章：