jQueryプラグイン：blackboxのカスタマイズ方法

Question

blackboxを使ったスライドショーでの画像サイズを変更したいです。

blackboxというプラグインを使ってフォトギャラリーサイトを制作しています。
（WEB初心者です。HTMLとCSSはそれなりの理解はあるつもりですが、jQuery、jsはコピペして使用するレベルです）

サムネイル画像をクリックすると、拡大画像が表示され、矢印ボタンでスライドを進められるタイプのものですが、
どこをさわれば、拡大画像のサイズカスタマイズができるのかがわからず、困っています。

widthやmargin、paddingなどで設定しようとすると、写真自体ではなく、スライドショーそのもの（背景まるごと）のサイズが変わってしまいます。

拡大された画像（写真だけ）のサイズを変更したく（もっと画像を小さくして周辺余白を作りたい）、
初歩的なことかもしれませんが、どなたかご教授いただけると幸いです。

該当のソースコード

#darkbox{
  color:#4B5C6C;
  font: 14px/1.4 sans-serif;
  position: fixed;
  z-index: 999999;
  top: 0; /* since we cannot use padding */
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff none no-repeat 50% 50% / contain;
  box-shadow: 0 0 0 0 #fff;
  -webkit-transition: 0.3s;
          transition: 0.3s;
  opacity: 0; 
  visibility: hidden;
}

#darkbox.show{
  opacity: 1;
  visibility: visible;
}

/**
 * Darkbox - by Roko.CB
 * https://github.com/rokobuljan/Darkbox-Gallery
 */
;(function() {
  jQuery(function($) {

    var $imagesGroup,
        n = 0, // number of images
        c = 0, // current image index (counter 0-based)    

        $prevNext = $("<a id='darkbox_prev'/><a id='darkbox_next'/>").on("touchstart mousedown", function(e) {
          e.preventDefault();
          e.stopPropagation();
          var isNext = this.id === "darkbox_next";
          c = isNext ? ++c : --c;
          showImage();
        }),

        $darkbox = $("<div/>", {
          id: "darkbox",
          append: $prevNext,
          appendTo : "body"
        }),

        $darkboxClose = $("<a/>", {
          id: "darkbox_close",
          appendTo: $darkbox,
          on: {
            "touchstart mousedown" : function(e) {
              e.preventDefault();
              $darkbox.removeClass("show");
            }
          }
        }),

        $darkboxDescription = $("<div/>", {
          id: "darkbox_description",
          appendTo : $darkbox
        }),

        $darkboxStats = $("<div/>", {
          id: "darkbox_stats",
          appendTo : $darkbox
        });

    function showImage() {

      // Prevent counter going out of bounds
      c = c < 0 ? n - 1 : c % n;

      // Get size of window so that we can define if
      // background-size needs to be "contain" or "auto".
      var doc  = document.documentElement,
          docW = Math.max(doc.clientWidth,  window.innerWidth  || 0),
          docH = Math.max(doc.clientHeight, window.innerHeight || 0),
          $cur = $imagesGroup.eq(c),
          description = $cur.data("darkbox-description"),
          src = $cur.data("darkbox");

      $darkbox.addClass("show spinner");
      $darkboxDescription.html(description);
      $darkboxStats.html(n < 2 ? "" : (c+1) +"/"+ n);

      $("<img/>").on("load", function() {
        var bigger = (this.width > docW || this.height > docH);
        $darkbox.removeClass("spinner").css({
          backgroundImage: "url('" + this.src + "')",
          backgroundSize: bigger ? "contain" : "auto"
        });
      }).attr("src", src);

    }

    // Call darkbox
    $(document).on("click", "[data-darkbox],[data-darkbox-group]", function(e) {

      var src = $(this).data("darkbox"),
          isDummy = !src, // (is just a link calling a group)
          groupID = $(this).data("darkbox-group");

      $imagesGroup = !groupID ? $(this) : $('[data-darkbox-group="'+ groupID +'"]').filter("[data-darkbox]");
      n = $imagesGroup.length;
      c = isDummy ? 0 : $imagesGroup.index( this );

      $prevNext.toggle(n>1); // Hide prev/next if we have a single image
      $darkbox.css({backgroundImage:"none"});

      showImage(); // aand, ACTION!
    });

    // Keyboard navigation
    $(document).on("keyup", function (e) {

      var k = e.which;

      if (k === 27) /*ESC */ {
        $darkbox.removeClass("show");
      }
      if (k === 37) /*LEFT*/ {
        --c;
        showImage();
      }
      if (k === 39) /*RIGHT*/ {
        ++c;
        showImage();
      }
    });
    
  });
}());

補足情報（FW/ツールのバージョンなど）

念の為、darkboxの取得リンク先です。
https://github.com/rokobuljan/Darkbox-Gallery

Answer 1

darkboxに、top bottom left right の値で余白を付けて、box-shadow の値で背景の影の広がりを付けてるみたいです。
100pxの余白を付けるとしたらこんな感じでいけるかと思うのですが、試してみてください。

#darkbox{
  color:#4B5C6C;
  font: 14px/1.4 sans-serif;
  position: fixed;
  z-index: 999999;

/* 上下左右の余白 */
  top: 100px; /* since we cannot use padding */
  left: 100px;
  bottom: 100px;
  right: 100px;

  background: #fff none no-repeat 50% 50% / contain;

/* 余白と同じ値かそれ以上の値 */
  box-shadow: 0 0 0 100px #fff;


  -webkit-transition: 0.3s;
          transition: 0.3s;
  opacity: 0; 
  visibility: hidden;
}

Comments

[usiko]

わぁ、できました！！ありがとうございます！！
なるほど…、box-shadowがキーだったんですね。
（ここの値の意味をまったく理解できていませんでした…ひとつ勉強になりました）
本当に助かりました。ありがとうございました。