WoollyMittens/useful-gallery

语言: JavaScript

git: https://github.com/WoollyMittens/useful-gallery

此内容库使用AJAX逐步加载内容,并使用CSS3过渡进行动画和定位。 ...
This content gallery loads content progressively using AJAX and uses CSS3 transitions for animation and positioning. …
README.md (中文)

useful.gallery.js:插板画廊

此内容库使用AJAX逐步加载内容,并使用CSS3过渡进行动画和定位。提供内容的可选Web服务基于PHP,但可以使用其他语言轻松复制该概念。

试试这个演示。

如何包含脚本

样式表最好包含在文档的标题中。

<link rel="stylesheet" href="./css/useful-gallery.css"/>

在调用脚本之前,可以将此include添加到标头中或放置在内联中。

<script src="./js/useful-gallery.js"></script>

要在Internet Explorer 8及更低版本中启用HTML5标记,请包含html5.js。

<!--[if lte IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

使用vanilla JavaScript

var gallery = new useful.Gallery( document.getElementById('id'), {
    'aspectRatio' : 1,
    'carouselNames' : ['gallery_carousel_farleft', 'gallery_carousel_left', 'gallery_carousel_centre', 'gallery_carousel_right', 'gallery_carousel_farright'],
    'pinboardNames' : ['gallery_pinboard_left', 'gallery_pinboard_right', 'gallery_pinboard_loading'],
    'pagerLabels' : ['I', 'II', 'III', 'IV', 'V'],
    'rowOffset' : 18,
    'pinboardOffset' : 0,
    'fetchScrollBottom' : 100,
    'fetchTreshold' : 3,
    'fetchAmount' : 5,
    'limitSpeed' : true,
    'allowLoop' : false,
    'idleDelay' : 8000,
    'idleDirection' : 1,
    'toggleHint' : true,
    'togglePager' : true,
    'toggleFilter' : 'Filter',
    'togglePinboard' : 'View Pin Board',
    'toggleCarousel' : 'View Carousel',
    'toggleNext' : 'Next Slide',
    'togglePrev' : 'Previous Slide',
    'onMobile' : (navigator.userAgent.indexOf('Mobile')>-1)
});

id:{string} - 文档中某处元素的ID属性。

aspectRatio:{float} - 定义图库的纵横比(4:3为0.75)。

carouselNames:{array} - 脚本将遍历这些类,数量不受限制。

pinboardNames:{array} - 脚本在这些类之间交替,以跨列分割幻灯片。

pagerLabels:{array} - 默认情况下,页码显示为整数,但如果给定,这些字符串将被替换。

pinboardOffset:{integer} - 用于定位引脚板的调整。

rowOffset:{integer} - 按键盘模式下幻灯片行之间的距离。

fetchScrollBottom:{integer} - 如果启用了AJAX,则距离引脚板底部的距离将加载新幻灯片。

fetchTreshold:{integer} - 卸载幻灯片预加载应该开始多远。

fetchAmount:{integer} - 一次可以获得多少张幻灯片。

limitSpeed:{boolean} - 在动画结束前不接受新输入。

allowLoop:{boolean} - 在到达最后一个之后立即循环到第一张幻灯片。

idleDelay:{integer} - 等待这么久才开始自动幻灯片放映。

idleDirection:{integer} - 显示幻灯片的方向。+ 1从左到右,-1从右到左。

toggleHint:{boolean} - 显示或隐藏提示图标。

togglePager:{boolean} - 显示或隐藏页数。

toggleFilter:{string / boolean} - 显示或隐藏类别过滤器。字符串将覆盖标签文本。

togglePinboard:{string / boolean} - 显示或隐藏PIN板模式开关。字符串将覆盖标签文本。

toggleCarousel:{string / boolean} - 显示或隐藏轮播模式开关。字符串将覆盖标签文本。

toggleNext:{string / boolean} - 显示或隐藏下一个幻灯片按钮。字符串将覆盖标签文本。

togglePrev:{string / boolean} - 显示或隐藏上一个幻灯片按钮。字符串将覆盖标签文本。

onMobile:{boolean} - 如何识别移动设备以启用触摸控制

如何控制脚本

焦点

gallery.focus(index);

突出显示并集中特定缩略图。

index:{integer} - 要显示的幻灯片的索引。

以前

gallery.previous();

显示上一张幻灯片。

下一个

gallery.next();

显示下一张幻灯片

暂停

gallery.pause();

停止自动幻灯片放映。

gallery.play();

启动自动幻灯片放映。

转变

gallery.transform(mode);

在幻灯片和插板之间切换。

mode:{integer} - 模式的索引。 + 0 - 幻灯片模式 + 1 - 针板模式

如何构建脚本

这个项目使用来自http://nodejs.org/的node.js

该项目使用http://gulpjs.com/中的gulp.js

以下命令可用于开发: + npm install - 安装先决条件。 + gulp import - 如果在同一文件夹树下可用,则将库从支持项目重新导入./src/libs/。 + gulp dev - 为开发目的构建项目。 + gulp prod - 构建项目以进行部署。 + gulp watch - 在开发会话期间连续重新编译更新的文件。 + gulp serve - 在http:// localhost:8000 /的临时Web服务器上提供项目。

执照

本作品采用知识共享署名3.0 Unported许可协议授权。可以在http://www.woollymittens.nl/找到同一作者的这个和其他脚本的最新版本。

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

useful.gallery.js: Pinboard Gallery

This content gallery loads content progressively using AJAX and uses CSS3 transitions for animation and positioning. The optional web service providing the content is based on PHP, but the concept can be easily reproduced in other languages.

Try the demo.

How to include the script

The stylesheet is best included in the header of the document.

<link rel="stylesheet" href="./css/useful-gallery.css"/>

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/useful-gallery.js"></script>

To enable the use of HTML5 tags in Internet Explorer 8 and lower, include html5.js.

<!--[if lte IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Using vanilla JavaScript

var gallery = new useful.Gallery( document.getElementById('id'), {
    'aspectRatio' : 1,
    'carouselNames' : ['gallery_carousel_farleft', 'gallery_carousel_left', 'gallery_carousel_centre', 'gallery_carousel_right', 'gallery_carousel_farright'],
    'pinboardNames' : ['gallery_pinboard_left', 'gallery_pinboard_right', 'gallery_pinboard_loading'],
    'pagerLabels' : ['I', 'II', 'III', 'IV', 'V'],
    'rowOffset' : 18,
    'pinboardOffset' : 0,
    'fetchScrollBottom' : 100,
    'fetchTreshold' : 3,
    'fetchAmount' : 5,
    'limitSpeed' : true,
    'allowLoop' : false,
    'idleDelay' : 8000,
    'idleDirection' : 1,
    'toggleHint' : true,
    'togglePager' : true,
    'toggleFilter' : 'Filter',
    'togglePinboard' : 'View Pin Board',
    'toggleCarousel' : 'View Carousel',
    'toggleNext' : 'Next Slide',
    'togglePrev' : 'Previous Slide',
    'onMobile' : (navigator.userAgent.indexOf('Mobile')>-1)
});

id : {string} - The ID attribute of an element somewhere in the document.

aspectRatio : {float} - Defines the aspect ratio of the gallery (4:3 would be 0.75).

carouselNames : {array} - The script will cycle through these classes, the number is not limited.

pinboardNames : {array} - The script alternates between these classes to divide the slides across columns.

pagerLabels : {array} - By default the page numbers are shown as integers, but these strings will be substituted if given.

pinboardOffset : {integer} - Tweak for positioning of the pin-board.

rowOffset : {integer} - Distance between rows of slides in pin-board mode.

fetchScrollBottom : {integer} - Distance from the bottom of the pin board where new slides will be loaded if AJAX is enabled.

fetchTreshold : {integer} - How far from the unloaded slides preloading should commence.

fetchAmount : {integer} - How many slides to get in one go.

limitSpeed : {boolean} - Don't accept new input until the animation finished.

allowLoop : {boolean} - Immediately cycle to the first slide after reaching the last.

idleDelay : {integer} - Wait this long until starting the automatic slideshow.

idleDirection : {integer} - Direction to show the slides in. +1 is left to right, -1 is right to left.

toggleHint : {boolean} - Shows or hides the hint icon.

togglePager : {boolean} - Shows or hides the page count.

toggleFilter : {string / boolean} - Shows or hides the category filter. A string will override the label text.

togglePinboard : {string / boolean} - Shows or hides the pin-board mode switch. A string will override the label text.

toggleCarousel : {string / boolean} - Shows or hides the carousel mode switch. A string will override the label text.

toggleNext : {string / boolean} - Shows or hides the next slide button. A string will override the label text.

togglePrev : {string / boolean} - Shows or hides the previous slide button. A string will override the label text.

onMobile : {boolean} - How mobile devices are identified to enable touch controls

How to control the script

Focus

gallery.focus(index);

Highlights and centres a specific thumbnail.

index : {integer} - The index of the slide to show.

Previous

gallery.previous();

Shows the previous slide.

Next

gallery.next();

Shows the next slide

Pause

gallery.pause();

Stops the automatic slideshow.

Play

gallery.play();

Starts the automatic slideshow.

Transform

gallery.transform(mode);

Switches between slideshow and pin-board.

mode : {integer} - The index of the mode.
+ 0 - Slideshow mode
+ 1 - Pin-board mode

How to build the script

This project uses node.js from http://nodejs.org/

This project uses gulp.js from http://gulpjs.com/

The following commands are available for development:
+ npm install - Installs the prerequisites.
+ gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
+ gulp dev - Builds the project for development purposes.
+ gulp prod - Builds the project for deployment purposes.
+ gulp watch - Continuously recompiles updated files during development sessions.
+ gulp serve - Serves the project on a temporary web server at http://localhost:8000/ .

License

This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at http://www.woollymittens.nl/