baserCMS Colorboxで、起動時に「×」閉じるボタンを非表示にしたい。 ほか

モーダルウインドのモジュールは、他にもいろいろありますが、「シンプルで扱いやすい」「レスポンシブ対応」と言う点で「Colorbox」は、グッドです。 見てくれは、Colorboxサイト のDEMOサンプルを見ながら、あれこれ触ってみるとよいかと。意外に、いい感じになるのが「×」閉じるボタン用に予め用意されているcontrols.pngやloading.gifなんかをsvgファイルやSVGのローディングアイコン とかに置き直すと、ちょっと気の利いた感じになります。

さて、本題です。そんな見てくれの話で、ちょっとしたTIPSです。 baserCMS標準で用意されている「bc-sample」テーマで、ブログ記事のサンプル画像をクリックするとColorboxが起動して、以下のようなステップでモーダルウインドで画像が表示されます。

起動前： 起動時：まだ画像が完全に読み込まれておらず、初期のボックス枠と「×」閉じるボタンが表示されている。 表示完了：縦いっぱいのちょっと窮屈な感じのモーダルウインドサイズで画像が表示される。 ページをスクロールした場合：ページスクロールで、モーダルウインドがどっか行ってしまう。 と言った具合。

気になるポイントと対応策

ここで、以下、気になるポイント。

「1.」のボックス枠は、Colorbox-1.6.1.cssで8行目辺りの（#cboxContent）の記述を以下のように変更すれば、あっさり非表示にできるのですが、

#cboxContent{position:relative;background-color: #000;}
↓
#cboxContent{position:relative;background-color: none;}

「2.」の「×」閉じるボタン（#cboxClose）は、css上で起動時のみ非表示、と言うわけにはいかず、「3.」「4.」と一緒に起動用スクリプト側で対応します。
それぞれの項目の対応は、以下。

/theme/bc_sample/js/startup.jsの20行目辺りに記載されている以下のスクリプトに

$("a[rel='colorbox']").colorbox({transition:"fade", maxWidth:"80%"});
↓
$("a[rel='colorbox']").colorbox({
transition:"fade", maxWidth:"80%", maxHeight:"80%", fixed:true,
onLoad:function(){$('#cboxClose').hide();},
onComplete:function(){setTimeout(function(){$('#cboxClose').show();},500);}
});

onLoad onCompleteのコールバック maxHeightのディメンジョン fixedのポジショニング それぞれのオプションを使って変更、追記します。

参考： Colorbox - a jQuery lightbox - Settings

追記

さらっと、

見てくれは、ColorboxサイトのDEMOサンプルを見ながら、あれこれ触ってみるとよいかと。意外に、いい感じになるのが「×」閉じるボタン用に予め用意されているcontrols.pngやloading.gifなんかをsvgファイルやSVGのローディングアイコンとかに置き直すと、とてもスキッとしたりします。

と言って、終わろうと思ったのですが、自分で確認しとかないと無責任かと思いcontrols.svgやloading.svgやらに差し替えて見たところ、うーーん動かん。 特にレイアウトも変えてないので、そんなわけないよなぁーと思いながら、colorbox-1.6.1.cssを何度見直してもおかしなところはない。どハマり。もしかしてsvgは、viewBoxを書かない方がいいのか？！とか、いろいろ試行錯誤してみてもさっぱり効果なし。 もういいか、と思い始めて、コードを遠目で眺めていたら。。。ありました！
colorbox-1.6.1.cssで、「#cboxPrevious:hover」と記述すべきコードが「#cboxPrevious.hover」と間違って記述されているのを発見。なんだよ。 あと、loading.gifが表示されないのは、「height:100%;」の記述抜け。 というか、もしかして、コメントアウト的な意味合いで意図してこうしているのかも。。。ようわからん。 以下、修正して、svgが無事に表示されるのを確認しましたー。念のため、修正箇所、載せておきます。

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
↓
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}

#cboxPrevious.hover{background-position:bottom left;}
↓
#cboxPrevious:hover{background-position:bottom left;}

