无插件实现图片灯箱效果

兜兜转转,又回到原点。由于当前所用主题没有图片灯箱预览,试用了某插件,感觉总是差那么点意思,就翻出来几年前的一段记录,这一试竟还有效,于是再记录于此以备后有所需。废话少说,直接上步骤:

在header.php中增加一个css样式

 <link rel="stylesheet" href="<?php $this->options->themeUrl('js/jquery.fancybox.min.css'); ?>">

在footer.php中增加如下代码

<script src="<?php $this->options->themeUrl('js/jquery.min.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('js/jquery.lazyload.min.js'); ?>"></script>
    <script>
        setTimeout(function() {
            $("img").lazyload({
                effect: "fadeIn",
                threshold: 100,
                failurelimit: 2
            });
        },
        100);
    </script>
    <script src="<?php $this->options->themeUrl('js/jquery.fancybox.min.js'); ?>"></script>
    <script>
        $('[data-fancybox="gallery"]').fancybox({
            buttons: ["zoom", "slideShow", "fullScreen", "thumbs", "close"],
            lang: "cn",
            i18n: {
                cn: {
                    CLOSE: "关闭",
                    NEXT: "下一张",
                    PREV: "上一张",
                    ERROR: "无法加载图片! <br/> 请稍后再试……",
                    PLAY_START: "开始预览",
                    PLAY_STOP: "停止预览",
                    FULL_SCREEN: "全屏",
                    THUMBS: "缩略图",
                    DOWNLOAD: "下载",
                    SHARE: "分享",
                    ZOOM: "放大"
                }
            },
            slideShow: {
                autoStart: false,
                speed: 3000
            },
        });
    </script>

最后添加一个图片超链接,完成

找到文件var/Utils/HyperDown.php
将以下内容

<img src=\"{$this->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">

替换为

<a href=\"{$this->_definitions[$matches[2]]}\" data-fancybox=\"gallery\"><img src=\"{$this->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\"></a>

评论

等风等雨等你来