README

演示

在 slides.seld.be 上查看示例幻灯片集

如何：导航幻灯片集

导航、在任意位置双击、按空格键或使用左右/上下箭头键

直接跳转到幻灯片，按数字键然后按回车键

获取概览，按 Esc 或 Delete 键然后点击幻灯片直接跳转到它

如何：创建自己的幻灯片集

幻灯片集的核心是简单的 HTML 文件。每个幻灯片可以是任何 HTML 元素，但通常是 div 或 section。您可以通过在 jQuery 选择上调用 slippy() 来初始化 slippy，例如，如果您将 slide 类添加到所有幻灯片 div 中，使用：$(".slide").slippy({})。使用 slide 类是推荐的，因为这是默认 CSS 文件所使用的，但您可以自由地做您想做的事情。

要快速开始，您可以使用 2010-05-30 Example.html 文件，这是一个示例幻灯片集，并对其进行编辑。但是，如果您希望全部手动完成，以下是在您的 HTML 文件中需要添加的部分。

<!-- jQuery + history plugin -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>

<!-- Slippy core js file -->
<script type="text/javascript" src="slippy.js"></script>

<!-- Slippy structural styles -->
<link type="text/css" rel="stylesheet" href="slippy.css"/>

<!-- Slippy theme (feel free to change it) -->
<link type="text/css" rel="stylesheet" href="slippy-pure.css"/>

此外，如果您想要语法高亮显示，您应该添加以下文件。使用它很简单，只需创建一个具有 class="brush: js" 的 <pre> 标签来突出显示 JavaScript 代码，例如。您可以在 SyntaxHighlighter 网站上了解更多信息。

<!-- Syntax highlighting core file  -->
<script type="text/javascript" src="highlighter/shCore.js"></script>

<!-- Syntax highlighting brushes, this one is only for javascript -->
<script type="text/javascript" src="highlighter/shBrushJScript.js"></script>

<!-- Syntax highlighting core CSS and a theme -->
<link type="text/css" rel="stylesheet" href="highlighter/shCore.css"/>
<link type="text/css" rel="stylesheet" href="highlighter/shThemeEclipse.css"/>

最后，您应该初始化 Slippy 和语法高亮显示。

<script type="text/javascript">
    $(function() {
        $(".slide").slippy({});
        SyntaxHighlighter.all();
    });
</script>

图片会自动缩放到适合幻灯片，无论浏览器窗口的大小如何。您可以使用 baseWidth 和 imgScaleTrivial 参数（见下文）来调整行为。如果您的某个图片不应缩放，请将 "noscale" 类添加到标签中，例如：

slippy() 调用一个选项对象，该对象接受以下键

animLen，默认动画的持续时间（0 = 禁用）
animInForward，接收一个幻灯片并对其动画
animInRewind，接收一个幻灯片并对其动画
animOutForward，接收一个幻灯片并对其动画
animOutRewind，接收一个幻灯片并对其动画
baseWidth，定义图片缩放的基准，如果您不想只有全宽图片，请指定为幻灯片的像素宽度，以便图像正确缩放（默认宽度为 620px）。设置为 false 不缩放图片。
imgScaleTrivial，定义图像不缩放的极限，以避免不必要的缩放，这会使图像看起来不那么好。
ratio，定义幻灯片的宽度/高度比，默认为 1.3（620x476）
margin，用作幻灯片边距的屏幕分数，默认为 0.15

如何：全屏显示图片

如果幻灯片包含 data-background 属性，则将插入引用的图像全屏，如果图像的宽高比与屏幕不同，背景将变为黑色。示例

<div class="slide" data-background="foo.jpg">
    <h1>Content</h1>
</div>

服务器

src/ 文件夹包含一个 index.php，它提供幻灯片。

将 src 文件夹放入 Web 服务器根目录中
将 config.php.dist 复制到 config.php 并调整以指向包含您的幻灯片的文件夹 - 或者只需将所有幻灯片复制/符号链接到 src 文件夹中。index.php 在该文件夹中查找 html 文件并显示它们，使用标题和作者的头信息。

