Image placeholder

Intense Images – 真正的全屏图像查看器

Image placeholder
F2EX 2017-08-11

Intense Images 是一个(真正的)用于在全屏幕中查看图像的独立 JavaScript 库,用于高分辨率摄影或艺术作品。使用触摸/鼠标进行平移。

Intense Images 是一个独立的 JavaScript 库(不依赖 jQuery 或其他库),所以使用非常简单。图像元素的所有样式取决于用户,Intense.js 只处理图像查看器和图形的创建,风格和管理。

用法

HTML

对于要激活 Intense Images 图像查看器的 html 元素没有太多限制,但必须要有属性 srcdata-imagehref,用来指向一个图像文件。如果要将不同版本的图像加载到原始源(例如更高分辨率),则可以使用 data-image

<img src="./img/awesome-source.jpg" />

<!-- OR -->

<div class="anything" data-image="./img/awesome-source.jpg" />

你还可以添加 data-titledata-caption 属性为图像添加标题和说明,这些将显示在查看器的右下方。

<img src="./img/awesome-source.jpg" data-title="My beach adventure" data-caption="Thanks Sam, for the great picture"/>
JS

Intense.js 在指定要使用的元素时是非常强大的,它们一旦被渲染就简单地传递给 Intense 函数。你可以使用
document.querySelector 查找你需要的元素。

<img src="./img/awesome-source.jpg" />

<script>
window.onload = function() {
	// Intensify all images on the page.
    var element = document.querySelector( 'img' );
	Intense( element );
}
</script>

或者一次使用一个类名来对多张图像进行操作。

<img src="./img/awesome-source.jpg" class="intense" />
<img src="./img/awesome-source.jpg" class="intense" />

<script>
window.onload = function() {
	// Intensify all images with the 'intense' classname.
    var elements = document.querySelectorAll( '.intense' );
	Intense( elements );
}
</script>

如果你愿意,你可以反转交互的方向。

<img src="./img/awesome-source.jpg" class="intense" />
<img src="./img/awesome-source.jpg" class="intense" />

<script>
window.onload = function() {
	// Intensify all images with the 'intense' classname.
	var elements = document.querySelectorAll( '.intense' );
	Intense( elements, {invertInteractionDirection: true});
}
</script>
CSS

没有任何 css 限制。如果你想使用 + 光标指示,你可以在演示文件夹中找到该图像,下面是 css 片段。

.your-image-class {
	cursor: url('./you-image-directory/plus_cursor.png') 25 25, auto;
}
图像/实例

以下是 Intense.js 的截图。你应该看看演示亲身体验一下。


2017-08-11