ZT Blog

一个简单的独立博客。
首页 归档 主题 饭否 歌单 联系

给Yellow写了一个Fancybox的插件

其实就是参考原来Gallery插件,依葫芦画瓢,只不过把photoswipe换成了fancybox罢了。其实功能都差不多,都是弹出层的插件,相类似的还有lightbox,个人更喜欢fancybox,喜欢它的缩略图和全屏的功能,而且实现起来相当容易。

这个插件想比原来的Gallery plugin,它只有一个文件为gallery.php,而且fancybox的js和css文件都是用cdn链接,而非本地文件,理论上访问更快些。

代码如下:

<?php
// Gallery plugin, https://github.com/datenstrom/yellow-plugins/tree/master/gallery
// Copyright (c) 2013-2017 Datenstrom, https://datenstrom.se
// This file may be used and distributed under the terms of the public license.

class YellowGallery
{
    const VERSION = "0.7.3";
    var $yellow;            //access to API

    // Handle initialisation
    function onLoad($yellow)
    {
        $this->yellow = $yellow;
        $this->yellow->config->setDefault("galleryStyle", "fancybox");
    }

    // Handle page content parsing of custom block
    function onParseContentBlock($page, $name, $text, $shortcut)
    {
        $output = null;
        if($name=="gallery" && $shortcut)
        {
            list($pattern, $style, $size) = $this->yellow->toolbox->getTextArgs($text);
            if(empty($style)) $style = $this->yellow->config->get("galleryStyle");
            if(empty($size)) $size = "100%";
            if(empty($pattern))
            {
                $files = $this->yellow->files->clean();
            } else {
                $images = $this->yellow->config->get("imageDir");
                $files = $this->yellow->files->index(true, true)->match("#$images$pattern#");
            }
            if($this->yellow->plugins->isExisting("image"))
            {
                if(count($files))
                {
                    $page->setLastModified($files->getModified());
                    $output = "<div class=\"".htmlspecialchars($style)."\">\n";
                    foreach($files as $file)
                    {
                        list($src, $width, $height) = $this->yellow->plugins->get("image")->getImageInfo($file->fileName, $size, $size);
                        $output .= "<a href=\"".$file->getLocation(true)."\" data-fancybox=\"images\">";
                        $output .= "<img src=\"".htmlspecialchars($src)."\" width=\"".htmlspecialchars($width)."\" height=\"".htmlspecialchars($height)."\" alt=\"".basename($file->getLocation(true))."\" title=\"".basename($file->getLocation(true))."\" />";
                        $output .= "</a> \n";
                    }
                    $output .= "</div>";
                } else {
                    $page->error(500, "Gallery '$pattern' does not exist!");
                }
            } else {
                $page->error(500, "Gallery requires 'image' plugin!");
            }
        }
        return $output;
    }

    // Handle page extra HTML data
    function onExtra($name)
    {
        $output = null;
        if($name=="header")
        {
            $pluginLocation = $this->yellow->config->get("serverBase").$this->yellow->config->get("pluginLocation");
            $output = "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"//cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.min.css\" />\n";
            $output .= "<script type=\"text/javascript\" src=\"//cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.min.js\"></script>\n";
        }
        return $output;
    }
}

$yellow->plugins->register("gallery", "YellowGallery", YellowGallery::VERSION);
?>

如果想显示标题,可以把下面这行:

$output .= "<a href=\"".$file->getLocation(true)."\" data-fancybox=\"images\">";

变成:

$output .= "<a href=\"".$file->getLocation(true)."\" data-fancybox=\"images\" data-caption=\"".basename($file->getLocation(true))."\">";

增加button按钮和滑动效果,比如说放大、播放、全屏、缩略图、关闭这类按钮,参考fancybox文档,里面有很多相关设置:

$("[data-fancybox]").fancybox({
  buttons: [
    "zoom",
    "slideShow",
    "fullScreen",
    "thumbs",
    "close"
  ],
  transitionEffect: "slide"
})

PS:由于fancybox是基于jQuery的,记得先加载jQuery,jQuery 3+最好了, 不过jQuery 1.9.1+和jQuery 2+也没问题。

然后在system/config/config.ini文件里加上GalleryStyle: fancybox,意思就是类名为fancybox。

DEMO:公园一景(6P)