实现图像预览功能
This commit is contained in:
parent
64ababe4f5
commit
7ce08c954a
@ -10,4 +10,7 @@ class ViewerJsAsset extends AssetBundle
|
|||||||
public $js = [
|
public $js = [
|
||||||
'viewer.min.js',
|
'viewer.min.js',
|
||||||
];
|
];
|
||||||
|
public $css = [
|
||||||
|
'viewer.min.css'
|
||||||
|
];
|
||||||
}
|
}
|
@ -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']) ?>
|
||||||
|
@ -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();
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user