（HTML）jQuery lightbox fancyBox customize

（HTML）jQuery lightbox fancyBox customize
画像のフルスクリーン、スライドショーカスタムボタン追加

一つ前のメニューに戻る

画像表示のjQueryライブラリfancyBoxに、フルスクリーン表示トグル、スライドショー開始・終了のカスタムボタンを追加する機能拡張を行った。

ソフトウエアのダウンロード

fancyBox version 2.1.5を改変したソースコード

ソースコードをSubversionブラウザよりダウンロード

機能の概要

画面右上の「閉じる」ボタンの隣に、「再生」「最大」のボタンを追加する。

例：写真集イタリア（ヴィチェンツァ）

ソースコード主要部

jquery.fancybox.js の処理主要部抜粋

  $.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.