实现图像预览功能

This commit is contained in:
Chenx221 2024-02-19 11:30:30 +08:00
parent 64ababe4f5
commit 7ce08c954a
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
3 changed files with 40 additions and 6 deletions

View File

@ -10,4 +10,7 @@ class ViewerJsAsset extends AssetBundle
public $js = [ public $js = [
'viewer.min.js', 'viewer.min.js',
]; ];
public $css = [
'viewer.min.css'
];
} }

View File

@ -97,7 +97,7 @@ $this->registerCssFile('@web/css/home_style.css');
<?php endif; ?> <?php endif; ?>
</ol> </ol>
</nav> </nav>
<img id="hidden-image" style="display: none;" alt="" src="" loading=lazy>
<table class="table table-hover" id="drop-area"> <table class="table table-hover" id="drop-area">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
@ -140,7 +140,12 @@ $this->registerCssFile('@web/css/home_style.css');
<?php else: ?> <!-- 如果是文件 --> <?php else: ?> <!-- 如果是文件 -->
<td> <td>
<?= Html::tag('i', '', ['class' => $item['type'] . ' file_icon']) ?> <?= Html::tag('i', '', ['class' => $item['type'] . ' file_icon']) ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?> <?php if ($item['type'] === 'fa-regular fa-file-image'): ?>
<!-- 如果是图像文件,添加一个点击事件来预览图像 -->
<?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
<?php else: ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
<?php endif; ?>
</td> </td>
<td class="file_info"> <td class="file_info">
<?= date('Y-m-d H:i:s', $item['lastModified']) ?> <?= date('Y-m-d H:i:s', $item['lastModified']) ?>

View File

@ -391,8 +391,34 @@ function updateButtons() {
$('.batch-delete-btn').toggle(count >= 1); $('.batch-delete-btn').toggle(count >= 1);
} }
// 在页面加载时调用updateButtons函数
$(document).ready(updateButtons);
// 当checkbox的状态改变时调用updateButtons函数 // 当checkbox的状态改变时调用updateButtons函数
$(document).on('change', '.select-item', updateButtons); $(document).on('change', '.select-item', updateButtons);
$(document).ready(function() {
updateButtons();
});
// image preview
function previewImage(element, event) {
event.preventDefault(); // 阻止默认的点击事件
var hiddenImage = document.getElementById('hidden-image');
hiddenImage.src = element.href; // 设置图像的URL
// 创建一个新的 Viewer.js 实例
var viewer = new Viewer(hiddenImage, {
toolbar: {
zoomIn: 1,
zoomOut: 1,
oneToOne: 1,
reset: 1,
rotateLeft: 1,
rotateRight: 1,
flipHorizontal: 1,
flipVertical: 1,
},
hidden: function() {
viewer.destroy();
}
});
viewer.show();
}