A Pen by Kentaro Fujiy on CodePen.
Last active
November 3, 2019 22:54
-
-
Save kentarofujiy/1aa453aaeff3043055d12dc8d9f78bbd to your computer and use it in GitHub Desktop.
owl-pop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="owl-carousel owl-theme"> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
<div> | |
<a class="image-popup-vertical-fit" href="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" title="This image fits only horizontally."> | |
<img src="https://images.unsplash.com/photo-1567816632324-6c5e972d33e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /> | |
</a> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
$('.owl-carousel').owlCarousel({ | |
items: 3 | |
}); | |
$('.image-popup-vertical-fit').magnificPopup({ | |
type: 'image', | |
closeOnContentClick: true, | |
mainClass: 'mfp-img-mobile', | |
image: { | |
verticalFit: true | |
} | |
}); | |
$('.image-popup-fit-width').magnificPopup({ | |
type: 'image', | |
closeOnContentClick: true, | |
image: { | |
verticalFit: false | |
} | |
}); | |
$('.image-popup-no-margins').magnificPopup({ | |
type: 'image', | |
closeOnContentClick: true, | |
closeBtnInside: false, | |
fixedContentPos: true, | |
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side | |
image: { | |
verticalFit: true | |
}, | |
zoom: { | |
enabled: true, | |
duration: 300 // don't foget to change the duration also in CSS | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Owl Carousel v2.3.4 | |
* Copyright 2013-2018 David Deutsch | |
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE | |
*/ | |
/* | |
* Owl Carousel - Core | |
*/ | |
.owl-carousel { | |
display: none; | |
width: 100%; | |
-webkit-tap-highlight-color: transparent; | |
/* position relative and z-index fix webkit rendering fonts issue */ | |
position: relative; | |
z-index: 1; } | |
.owl-carousel .owl-stage { | |
position: relative; | |
-ms-touch-action: pan-Y; | |
touch-action: manipulation; | |
-moz-backface-visibility: hidden; | |
/* fix firefox animation glitch */ } | |
.owl-carousel .owl-stage:after { | |
content: "."; | |
display: block; | |
clear: both; | |
visibility: hidden; | |
line-height: 0; | |
height: 0; } | |
.owl-carousel .owl-stage-outer { | |
position: relative; | |
overflow: hidden; | |
/* fix for flashing background */ | |
-webkit-transform: translate3d(0px, 0px, 0px); } | |
.owl-carousel .owl-wrapper, | |
.owl-carousel .owl-item { | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
-ms-backface-visibility: hidden; | |
-webkit-transform: translate3d(0, 0, 0); | |
-moz-transform: translate3d(0, 0, 0); | |
-ms-transform: translate3d(0, 0, 0); } | |
.owl-carousel .owl-item { | |
position: relative; | |
min-height: 1px; | |
float: left; | |
-webkit-backface-visibility: hidden; | |
-webkit-tap-highlight-color: transparent; | |
-webkit-touch-callout: none; } | |
.owl-carousel .owl-item img { | |
display: block; | |
width: 100%; } | |
.owl-carousel .owl-nav.disabled, | |
.owl-carousel .owl-dots.disabled { | |
display: none; } | |
.owl-carousel .owl-nav .owl-prev, | |
.owl-carousel .owl-nav .owl-next, | |
.owl-carousel .owl-dot { | |
cursor: pointer; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; } | |
.owl-carousel .owl-nav button.owl-prev, | |
.owl-carousel .owl-nav button.owl-next, | |
.owl-carousel button.owl-dot { | |
background: none; | |
color: inherit; | |
border: none; | |
padding: 0 !important; | |
font: inherit; } | |
.owl-carousel.owl-loaded { | |
display: block; } | |
.owl-carousel.owl-loading { | |
opacity: 0; | |
display: block; } | |
.owl-carousel.owl-hidden { | |
opacity: 0; } | |
.owl-carousel.owl-refresh .owl-item { | |
visibility: hidden; } | |
.owl-carousel.owl-drag .owl-item { | |
-ms-touch-action: pan-y; | |
touch-action: pan-y; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; } | |
.owl-carousel.owl-grab { | |
cursor: move; | |
cursor: grab; } | |
.owl-carousel.owl-rtl { | |
direction: rtl; } | |
.owl-carousel.owl-rtl .owl-item { | |
float: right; } | |
/* No Js */ | |
.no-js .owl-carousel { | |
display: block; } | |
/* | |
* Owl Carousel - Animate Plugin | |
*/ | |
.owl-carousel .animated { | |
animation-duration: 1000ms; | |
animation-fill-mode: both; } | |
.owl-carousel .owl-animated-in { | |
z-index: 0; } | |
.owl-carousel .owl-animated-out { | |
z-index: 1; } | |
.owl-carousel .fadeOut { | |
animation-name: fadeOut; } | |
@keyframes fadeOut { | |
0% { | |
opacity: 1; } | |
100% { | |
opacity: 0; } } | |
/* | |
* Owl Carousel - Auto Height Plugin | |
*/ | |
.owl-height { | |
transition: height 500ms ease-in-out; } | |
/* | |
* Owl Carousel - Lazy Load Plugin | |
*/ | |
.owl-carousel .owl-item { | |
/** | |
This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong | |
calculation of the height of the owl-item that breaks page layouts | |
*/ } | |
.owl-carousel .owl-item .owl-lazy { | |
opacity: 0; | |
transition: opacity 400ms ease; } | |
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { | |
max-height: 0; } | |
.owl-carousel .owl-item img.owl-lazy { | |
transform-style: preserve-3d; } | |
/* | |
* Owl Carousel - Video Plugin | |
*/ | |
.owl-carousel .owl-video-wrapper { | |
position: relative; | |
height: 100%; | |
background: #000; } | |
.owl-carousel .owl-video-play-icon { | |
position: absolute; | |
height: 80px; | |
width: 80px; | |
left: 50%; | |
top: 50%; | |
margin-left: -40px; | |
margin-top: -40px; | |
background: url("owl.video.play.png") no-repeat; | |
cursor: pointer; | |
z-index: 1; | |
-webkit-backface-visibility: hidden; | |
transition: transform 100ms ease; } | |
.owl-carousel .owl-video-play-icon:hover { | |
-ms-transform: scale(1.3, 1.3); | |
transform: scale(1.3, 1.3); } | |
.owl-carousel .owl-video-playing .owl-video-tn, | |
.owl-carousel .owl-video-playing .owl-video-play-icon { | |
display: none; } | |
.owl-carousel .owl-video-tn { | |
opacity: 0; | |
height: 100%; | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
transition: opacity 400ms ease; } | |
.owl-carousel .owl-video-frame { | |
position: relative; | |
z-index: 1; | |
height: 100%; | |
width: 100%; } | |
/* Magnific Popup CSS */ | |
.mfp-bg { | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 1042; | |
overflow: hidden; | |
position: fixed; | |
background: #0b0b0b; | |
opacity: 0.8; } | |
.mfp-wrap { | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 1043; | |
position: fixed; | |
outline: none !important; | |
-webkit-backface-visibility: hidden; } | |
.mfp-container { | |
text-align: center; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
padding: 0 8px; | |
box-sizing: border-box; } | |
.mfp-container:before { | |
content: ''; | |
display: inline-block; | |
height: 100%; | |
vertical-align: middle; } | |
.mfp-align-top .mfp-container:before { | |
display: none; } | |
.mfp-content { | |
position: relative; | |
display: inline-block; | |
vertical-align: middle; | |
margin: 0 auto; | |
text-align: left; | |
z-index: 1045; } | |
.mfp-inline-holder .mfp-content, | |
.mfp-ajax-holder .mfp-content { | |
width: 100%; | |
cursor: auto; } | |
.mfp-ajax-cur { | |
cursor: progress; } | |
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { | |
cursor: -moz-zoom-out; | |
cursor: -webkit-zoom-out; | |
cursor: zoom-out; } | |
.mfp-zoom { | |
cursor: pointer; | |
cursor: -webkit-zoom-in; | |
cursor: -moz-zoom-in; | |
cursor: zoom-in; } | |
.mfp-auto-cursor .mfp-content { | |
cursor: auto; } | |
.mfp-close, | |
.mfp-arrow, | |
.mfp-preloader, | |
.mfp-counter { | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
user-select: none; } | |
.mfp-loading.mfp-figure { | |
display: none; } | |
.mfp-hide { | |
display: none !important; } | |
.mfp-preloader { | |
color: #CCC; | |
position: absolute; | |
top: 50%; | |
width: auto; | |
text-align: center; | |
margin-top: -0.8em; | |
left: 8px; | |
right: 8px; | |
z-index: 1044; } | |
.mfp-preloader a { | |
color: #CCC; } | |
.mfp-preloader a:hover { | |
color: #FFF; } | |
.mfp-s-ready .mfp-preloader { | |
display: none; } | |
.mfp-s-error .mfp-content { | |
display: none; } | |
button.mfp-close, | |
button.mfp-arrow { | |
overflow: visible; | |
cursor: pointer; | |
background: transparent; | |
border: 0; | |
-webkit-appearance: none; | |
display: block; | |
outline: none; | |
padding: 0; | |
z-index: 1046; | |
box-shadow: none; | |
touch-action: manipulation; } | |
button::-moz-focus-inner { | |
padding: 0; | |
border: 0; } | |
.mfp-close { | |
width: 44px; | |
height: 44px; | |
line-height: 44px; | |
position: absolute; | |
right: 0; | |
top: 0; | |
text-decoration: none; | |
text-align: center; | |
opacity: 0.65; | |
padding: 0 0 18px 10px; | |
color: #FFF; | |
font-style: normal; | |
font-size: 28px; | |
font-family: Arial, Baskerville, monospace; } | |
.mfp-close:hover, | |
.mfp-close:focus { | |
opacity: 1; } | |
.mfp-close:active { | |
top: 1px; } | |
.mfp-close-btn-in .mfp-close { | |
color: #333; } | |
.mfp-image-holder .mfp-close, | |
.mfp-iframe-holder .mfp-close { | |
color: #FFF; | |
right: -6px; | |
text-align: right; | |
padding-right: 6px; | |
width: 100%; } | |
.mfp-counter { | |
position: absolute; | |
top: 0; | |
right: 0; | |
color: #CCC; | |
font-size: 12px; | |
line-height: 18px; | |
white-space: nowrap; } | |
.mfp-arrow { | |
position: absolute; | |
opacity: 0.65; | |
margin: 0; | |
top: 50%; | |
margin-top: -55px; | |
padding: 0; | |
width: 90px; | |
height: 110px; | |
-webkit-tap-highlight-color: transparent; } | |
.mfp-arrow:active { | |
margin-top: -54px; } | |
.mfp-arrow:hover, | |
.mfp-arrow:focus { | |
opacity: 1; } | |
.mfp-arrow:before, | |
.mfp-arrow:after { | |
content: ''; | |
display: block; | |
width: 0; | |
height: 0; | |
position: absolute; | |
left: 0; | |
top: 0; | |
margin-top: 35px; | |
margin-left: 35px; | |
border: medium inset transparent; } | |
.mfp-arrow:after { | |
border-top-width: 13px; | |
border-bottom-width: 13px; | |
top: 8px; } | |
.mfp-arrow:before { | |
border-top-width: 21px; | |
border-bottom-width: 21px; | |
opacity: 0.7; } | |
.mfp-arrow-left { | |
left: 0; } | |
.mfp-arrow-left:after { | |
border-right: 17px solid #FFF; | |
margin-left: 31px; } | |
.mfp-arrow-left:before { | |
margin-left: 25px; | |
border-right: 27px solid #3F3F3F; } | |
.mfp-arrow-right { | |
right: 0; } | |
.mfp-arrow-right:after { | |
border-left: 17px solid #FFF; | |
margin-left: 39px; } | |
.mfp-arrow-right:before { | |
border-left: 27px solid #3F3F3F; } | |
.mfp-iframe-holder { | |
padding-top: 40px; | |
padding-bottom: 40px; } | |
.mfp-iframe-holder .mfp-content { | |
line-height: 0; | |
width: 100%; | |
max-width: 900px; } | |
.mfp-iframe-holder .mfp-close { | |
top: -40px; } | |
.mfp-iframe-scaler { | |
width: 100%; | |
height: 0; | |
overflow: hidden; | |
padding-top: 56.25%; } | |
.mfp-iframe-scaler iframe { | |
position: absolute; | |
display: block; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |
background: #000; } | |
/* Main image in popup */ | |
img.mfp-img { | |
width: auto; | |
max-width: 100%; | |
height: auto; | |
display: block; | |
line-height: 0; | |
box-sizing: border-box; | |
padding: 40px 0 40px; | |
margin: 0 auto; } | |
/* The shadow behind the image */ | |
.mfp-figure { | |
line-height: 0; } | |
.mfp-figure:after { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 40px; | |
bottom: 40px; | |
display: block; | |
right: 0; | |
width: auto; | |
height: auto; | |
z-index: -1; | |
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |
background: #444; } | |
.mfp-figure small { | |
color: #BDBDBD; | |
display: block; | |
font-size: 12px; | |
line-height: 14px; } | |
.mfp-figure figure { | |
margin: 0; } | |
.mfp-bottom-bar { | |
margin-top: -36px; | |
position: absolute; | |
top: 100%; | |
left: 0; | |
width: 100%; | |
cursor: auto; } | |
.mfp-title { | |
text-align: left; | |
line-height: 18px; | |
color: #F3F3F3; | |
word-wrap: break-word; | |
padding-right: 36px; } | |
.mfp-image-holder .mfp-content { | |
max-width: 100%; } | |
.mfp-gallery .mfp-image-holder .mfp-figure { | |
cursor: pointer; } | |
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { | |
/** | |
* Remove all paddings around the image on small screen | |
*/ | |
.mfp-img-mobile .mfp-image-holder { | |
padding-left: 0; | |
padding-right: 0; } | |
.mfp-img-mobile img.mfp-img { | |
padding: 0; } | |
.mfp-img-mobile .mfp-figure:after { | |
top: 0; | |
bottom: 0; } | |
.mfp-img-mobile .mfp-figure small { | |
display: inline; | |
margin-left: 5px; } | |
.mfp-img-mobile .mfp-bottom-bar { | |
background: rgba(0, 0, 0, 0.6); | |
bottom: 0; | |
margin: 0; | |
top: auto; | |
padding: 3px 5px; | |
position: fixed; | |
box-sizing: border-box; } | |
.mfp-img-mobile .mfp-bottom-bar:empty { | |
padding: 0; } | |
.mfp-img-mobile .mfp-counter { | |
right: 5px; | |
top: 3px; } | |
.mfp-img-mobile .mfp-close { | |
top: 0; | |
right: 0; | |
width: 35px; | |
height: 35px; | |
line-height: 35px; | |
background: rgba(0, 0, 0, 0.6); | |
position: fixed; | |
text-align: center; | |
padding: 0; } } | |
@media all and (max-width: 900px) { | |
.mfp-arrow { | |
-webkit-transform: scale(0.75); | |
transform: scale(0.75); } | |
.mfp-arrow-left { | |
-webkit-transform-origin: 0; | |
transform-origin: 0; } | |
.mfp-arrow-right { | |
-webkit-transform-origin: 100%; | |
transform-origin: 100%; } | |
.mfp-container { | |
padding-left: 6px; | |
padding-right: 6px; } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment