Javascript

【Javascript】軽量のJavaScript画像/動画ビューアBigPicture

December 16, 2017
BigPicture.js

BigPicture.jsは軽量とフレームワークに依存しないJavaScriptイメージ/ビデオビューア。Youtube、Vimeo、および直接ビデオリンクをサポートしています。

Instructions

<script src="BigPicture.js"></script>

Remote image example

BigPicture({
  el: this,
  imgSrc: 'http://yourimage.jpg'
});

Remote video

BigPicture({
  el: this,
  vidSrc: 'http://yourvideo.mp4'
});

Youtube

BigPicture({
  el: this,
  ytSrc: 'z_PeaHVcohg'
});

Vimeo

BigPicture({
  el: this,
  vimeoSrc: '119287310'
});

Local images & background images

BigPicture({
  el: this
});

Captions

<img src="yourimage.jpg" caption="Example of an optional caption."/>

Optional callbacks

BigPicture({
  el: this,
  // executed immediately before open animation starts
  animationStart: function() {
    console.log('it is opening');
  },
  // executed immediately after open animation finishes
  animationEnd: function() {
    console.log('it has opened');
  }
});

Hide default loading icon

BigPicture({
  el: this,
  vimeoSrc: '119287310',
  noLoader: true
});

MIT