Intense Images―Javascript库在全屏查看图像

一个独立的javascript库全屏查看完整图片。使用触摸/鼠标位置的平移。这是一个演示!

HTML

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

你也可以通过标题、subcaptions,将出现在观众的右下方。要做到这一点,您可以使用data-title和data-caption属性。

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

JS

<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>

CSS

如果你想使用自己的指针图标,你可以在演示文件夹替换，或修改这里的CSS代码。

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

PREVIOUS:
NEXT:
jQuery标签插件flyLabel.js
gifffer-防止自动播放gif动画