Question

我正在使用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;
    }

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

Answer 1

我想到了三种不同的方式去做你所要求的事情（就在我的脑海中）。

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

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

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

Examples

Answer 2

假设您从点击功能传递函数$(this)并传递它（放大（项目）），您应该能够实现它。你也可能在你的其他地方有一个

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

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

添加缩放功能到jquery polaroid gallery

2 个答案: