multiscroll.js from gallery

Question

Hello all,

I need a small help please!

Using multiscroll.js plugin (https://github.com/alvarotrigo/multiscroll.js), I'd like to target the img clicked in order to open the right sections.

There's an option to open a specific section, just add class 'active' on ms-section. (maybe a way?)

Notice that I don't want to use anchors option.

I have no idea how to do that...

Just open the 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

Thank you.

Answer 1

You need to identify the images anyhow to know where to jump. I took the src attribute to accomplish this. Because of this weird up and down movement a translation of the actual position had to be done. See code. (Marked the added content)

$(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>