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

フルスクリーンで画像を表示するための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以降をサポートしているようです。

 

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

  • LATEST
  • RELATED
  • POPULAR