1

写真ポートフォリオの表示/ギャラリー スライダーに取り組んでいます。

私はすでに半分動作するプロトタイプを持っていますが、なぜそれが一方向に画像を完全に中央に配置し、他の方向には中央に配置しないのかを理解することはできません:S

http://jsfiddle.net/K88Yg/3/

興味深いことに、ウィンドウのサイズを変更して move_slide() 関数を 2 回目に呼び出すと、適切な場所に移動します...では、何が起こっているのでしょうか? 誰でも光を当てることができますか？

これはかなり風変わりな問題だと思います。だから新鮮な目は私が割り当てるのを助けることができます.

これまでのところ私のコード:

jQuery(window).load(function() {


    //
    function set_slide_width(add_extra) {
        if (!add_extra) {add_extra = 0;}
        var slide_width = 0;
        $("#barely_slide article img").each(function(){
            slide_width += $(this).outerWidth();
        });
        $("#barely_slide article").css("width",slide_width + add_extra);
    }
    //
    set_slide_width();


    //
    function move_slide() {
        var focus_margin = 0;
        var img_real_height = 0;
        //
            var add_extra = 0;
            //var prev_deduct = 0;
        //
        $("#barely_slide article img").each(function(){
            //
                //if ($(this).attr("class") == "previous") {
                //  var theImage = new Image();
                //  theImage.src = $(this).attr("src");
                //  var img_real_width = theImage.width;
                //  var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
                //  prev_deduct = img_real_width_padding - $(this).outerWidth();
                //}
            //
            if ($(this).attr("class") == "focus") {
                    var theImage = new Image();
                    theImage.src = $(this).attr("src");
                    var img_real_width = theImage.width;
                    var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
                    img_real_height = theImage.height;
                    //
                        add_extra = img_real_width_padding - $(this).outerWidth();
                    //
                focus_margin += img_real_width_padding / 2;
                return false;
            }
            focus_margin += $(this).outerWidth();
        });
        //
            set_slide_width(add_extra);
        //
        var container_center = $("#barely_slide").outerWidth() / 2;
        var offset = container_center - focus_margin;
        //console.dir(offset);
        $("#barely_slide article").animate({"margin-left": offset }, "fast");
            //
            var img_height_offset = (img_real_height / 2) - 150;
            $(".focus").animate({"height":img_real_height,"margin-top":-img_height_offset}, "fast");
    }
    //
    move_slide();


    //
    var resize_timeout;
    $(window).resize(function() {
        clearTimeout(resize_timeout);
        resize_timeout = setTimeout(function(){    
            move_slide();
        },100);
    });


    //
    $("#barely_slide article img").on("click", function(){
        if ($(this).attr("class") == "focus") {return false;}

        //
            $("#barely_slide article img").removeClass("previous");
            $("#barely_slide article .focus").addClass("previous");
            $(".previous").animate({"height":300,"margin-top":0}, "fast");
        //

        $("#barely_slide article .focus").removeClass("focus");
        $(this).addClass("focus");
        move_slide();
        return false;
    });

});
4

3 に答える 3

1

よりうまく機能する別の解決策を見つけました。関数に変更するだけですmove_slide：

function move_slide() {
  var focus_margin = 0;
  var img_real_height = 0;
  var add_extra = 0;
  $("#barely_slide article img").each(function(){
    if ($(this).hasClass("focus")) {
      var theImage = new Image();
      theImage.src = $(this).attr("src");
      var img_real_width = theImage.width;
      var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
      img_real_height = theImage.height;

      add_extra = img_real_width_padding - $(this).outerWidth();

      focus_margin += img_real_width_padding / 2;
      return false;
    /***************** This is where the changes begin *************************/
    } else if ($(this).hasClass("previous")) {
      // If has the previous class, calculate the width with a height of 300.
      var shrinked_width = 300 *  $(this).width() / $(this).height();
      // add the padding.
      var img_width_width_padding = shrinked_width + ($(this).outerWidth() - $(this).width());
      // then update the focus_margin
      focus_margin += img_width_width_padding;
    } else {
      focus_margin += $(this).outerWidth();
    }
    /***************** This is where the changes end ***************************/
  });
  set_slide_width(add_extra);

  var container_center = $("#barely_slide").outerWidth() / 2;
  var offset = container_center - focus_margin;

  $("#barely_slide article").animate({"margin-left": offset }, "fast");

  var img_height_offset = (img_real_height / 2) - 150;
  $(".focus").animate({"height":img_real_height,"margin-top":-img_height_offset}, "fast");
}

これがjsfiddleです：http://jsfiddle.net/JQaLB/4/

于 2013-05-13T17:39:24.487 に答える