Возможна ли реализация в fancybox 3 «Customized layout» (как в примере на сайте) из коробки?

Question

[Сергей Кулагин]

Недавно наткнулся на fancybox 3, в которой очень понравилась реализация модальных окон, анимация и возможности кастомизации, помимо самой галереи. Планировал сделать также, как в Примере на оф. сайте, но в документации ничего подобного не нашел ( Возможно ли это сделать из коробки или нужно все стили писать с нуля?

Comments

[SlimSavernake]

решили вопрос?

[Сергей Кулагин]

SlimSavernake: К сожалению нет ( Вроде и вопрос простой, но никто не отвечает.

[Сергей Кулагин]

SlimSavernake: Расписал в ответе js и css код.

Answer 1

[Сергей Кулагин]

Спасение утопающих - дело рук самих утопающих! =)
Спарсил страницу с примером:

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;
	}