Intense Images 是一个(真正的)用于在全屏幕中查看图像的独立 JavaScript 库,用于高分辨率摄影或艺术作品。使用触摸/鼠标进行平移。
Intense Images 是一个独立的 JavaScript 库(不依赖 jQuery 或其他库),所以使用非常简单。图像元素的所有样式取决于用户,Intense.js 只处理图像查看器和图形的创建,风格和管理。
用法
HTML
对于要激活 Intense Images 图像查看器的 html
元素没有太多限制,但必须要有属性 src
,data-image
或 href
,用来指向一个图像文件。如果要将不同版本的图像加载到原始源(例如更高分辨率),则可以使用 data-image
。
<img src="./img/awesome-source.jpg" />
<!-- OR -->
<div class="anything" data-image="./img/awesome-source.jpg" />
你还可以添加 data-title
和 data-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