[朗读900字]

点击下图看效果。
预览效果图

废话少说,直接上步骤:

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

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

在post.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>
<!--预览图-->

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

[此处内容需要评论回复后方可阅读]

标签: none



添加新评论


最近回复