#cboxNext.hover{background-position:bottom right;}
↓
#cboxNext:hover{background-position:bottom right;}

#cboxClose.hover{background-position:bottom center;}
↓
#cboxClose:hover{background-position:bottom center;}

サンプル

その上で、以下、サンプルのcontrols.svg、loading.svg、colorbox-1.6.1.cssです。

対象ファイル：controls.svg

<svg xmlns="http://www.w3.org/2000/svg" width="98px" height="130px" viewBox="0 0 98 130" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform="matrix(1,0,0,1,-8.88178e-16,0.290932)">
        <path d="M22.703,13.096L5.801,32.241L22.722,52.475" style="fill:none;stroke:black;stroke-opacity:0.3;stroke-width:3px;"/>
    </g>
    <g transform="matrix(1,0,0,1,0.556859,0.16168)">
        <path d="M52.976,13.868L43.911,4.803L48.443,9.336L52.976,4.803L43.911,13.868" style="fill:none;stroke:black;stroke-opacity:0.3;stroke-width:3px;"/>
    </g>
    <g transform="matrix(1,0,0,1,0.556859,111.162)">
        <path d="M52.976,13.868L43.911,4.803L48.443,9.336L52.976,4.803L43.911,13.868" style="fill:none;stroke:rgb(0,100,250);stroke-opacity:0.7;stroke-width:3px;"/>
    </g>
    <g transform="matrix(1,0,0,1,0,65.38)">
        <path d="M22.722,13.075L5.801,32.241L22.722,52.475" style="fill:none;stroke:rgb(0,100,250);stroke-opacity:0.7;stroke-width:3px;"/>
    </g>
    <g transform="matrix(-1,0,0,1,97.8016,0.290932)">
        <path d="M22.703,13.096L5.801,32.241L22.722,52.475" style="fill:none;stroke:black;stroke-opacity:0.3;stroke-width:3px;"/>
    </g>
    <g transform="matrix(-1,0,0,1,97.8016,65.38)">
        <path d="M22.722,13.075L5.801,32.241L22.722,52.475" style="fill:none;stroke:rgb(0,100,250);stroke-opacity:0.7;stroke-width:3px;"/>
    </g>
</svg>

対象ファイル：loading.svg

<svg xmlns="http://www.w3.org/2000/svg" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="214px" height="214px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(30 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(60 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(90 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(120 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(150 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(180 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(210 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(240 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(270 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(300 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(330 50 50)">
  <rect x="48.5" y="36.5" rx="1.5" ry="1.5" width="3" height="3" fill="#cbcbcb">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
  </rect>
</g>
</svg>

対象ファイル：/theme/bc_sample/css/colorbox/colorbox-1.6.1.css

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; background-color:none;}/* 起動時のボックス枠を非表示 */
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}/* アニメーションローディングが表示されるようにheight属性を追加 */
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxContent{margin:20px 0 25px;}/* テキスト分、画像のレイアウトが下寄りにならないようにマージンを調整 */
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-top:5px; border-radius:5px;}/* 画像周りの黒ボーダーを削除し、角丸5pxを追加 */
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.svg) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}/* hoverの擬似クラス表記を訂正 */
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.svg) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}/* 背景画像のファイル名称を変更 */
        #cboxNext:hover{background-position:bottom right;}/* hoverの擬似クラス表記を訂正 */
        #cboxLoadingOverlay{background:none;}
        #cboxLoadingGraphic{background:url(images/loading.svg) no-repeat center center;}/* アニメーションローディング画像のファイル名称を変更 */
        #cboxClose{position:absolute; top:10px; right:0px; display:block; background:url(images/controls.svg) no-repeat top center; width:38px; height:19px; text-indent:-9999px;border:none;}/* 背景画像のファイル名称を変更 */
        #cboxClose:hover{background-position:bottom center;}/* hoverの擬似クラス表記を訂正 */
#colorbox:focus {
    outline:none !important;
}
#cboxContent button {
    border:none;
}

上記サンプルの出力結果です。