导出自包含的 HTML 演示文稿

Slippy可以将演示文稿生成一个单独的文件，其中包含所有内联的JavaScript、CSS和图片。

php src/index.php <slippy slides> [<output file>]

如果您省略输出文件，Slippy将根据输入文件生成文件名，并在名称后附加_compile。

如果您设置了Slippy网络服务器（见上文），您还可以点击下载链接。

限制：如果您在CSS语句中使用图片，它们不会被包括。如果您需要这样做，您应该生成一个PDF（见下文）。

导出PDF

为了将您的演示文稿上传到SlideShare，或者与他人共享，将其导出为PDF可能很方便。Slippy附带了一个CLI工具，专门用于此目的。

唯一的要求是您下载PhantomJS（2.0+）和pdftk，并将可执行文件放在bin/phantomjs和bin/pdftk目录中，或者通过您的PATH环境变量使其可访问。如果您使用Linux，您可能可以通过您发行版的包管理器安装pdftk。

完成这些后，您可以使用以下命令调用脚本：bin/slippy-pdf.sh <您的HTML演示文稿的路径> <要生成的PDF文件的路径>。

这将需要一些时间，然后应该输出一个4:3的PDF文件。如果您不喜欢长宽比或大小，您可以在bin/phantom-slippy-to-pdf.js文件中更改视口大小。如果您遇到渲染问题（缺少图片等），请尝试增加延迟，或重新渲染，有时PhantomJS会无缘无故失败。

作者

Jordi Boggiano - j.boggiano@seld.be http://seld.be/ - http://twitter.com/seldaek

请参阅参与此项目的贡献者列表。

贡献

如果您喜欢这个软件，请考虑使用Flattr进行回馈。

代码贡献、错误报告和想法也非常欢迎。

变更日志

1.0.0
- 切换到BSD许可
- 幻灯片文件现在是独立的HTML文件，不需要PHP
  - 然而，如果您有代码块，建议使用它，因为它会自动转换HTML特殊字符
  - 请注意，这破坏了与先前幻灯片文件的兼容性，因为现在必须手动将其中的js/css文件包含在内
- 添加了布局功能，请参阅示例幻灯片中关于布局的幻灯片以获取文档
- 为主要的Slippy js命令添加了参数，使用户可以轻松调整/覆盖内容，请参阅示例文件
- 添加了对触摸设备的滑动/双击支持
- 添加了使用PhantomJS的PDF导出功能
- 将CSS拆分为结构化/主题样式表，以便轻松自定义
- 改进了默认主题，以便在投影仪上更好地可读
- 自动调整大小以匹配浏览器尺寸
- 添加了对上一页/下一页幻灯片的“Page Up”和“Page Down”支持，以及“Home”/“End”键以转到演示文稿的开始或结束
- 当使用概述/直接输入和向后导航时，动画现在按照正确的方向进行
- 添加了一个模板以渲染幻灯片存储库页面
- 添加了一个打包器，将所有内容嵌入其中，以便轻松地将幻灯片作为单个HTML文件分发
- 添加了增量幻灯片功能（将incremental类应用于任何元素，使它们一个接一个地出现）
- 按幻灯片添加了对全屏图片的支持（在幻灯片div上使用data-background="img url"）
- 在切换幻灯片时清除JS警告，但保持较长时间可见
- 修复了防止使用“0”切换到幻灯片的错误
0.9.0
- 首次公开发布

许可

Slippy采用新BSD许可协议，这意味着您可以几乎用它做任何您想要的事情 - 然而，我鼓励您在制作幻灯片和样式表时分享它们，但这没有任何义务。

新BSD许可协议 - 有关详细信息，请参阅src/LICENSE文件

兼容性

它应该与所有浏览器兼容，除了概览功能在IE8及以下版本中不工作。

seld / slippy

维护者

详细信息