101 lines
2.4 KiB
PHP
101 lines
2.4 KiB
PHP
<style type="text/css">
|
|
.banner-thumb-wrap {
|
|
display: inline-block;
|
|
}
|
|
|
|
.banner-thumb-image {
|
|
width: 72px;
|
|
height: 42px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.banner-thumb-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: min(70vw, 760px);
|
|
max-height: 80vh;
|
|
padding: 6px;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
|
|
z-index: 3000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity .1s ease;
|
|
}
|
|
|
|
.banner-thumb-popup.is-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.banner-thumb-popup img {
|
|
display: block;
|
|
width: 100%;
|
|
max-height: calc(80vh - 12px);
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
(function($) {
|
|
if (!$) {
|
|
return;
|
|
}
|
|
|
|
$('.banner-thumb-popup').remove();
|
|
var $popup = $('<div class="banner-thumb-popup" aria-hidden="true"><img src="" alt=""></div>');
|
|
var $popupImage = $popup.find('img');
|
|
$('body').append($popup);
|
|
|
|
function positionPopup(event) {
|
|
var offset = 18;
|
|
var viewportWidth = $(window).width();
|
|
var viewportHeight = $(window).height();
|
|
var popupWidth = $popup.outerWidth();
|
|
var popupHeight = $popup.outerHeight();
|
|
var left = (event.clientX || 0) + offset;
|
|
var top = (event.clientY || 0) + offset;
|
|
|
|
if (left + popupWidth + 12 > viewportWidth) {
|
|
left = Math.max(12, (event.clientX || 0) - popupWidth - offset);
|
|
}
|
|
|
|
if (top + popupHeight + 12 > viewportHeight) {
|
|
top = Math.max(12, viewportHeight - popupHeight - 12);
|
|
}
|
|
|
|
$popup.css({ left: left + 'px', top: top + 'px' });
|
|
}
|
|
|
|
$(document).off('.bannerThumbPopup');
|
|
|
|
$(document).on('mouseenter.bannerThumbPopup', '.js-banner-thumb-preview', function(event) {
|
|
var src = $(this).data('previewSrc');
|
|
if (!src) {
|
|
return;
|
|
}
|
|
|
|
$popupImage.attr('src', String(src));
|
|
$popup.addClass('is-visible');
|
|
positionPopup(event);
|
|
});
|
|
|
|
$(document).on('mousemove.bannerThumbPopup', '.js-banner-thumb-preview', function(event) {
|
|
if ($popup.hasClass('is-visible')) {
|
|
positionPopup(event);
|
|
}
|
|
});
|
|
|
|
$(document).on('mouseleave.bannerThumbPopup', '.js-banner-thumb-preview', function() {
|
|
$popup.removeClass('is-visible');
|
|
$popupImage.attr('src', '');
|
|
});
|
|
})(window.jQuery);
|
|
</script>
|