Is it possible to implement in fancybox 3 "Customized layout" (as in the example on the site) out of the box?

Question

css

I recently came across fancybox 3, which really liked the implementation of modal windows, animation and customization options, in addition to the gallery itself. I planned to do the same as in the Example at the office. site, but I didn’t find anything like this in the documentation (Is it possible to do this out of the box or do I need to write all the styles from scratch?

Answer 1

The salvation of the drowning is the work of the drowning themselves! =)
Spared a page with an example:

JS

$('a[data-fancybox="cl-group"]').fancybox({

    baseClass : 'fancybox-custom-layout',
        margin    : 0,
    infobar   : false,
        thumbs    : {
            hideOnClosing : false
        },
        touch : {
            vertical : 'auto'
        },
        closeClickOutside : false,
        // Customize caption area - append an ad to the bottom
        caption : function( instance ) {

            var ad = '<div class="ad"><p><a href="//fancyapps.com/fancybox/">fancyBox3</a> - touch enabled, responsive and fully customizable lightbox script</p></div>';

            return ad + ( $(this).data('caption') || '' );

        }
});

css

.ad {
  display: none;
}

@media all and (min-width: 800px) {

  .fancybox-custom-layout {
    border: 20px solid #c7bfbf;
  }

  .fancybox-custom-layout .fancybox-bg,
  .fancybox-custom-layout.fancybox-container--ready .fancybox-bg {
    background: #efefef;
    opacity: 1;
  }

  .fancybox-custom-layout .fancybox-controls {
    opacity: 1;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: 44px;
    background: #5E4950;
  }

  .fancybox-custom-layout .fancybox-button {
    background: transparent;
  }

  .fancybox-custom-layout .fancybox-buttons button:hover {
    background: rgba(20, 20, 20, 0.4);
  }

  .fancybox-custom-layout .fancybox-caption-wrap {
    top: 0;
    right: 44px;
    bottom: 0;
    left: auto;
    width: 250px;
    padding: 0;
    box-shadow: none;
    background: #FF6666;
    font-weight: bold;

    /* Disable transitions */
    opacity: 1;
    visibility: visible;
    -webkit-transition: none;
       -moz-transition: none;
            transition: none;
  }

  .fancybox-custom-layout .fancybox-caption {
    border: 0;
    padding: 50px 15px;
    color: #fff;
  }

  .fancybox-custom-layout .fancybox-slider-wrap {
    right: 294px;
  }

  .fancybox-custom-layout.fancybox-container--thumbs .fancybox-controls {
    right: 220px;
  }

  .fancybox-custom-layout.fancybox-container--thumbs .fancybox-slider-wrap {
    right: 514px;
  }

  .fancybox-custom-layout.fancybox-container--thumbs .fancybox-caption-wrap {
    right: 264px;
  }

  .fancybox-custom-layout .fancybox-thumbs {
    top: 0;
    bottom: 0;
    background: #c7bfbf;
  }

  .fancybox-custom-layout .fancybox-thumbs > ul > li {
    border-color: #c7bfbf;
  }