Next Previous with Inline Content

[flatulent]

Great Work, Just wondering if it is possible to have the next and previous links for inline content sharing the same "rel=same" at the moment this will only work with images. It would be fantastic if I could use this for inline content. For example I may have a gallery of staff member thumbnails and clicking on one views their profile as inline content, and I would like to go to the next profile (in the same group) without closing the window. Any ideas? I have limited js abilities.

[danhumaan]

hey @flatulent, it's certainly something that has been discussed in house, though we haven't set a target to address this as an enhancement just yet.

To share a bit more though, we've encountered almost the exact same scenario you described (profiles, with modal bio and next/prev movements) in our own client work, and our solution has been to use a single instance of Modaal, with a carousel inside it (such as Slick). We then use the relevant callbacks in Modaal on the carousel to init after open or destroy after close. You could try something similar to achieve the same result.

[danb-humaan]

Further to what @danhumaan said, here's an example using Slick:

// Set our slide index var initial value to 0.
var teamMemberSlideIndex = 0;

$('.team-modal').modaal({
    // Other Modaal config goes here...
    before_open: function(event) {
        var $clicked = $(event.currentTarget);

        // Use Number.parseInt if using ES2015.
        teamMemberSlideIndex = parseInt($clicked.attr('data-slide'), 10);
    },
    after_open: function() {
        $('.modaal-container .team-modal-slider').slick({
            // Slick config goes here...
        });

        $('.modaal-container .team-modal-slider').slick('slickGoTo', teamMemberSlideIndex, false );
    },
    before_close: function() {
        // Destroy Slick as we close.
        $('.modaal-container .team-modal-slider.slick-initialized').slick('unslick');
    }
});

And on a repeated list of anchors, we have a data attribute called data-slide with the index of the slide we want.

<a href="#team-modal" class="team-modal" data-slide="0">first item</a>
<a href="#team-modal" class="team-modal" data-slide="1">second item</a>
<a href="#team-modal" class="team-modal" data-slide="2">third item</a>
<!-- etc... -->

You can check out this site to see a demo of the above code.

[flatulent]

I really appreciate your speedy response and (comprehensive) implementation suggestions. By the way I have checked out your body of work. High quality design and implementation, great typography and attention to detail. Very impressed!!!