画像ギャラリー/ズーム付きスライド

gallery image image-zoom javascript jquery
画像ギャラリー/ズーム付きスライド

この場合、ユーザーが画像をクリックすると、この画像はブラウザの高さの100%で表示され、ユーザーは次/前の画像に移動できます。 ユーザーがもう一度クリックすると、画像はより大きなサイズで表示され(実際のサイズである可能性があります)、ユーザーは画像内を上下に移動できますが、スクロールせずにマウスを動かすだけです。

私がやりたいのは、ユーザーが画像内で最初にクリックしたとき、最後のステップに進むことです。マウスの動きに同期して上下する最大の画像と、次の画像に進む可能性です。 言い換えれば、元のケースの最初と2番目のステップの機能を組み合わせたものです。

チュートリアルやデモはどこで見ることができますか? またはどうすればこれを行うことができますか?

ありがとう

  1  0


ベストアンサー

基本的に、やりたいことには3つの部分があります。

  1. 画像をクリックすると、ブラウザに関する画像が表示されます
    高さ

  2. このモードでは、次の画像に移動できます

  3. その画像をもう一度クリックすると、スーパーサイズモードになり、
    マウスの位置により、画像のどの部分を見ているかが決まります

これを実証するためのフィドル全体を書くつもりはありませんが、それはまともな量の作業ですが、基本的なアイデアはお伝えできます。

#1では、画像をクリックすると、高い数値(9999など)の「z-index」を持つ新しいdivが作成されます。 位置は「固定」され、作成します

$(window).resize(function() {

    var windowheight = $(window).height();
    $("#imgdiv").css("height", windowheight);
});

ユーザーがウィンドウのサイズを変更することを決定した場合、画像のサイズを変更します。この方法では、常にブラウザの全高を占有します。

#2では、矢印は新しい `img`タグを作成するだけです。 そして、アイデアは次のようなものです

function loadnew() {

    // create the new image
    var newimg = ""
    $("#imgcontainer").append(newimg);

    // make sure it has the same classes as the current img
    // so that it's in the same position with an higher z-index
    // then load the image
    $("#newimg").addClass( "class1 class2" );
    $("#newimg").css( "z-index", "+=1" );
    $("#newimg").css( "opacity", 0 );

    $("#newimg").attr("src", "url/to/img");

    // animate the thing and then replace the src of the old one with this new one
    $("#newimg").animate( {
        opacity: 1;
    }, 1000, function() {
        $(oldimg).attr("src", $("#newimg").attr("src"));
    });
}

#3で、幅に関して画像のサイズを変更します。 div `fixed`が配置されました。 繰り返しになりますが、

$(window).resize(function() {

    var windowwidth= $(window).width();
    $("#imgdiv").css("width", windowwidth);
});

常に画面全体を占めるようにします。 また、マウスを動かすには、「mousemove」イベントハンドラーが必要です。

$("#superimgdiv").mousemove( function(e) {

    // need to tell where the mouse is with respect to the window
    var height = $(window).height();
    var mouseY = e.pageY;
    var relativepct = mouseY/height;

    // change the position relative to the mouse and the full image height
    var imgheight = $("superimg").height();
    $("superimgdiv").css("top", -1*relativepct*imgheight);
});

以上です。 もちろん、多くの詳細は省略していますが、これは一般的な考え方です。 うまくいけば、これはあなたが始めることができます。 がんばろう。

0


タイトルとURLをコピーしました