$('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') || '' );
}
});
.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;
}