迅睿CMS實現(xiàn)點擊圖片彈窗放大瀏覽的方法非常簡單，新手小白都可以實現(xiàn)。
方法一、CMS內(nèi)置方法實現(xiàn)
第一步：
模板中引用系統(tǒng)JS函數(shù)類文件
<script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>
第二步：開始調(diào)用
調(diào)用方法：
<a href="javascript:dr_preview_image('圖片地址')">
點擊彈窗查看圖片
</a>示例1：列表循環(huán)中實現(xiàn)
{module catid=$catid order=updatetime page=1}
<li class="col-3">
<a title="{$t.title}" href="javascript:dr_preview_image('{dr_thumb($t.thumb, 800, 600)}')">
<img src="{dr_thumb($t.thumb, 100, 90)}">
</a>
</li>
{/module}就這么簡單，已經(jīng)實現(xiàn)了
效果如下：
但它有個缺點：
彈窗大小是固定的，點擊空白區(qū)域無法關(guān)閉，而且會顯示圖片URL地址，因為這個內(nèi)置方法主要用于后臺的圖片查看。
方法二：自定義方法
1、在模板中添加這段JS：
看不懂沒關(guān)系，直接復(fù)制使用即可：
<script>
// 顯示圖片 彈窗 tanchuang
function dr_popup_image(file, w, h) {
var width = w+'px';
var height = h+'px';
// console.log('width:'+width);
// console.log('height:'+height);
if (is_mobile_cms == 1) {
width = height = '80%';
}
top.layer.alert('<p style="text-align: center"><a href="'+file+'" target="_blank"><img style="max-width:100%" src="'+file+'?'+Date.parse(new Date())+'"></a></p>', {
// shade: 0,
//scrollbar: false,
shadeClose: true,
title: '',
area: [width, height],
btn: []
});
}
</script>2、調(diào)用方法：
<a href="javascript:dr_popup_image('圖片地址',寬度,高度)">
點擊彈窗查看圖片
</a>示例1：
<a title="{$t.title}" href="javascript:dr_popup_image('{dr_thumb($t.thumb, 600, 600)}',800,600)">
點我放大查看圖片
</a>完整示例2：
列表循環(huán)中：
{module catid=$catid order=updatetime page=1}
<li class="col-3">
<a title="{$t.title}" href="javascript:dr_popup_image('{dr_thumb($t.thumb, 600, 600)}',800,600)">
<img src="{dr_thumb($t.thumb, 100, 90)}" width="100" height="90" style="margin-top: 15px;">
</a>
</li>
{/module}
<script>
// 顯示圖片 彈窗 tanchuang
function dr_popup_image(file, w, h) {
var width = w+'px';
var height = h+'px';
// console.log('width:'+width);
// console.log('height:'+height);
if (is_mobile_cms == 1) {
width = height = '80%';
}
top.layer.alert('<p style="text-align: center"><a href="'+file+'" target="_blank"><img style="max-width:100%" src="'+file+'?'+Date.parse(new Date())+'"></a></p>', {
// shade: 0,
//scrollbar: false,
shadeClose: true,
title: '',
area: [width, height],
btn: []
});
}
</script>效果如下：
歡樂時刻：
兩種一起用看看效果：
<ul>
{module catid=$catid order=updatetime page=1}
<li class="col-3">
<a title="{$t.title}" href="javascript:dr_preview_image('{dr_thumb($t.thumb, 800, 600)}')">
<img src="{dr_thumb($t.thumb, 100, 90)}" width="100" height="90" style="margin-top: 15px;">
</a>
</li>
<li class="col-3">
<a title="{$t.title}" href="javascript:dr_popup_image('{dr_thumb($t.thumb, 600, 600)}',800,600)">
<img src="{dr_thumb($t.thumb, 100, 90)}" width="100" height="90" style="margin-top: 15px;">
</a>
</li>
{/module}
</ul>
<script>
// 顯示圖片 彈窗 tanchuang
function dr_popup_image(file, w, h) {
var width = w+'px';
var height = h+'px';
// console.log('width:'+width);
// console.log('height:'+height);
if (is_mobile_cms == 1) {
width = height = '80%';
}
top.layer.alert('<p style="text-align: center"><a href="'+file+'" target="_blank"><img style="max-width:100%" src="'+file+'?'+Date.parse(new Date())+'"></a></p>', {
// shade: 0,
//scrollbar: false,
shadeClose: true,
title: '',
area: [width, height],
btn: []
});
}
</script>