Initialize a Desktop & Mobile slider based on device + Detectizr class. Also link the Desktop slider to jQuery Slick, so they scroll together. Finally embed Slick internal content to Fancybox if specified through data attribute

gistfile1.js

// Initialize two different lightbox plugins based on the device where we are
$( '.desktop .lightbox' )
.fancybox({
    loop: false,
    minWidth: 400,
    maxWidth: 600,
    beforeShow: function() {
        var $this = $(this.element),
            iframe = $.fancybox.inner.find('iframe'),
            src = iframe.attr('src'),
            id = iframe.attr('id');
        if (iframe.length && src.indexOf('youtube') > -1) {
            var match = src.match( /((?:www\.)?youtube\.com|(?:www\.)?youtube-nocookie\.com|(?:www\.)?youtu\.be)\/(?:watch\?v=)?([a-zA-Z0-9\-_]+)/ );
            if ( match[1] == 'youtu.be' ) match[1] = 'youtube.com';
           
            $
            .fancybox
            .inner
            .addClass('fancybox-video');
            
            iframe
            .removeClass()
            .addClass('embed-responsive-item')
            .attr('src', '//' + match[1] + '/embed/' + match[2] + '?enablejsapi=1&wmode=opaque')
            .wrap(
              $('<div>', {
                'class' : 'embed-responsive embed-responsive-16by9'
              })
            );

            new YT.Player(id, {
                events: {
                    onReady: function(e) {
                        e.target.playVideo()
                    },
                    onStateChange: function(e) {
                        0 === e.data && $.fancybox.next()
                    }
                }
            })
        }
        
        if ( $.fancybox.inner.closest('.fancybox-wrap').hasClass('fancybox-type-inline') )
            $.fancybox.inner.children().removeClass('hidden');
        
        // If we have some meta content after the image to be appended, do it
        var nextMetaContent = $this.next('[data-append-to-lightbox]');
        if ( nextMetaContent.length )
          $.fancybox.inner.append( nextMetaContent.clone() )
    },
    afterLoad: function ( current, previous ) {
        var $this = current.element,
            slideElement = $this.closest('.slick-slide'), // If this exists than we can continue with other stuff
            slideIndex = ( slideElement && slideElement.length ? slideElement.data('slick-index') : undefined ),
            slickElement = ( slideIndex !== undefined ? $this.closest( '.slick-slider' ) : undefined );

        // Change page here
        if ( slickElement !== undefined && slideIndex !== undefined )
          slickElement.slick( 'slickGoTo', slideIndex );
    }
});

$( '.mobile .lightbox, .tablet .lightbox' )
.swipebox({
    hideBarsDelay: false,
    autoplayVideos: true,
    removeBarsOnMobile: false,
    hideCloseButtonOnMobile : false,
    toggleClassOnLoad: 'hidden'
})