![]() |
(HTML)jQuery lightbox fancyBox customize 画像のフルスクリーン、スライドショー カスタムボタン追加 |
画像表示のjQueryライブラリfancyBoxに、フルスクリーン表示トグル、スライドショー開始・終了のカスタムボタンを追加する機能拡張を行った。
目次 |
fancyBox version 2.1.5を改変したソースコード
画面右上の「閉じる」ボタンの隣に、「再生」「最大」のボタンを追加する。
$.extend(F, { // The current version of fancyBox version: '2.1.5', defaults: { padding : 15, margin : 20, // 〜 中略 〜 topRatio : 0.5, leftRatio : 0.5, modeFullScreen : false, // フルスクリーン状態を保存するフラグ変数を追加した scrolling : 'auto', // 'auto', 'yes' or 'no' wrapCSS : '',
_setDimension: function () { var viewport = F.getViewport(), // 〜 中略 〜 if (current.aspectRatio) { if (width > maxWidth) { width = maxWidth; height = getScalar(width / ratio); } if (height > maxHeight) { height = maxHeight; width = getScalar(height * ratio); } if (width < minWidth) { width = minWidth; height = getScalar(width / ratio); } if (height < minHeight) { height = minHeight; width = getScalar(height * ratio); } /***** * Full Screen mode, added by H.INOUE 2016.FEB.13 *****/ if(F.opts.modeFullScreen == true){ width = maxWidth; height = getScalar(width / ratio); if (height > maxHeight) { height = maxHeight; width = getScalar(height * ratio); } }
_afterZoomIn: function () { // 〜 中略 〜 // Create a close button if (current.closeBtn) { $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', function(e) { e.preventDefault(); F.close(); }); /***** * Full Screen (toggle) button, added by H.INOUE 2016.FEB.13 *****/ $(current.tpl.fullscreenBtn).appendTo(F.skin).bind('click.fb', function(e) { e.preventDefault(); if(F.opts.modeFullScreen == true) { F.opts.modeFullScreen = false; F.opts.margin = 20; F.opts.helpers.title.type = 'outside'; } else { F.opts.modeFullScreen = true; F.opts.margin = 1; F.opts.helpers.title.type = 'over'; } F.update(); }); /***** * Slideshow Play (toggle) button, added by H.INOUE 2016.FEB.13 *****/ $(current.tpl.playBtn).appendTo(F.skin).bind('click.fb', function(e) { e.preventDefault(); // toggle Slideshow F.play(); });
私が改変した部分の著作権は放棄します。ベースとなった元のソースコードについてはfancyBoxの使用許諾条件に依ってください。
改変のベースとなったオリジナル版 fancyBox version 2.1.5 の使用許諾条件は Creative Commons ライセンスAttribution-NonCommercial 3.0 Unported(表示 – 非営利 3.0 非移植 ) だそうです。最新版は有償なので、過去バージョンで問題ないならそのまま使い続けるのが吉です。
FancyBox licensed under Creative Commons Attribution-NonCommercial 3.0 license. Free non-profit websites. For commercial use see http://sites.fastspring.com/fancyapps/product/store.