Изменение размера перетаскивания в jScrollPane - PullRequest
Новая
       40

Изменение размера перетаскивания в jScrollPane

0 голосов
/ 17 января 2012

Я реализую горизонтальный слайдер изображений, используя jScrollPane, и пытаюсь установить минимальную ширину 63 для маркера перетаскивания (.jspDrag), используя параметр horizontalDragMinWidth .

К сожалению, это просто не работает, и я понятия не имею, почему.Буду очень признателен за помощь.

Проблема отображается на http://tmcdomains.com/jScrollPane/static.html.

Следующий скрипт находится в моем нижнем колонтитуле, чуть выше тега: 

<script type="text/javascript">
$(function () {
$("img").wrap('<div class="item" />');
var $conveyor = $("#conveyor");
var $item = $(".item", $conveyor);
var $viewer = $("#viewer");
var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp");

var imagesWidth = 0;
$($item).each(function (index, image) {
    var $image = $(image);
    imagesWidth += $image.outerWidth() + parseInt($item.css("margin-right"), 10);
});
$($conveyor).width(imagesWidth);

function scrollByItem(direction) {
    var xPos = api.getContentPositionX();
    var viewerHalfWidth = $viewer.width() / 2;
    var pixels = 0;
    $($item).each(function (i) {
        pixels += $(this).outerWidth(true);
        if (pixels >= (xPos + viewerHalfWidth)) {
            if (direction == "right" && $item[i + 1]) {
                api.scrollToX(($($item[i + 1]).outerWidth(true) / 2) + pixels - viewerHalfWidth, true);
            } else {
                if (direction == "left" && $item[i - 1]) {
                    api.scrollToX(pixels - $(this).outerWidth(true) - viewerHalfWidth - ($($item[i - 1]).outerWidth(true) / 2), true);
                }
            }
            return false;
        }
    });
    return false;
}
$("#prev").click(function () {
    scrollByItem("left");
});
$("#next").click(function () {
    scrollByItem("right");
});

$viewer.each(
    function()
    {
        $(this).jScrollPane();
        var api = $(this).data('jsp');
        var throttleTimeout;
        $(window).bind(
            'resize',
            function()
            {
                if ($.browser.msie) {
                    // IE fires multiple resize events while you are dragging the browser window which
                    // causes it to crash if you try to update the scrollpane on every one. So we need
                    // to throttle it to fire a maximum of once every 50 milliseconds...
                    if (!throttleTimeout) {
                        throttleTimeout = setTimeout(
                            function()
                            {
                                api.reinitialise();
                                throttleTimeout = null;
                            },
                            50
                        );
                    }
                } else {
                    api.reinitialise();
                }
            }
        );
    }
);    

});
</script>

1 Ответ

1 голос
/ 18 января 2012

Я не совсем понимаю, почему вы инициализируете jScrollPane дважды:

в первый раз: 

var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp");

во второй раз: 

$(this).jScrollPane();

Но после того, как я его отладил.jScrollPane действительно инициализировался дважды (строки 448 - 453 файла jScrollPane.js запускались дважды).Во второй раз, когда он инициализируется, horizontalDragMinWidth не было указано как часть настроек, поэтому горизонтальныйДрагМинитура равен 0 по умолчанию.Я догадываюсь, что это проблема.

...