jQuery・Lightboxプラグイン slick lightbox をカスタマイズ [IE9以上]

150925_001

IE8 以下では一切使えません。

カルーセルスライダー  slick を、Lightbox化したプラグイン slick lightbox は、レスポンシブサイトで利用するのに便利。
デフォルトでは微妙な点をカスタマイズして、実務で使えるように修正。

検証済みブラウザとOS

  • IE 9~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 9
  • Android 4.1 / 5

 

必要最小限のファイル群にする

Bower や Git などの直接関係ないファイルを削除して HTML / CSS / JS ファイルのみにする。
SCSS や fonts はお好みで。

css
slick.css / slick-lightbox.css / slick-theme.css
images
画像ファイル
js
slick.js / slick-lightbox.js
index.html

 

画像の横幅を100%にする

slick-lightbox.css
max-width: 90%; を 100% に修正。
ついでに max-height: 90%; を 100% に修正。

 

キャプションに width を指定

slick-lightbox.css 真ん中あたり
.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-caption に max-width を追加。

 

キャプションを左寄せにする

slick-lightbox.css 真ん中から少し下
.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick.slick-caption-dynamic .slick-lightbox-slick-item .slick-lightbox-slick-caption の text-align: center; を left

 

矢印を変更

slick-theme.css
slick-prev:before / slick-next:before {content: “”;}

 

矢印のフォント変更

slick-theme.css
@font-face をコメントアウトして、Google Fonts を使う。
デモは「Open Sans」を変形させている。

 

矢印のフォントサイズ変更

slick-theme.css
.slick-prev:before, .slick-next:before {} に font-size を追加。

IE/Mac/iOSで表示がおかしくなったら、slick-theme.css の .slick-prev, .slick-next {} に height: 100%; を追加し、top を調整。

 

矢印の位置を変更

slick-lightbox.css
.slick-lightbox .slick-prev {left} / .slick-lightbox .slick-next {right}

 

表示のフェード速度を変更

slick-lightbox.css
.slick-lightbox {transition: opacity .5s;}

 

オーバーレイの透明度を変更

slick-lightbox.js
285行目あたりの rgba()

 

コンテンツ側のスクロールを固定する

slick-lightbox.js


 

しかしまぁ、jQueryプラグインってなぜこうも余計な装飾だらけなのか…?
先方からカスタマイズの要望がある場合は、別料金を貰わないと割りに合わないこと必至。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。