javascript - 来自画廊的multiscroll.js

大家好，

我需要一点帮助！

使用multiscroll.js plugin（https://github.com/alvarotrigo/multiscroll.js），
我想target单击img以打开正确的部分。

有一个option打开特定的部分，只需在'active'上添加类ms-section。 （也许可以吗？）

请注意，我不想使用anchors option。

我不知道该怎么做...

只需打开multiscroll div：

$('img').on('click', function() {
        $('#mosaic').fadeOut();
        $('#multiscroll-nav, #multiscroll, .icon').fadeIn();
    });
    $('.icon').on('click', function() {
        $('#mosaic').fadeIn();
        $('#multiscroll-nav, #multiscroll, .icon').fadeOut();
    });

JSFIDDLE

谢谢。

最佳答案

无论如何，您都需要识别图像以知道跳到哪里。我使用src属性来完成此操作。
由于这种怪异的上下运动，必须转换实际位置。参见代码。 （标记为添加的内容）

$(document).ready(function() {
    var ms = $('#multiscroll');
    $('#multiscroll, #multiscroll-nav').hide();
    ms.multiscroll({
        scrollingSpeed: 1500,
        easing: 'easeInOutExpo',
        navigation: true,
    });

    $('img').on('click', function() {
        $('#mosaic').fadeOut();
        $('#multiscroll-nav, #multiscroll, .icon').fadeIn();

        // ADDED THIS >>>
        var clicked_img = this;
        var count = $('#multiscroll').find('img').length;
        var half = Math.ceil( count/2 );

        $('#multiscroll').find('img').each(function(i,e) {
            if( e.src == clicked_img.src ) {
                var to;
                if( (i+1) <= half ) {
                   to = (i*2) +1;
                } else {
                    // to = ((i+1)-half) *2; BUGFIX
                    to = (half -(i-count%2)) *2;
                }
                console.log(to);

                ms.multiscroll.moveTo(to);
            }
        });
        // <<<

    });
    $('.icon').on('click', function() {
        $('#mosaic').fadeIn();
        $('#multiscroll-nav, #multiscroll, .icon').fadeOut();
    });
});

.icon {
    z-index: 9999;
    height: 15vh;
    width: 15vh;
    background-color: red;
    position: absolute;
    top: 1em;
    right: 1em;
    display: none;
}

<ul id="mosaic" class="uk-grid-small uk-child-width-1-4@m uk-child-width-1-3@s uk-child-width-1-2" uk-grid>
    <li>
        <a href="#">
		<img src="https://picsum.photos/300/300" alt="" />
	</a>
    </li>
    <li>
        <a href="#">
		<img src="https://loremflickr.com/300/300/dog" alt="" />
	</a>
    </li>
    <li>
        <a href="#">
		<img src="https://loremflickr.com/300/300/paris" alt="" />
	</a>
    </li>
</ul>

<div id="multiscroll">
    <span class="icon"></span>
    <div class="ms-left">
        <div class="ms-section">
            <img src="https://picsum.photos/300/300" alt="" />
        </div>

        <div class="ms-section">
            <h1>DOG</h1>
        </div>

        <div class="ms-section">
            <img src="https://loremflickr.com/300/300/paris" alt="" />
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section">
            <h1>BEACH</h1>
        </div>

        <div class="ms-section">
            <img src="https://loremflickr.com/300/300/dog" alt="" />
        </div>

        <div class="ms-section">
            <h1>PARIS</h1>
        </div>
    </div>
</div>



















<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.1/jquery.multiscroll.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.1/jquery.multiscroll.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit.min.js"></script>