Javascript

【JavaScript】フルスクリーンで画像を表示Intense Image Viewer

July 28, 2015

フルスクリーンで画像を表示するためのJavaScriptライブラリ。

HTML

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

<!-- OR -->

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

上記のサンプルを元に

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

data-title、data-captionはフルスクリーン表示の左下に表示されます。

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>

document.querySelector( ‘img’ );部分をclass設定

<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

カーソル設定

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

ライセンスはMITでIE9以降をサポートしているようです。