Ответы пользователя по тегу HTML
  • Возможна ли реализация в fancybox 3 "Customized layout" (как в примере на сайте) из коробки?

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

    Ответ написан
    Комментировать