галерея изображений / слайд с увеличением - PullRequest
Новая
       37

галерея изображений / слайд с увеличением

1 голос
/ 14 июля 2011

Я хотел сделать что-то похожее на это.

В этом случае, когда пользователь нажимает на изображение, это изображение отображается со 100% высоты браузера, а пользовательможно перейти к следующему / предыдущему изображению.Когда пользователь нажимает снова, изображение отображается в большем размере (может быть в реальном размере), и пользователь может перемещаться вверх и вниз по изображению, но без прокрутки, просто перемещая мышь.

ЧтоЯ хочу сделать это, когда пользователь нажимает первый раз на изображении, чтобы перейти к последнему шагу: самое большое изображение с синхронизацией вверх и вниз с движением мыши и возможностью перейти к следующему изображению.Другими словами, сочетание с функциями первого и второго шага оригинального кейса.

Где я могу увидеть учебник или демонстрацию ??или как я могу это сделать ??

Спасибо

1 Ответ

0 голосов
/ 14 июля 2011

По сути, есть три части того, что вы хотите сделать.

  1. Нажатие на изображение покажет изображение относительно высоты браузера
  2. Вы можете перейти к следующемуизображение, пока вы находитесь в этом режиме
  3. Повторное нажатие на это изображение перейдет в режим суперразмера, когда положение мыши определяет, на какую часть изображения вы смотрите

Яне собираюсь писать целую скрипку, чтобы продемонстрировать это, потому что это приличный объем работы, но я могу рассказать вам основные идеи.

С # 1, когда вы нажимаете на изображение, вы создаете новый div сz-index большого числа (например, 9999).Позиция будет fixed, и вы создадите 

$(window).resize(function() {

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

, который изменит размер изображения, если пользователь решит изменить размер вашего окна, таким образом, он всегда будет занимать всю высоту вашего браузера.

С # 2 стрелки просто создают новый тег img.И идея примерно такая: 

function loadnew() {

    // create the new image
    var newimg = "<img id='newimg'></img>"
    $("#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);
});

И все.Конечно, я опускаю кучу деталей, но это общая идея.Надеюсь, это поможет вам начать.Удачи.

...