jQuery

【jQuery】jQueryライブラリ用のモバイルフレンドリーなライトボックスプラグインfrydBox

December 22, 2017
frydBox

frydBoxは、LightboxやFancyboxに変わる軽量でモバイルフレンドリーなライトボックスjQueryプラグイン。

Installation

インクルード

<script src="jquery.frydBox.min.js"></script>

Use

Single photo:

<a href="photo_big.jpg" id="photo"><img src="photo_min.jpg"></a>
<script>
$("#photo").frydBox();
</script>

Group of photos:

<a href="photo1_big.jpg" class="photo"><img src="photo1_min.jpg"></a>
<a href="photo2_big.jpg" class="photo"><img src="photo2_min.jpg"></a>
<a href="photo3_big.jpg" class="photo"><img src="photo3_min.jpg"></a>
<script>
$(".photo").frydBox();
</script>

Configuration

<script>
$(".photo").frydBox({
   prefix: 'frydBox_',
   lazyLoading: true,
   lazyLoadingDelay: 100,
   fadeDuration: 400,
   moveDuration: 800,
   screenPercent: 0.88,
   backOpacity: 0.6,
   shadowOpacity: 0.6,
   shadowSize: 18,
   borderSize: 13,
   borderColor: 'white',
   borderRadius: 8,
   scrollBars: false
});
</script>

MIT