0

このサイトの 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;
    }

どうすればこれを達成できるかについて何か考えはありますか?

4

2 に答える 2

1

私はあなたが求めていることを行うための3つの異なる方法を考えました（私の頭のてっぺんから）。

  1. 画像の小さいバージョンから始めて、ユーザーが画像をクリックすると、大きいバージョンに切り替わります（これによりぼやけが最小になります）
  2. 含まれている要素のサイズを変更します。含まれている要素のスタイルが正しいことを確認してくださいmax-width:100%; max-height:100%;
  3. CSS3変換を使用する（2D / 3Dスケール）

最後の2つのオプションを示すjsFiddleを作成しました（最初のオプションは簡単に理解できると思います）。

プラグインがスタイルの変更をハイジャックしているかどうかの質問については、特定のコードのデバッグが必要になります。

例

于 2012-06-13T23:25:14.957 に答える
0

クリック関数から関数を渡して（enlarge（item））渡すと仮定する$(this)と、それを実行できるはずです。あなたはまたあなたの他の人に持つことができます

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

別のものをクリックした後にそれを呼び出すことを心配する必要がないように。私はそれをテストしますが、あなたがすでに持っているものがわからないので、すべてをjsfiddleに入れることは私にはうまくいきません（さらに、自宅ではないので、v13のみを使用しているため、適切にテストできませんでした）。

于 2012-06-13T19:37:17.680 に答える