coollogin
@coollogin
www.houseofcool.ru

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

Недавно наткнулся на fancybox 3, в которой очень понравилась реализация модальных окон, анимация и возможности кастомизации, помимо самой галереи. Планировал сделать также, как в Примере на оф. сайте, но в документации ничего подобного не нашел ( Возможно ли это сделать из коробки или нужно все стили писать с нуля?
  • Вопрос задан
  • 1817 просмотров
Решения вопроса 1
coollogin
@coollogin Автор вопроса
www.houseofcool.ru
Спасение утопающих - дело рук самих утопающих! =)
Спарсил страницу с примером:
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;
	}

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 13:31
10000 руб./за проект
19 апр. 2024, в 13:12
35000 руб./за проект
19 апр. 2024, в 13:06
6000 руб./за проект