jQuery・Lightboxプラグイン slick lightbox をカスタマイズ [IE9以上]
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
- 12345678910111213141516171819202122232425262728293031323334<head><link href="css/slick.css" rel="stylesheet"><link href="css/slick-theme.css" rel="stylesheet"><link href="css/slick-lightbox.css" rel="stylesheet"></head><body><section id="block-slick"><div><a href="images/ph_001.jpg" data-caption="キャプション" class="thumbnail"><img src="images/ph_001.jpg" width="800" height="500" alt=""></a></div><div><a href="images/ph_002.jpg" data-caption="キャプション" class="thumbnail"><img src="images/ph_002.jpg" width="800" height="500" alt=""></a></div><div><a href="images/ph_003.jpg" data-caption="キャプション" class="thumbnail"><img src="images/ph_003.jpg" width="800" height="500" alt=""></a></div><div><a href="images/ph_004.jpg" data-caption="キャプション" class="thumbnail"><img src="images/ph_004.jpg" width="800" height="500" alt=""></a></div><div><a href="images/ph_005.jpg" data-caption="キャプション" class="thumbnail"><img src="images/ph_005.jpg" width="800" height="500" alt=""></a></div><!-- /#block-slick --></section><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="js/slick.js"></script><script src="js/slick-lightbox.js"></script><script type="text/javascript">$('#block-slick').slickLightbox({caption: 'caption'});</script></body>
画像の横幅を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」を変形させている。1<link href='//fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>12345.slick-prev, .slick-next {font-family: 'Open Sans', sans-serif;transform: scaleX(0.5);-webkit-transform: scaleX(0.5);}
矢印のフォントサイズ変更
- 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
- 1var SlickLightbox, defaults, scrollY;12345scrollY = $(window).scrollTop();$("body").css({position: "fixed",top: -scrollY});12$("body").attr("style", "");$("html, body").prop({scrollTop: scrollY});
しかしまぁ、jQueryプラグインってなぜこうも余計な装飾だらけなのか…?
先方からカスタマイズの要望がある場合は、別料金を貰わないと割りに合わないこと必至。
コメントを投稿する