Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8664

slick+lightboxのモーダルでかっこいいパターン表示を作るまで

$
0
0

既にslick実装済みの環境に、モーダルを追加して、なにかのレイアウトとかデザインをかっこよく数パターン表示できるようにした際のまとめ。

モーダルって何?

以下がわかりやすいですかね。クリックするとその画像だけの別ページが最前面に表示されてくれるイメージ。
https://goworkship.com/magazine/modal-windows-mobileui/

手順

wordpress環境だけど、プラグイン使わずにlightbox実装したい。

重くなっちゃうので、なるべくプラグインは使わない思想のもと。
lightboxはめちゃくちゃお手軽で簡単なので、以下の記事を参考に実装。
ぐぐるといくつか出てきますが、これが一番わかりやすかったです。
https://www.axisjp.co.jp/news/1247

lightboxは以下からDLですね.
https://github.com/lokesh/lightbox2/releases

で、上記参考ページのとおりに実装したんだけど、
slickを当初横スライドにしていたはずなのに、縦並びになってしまう・・・。

モーダルがなにか悪さしてるんでしょう。
ぐぐる。

jsの読み込みタイミングがポイント

slickとlightbox-plus-jquery.min.jsをどちらもfooter.phpで読むこむように指定していたけども、
jsの読み込み順序で、縦並びになっちゃったり上手く作用してくれないことがあるらしい。
jsが干渉する、干渉してしまう、っていうのはこういうことなんだな。学び。

http://creatornote.nakweb.com/%E3%80%90%E8%A7%A3%E6%B1%BA%E3%80%91slick%E3%81%A7%E3%81%AA%E3%81%9C%E3%81%8B%E7%B8%A6%E3%81%AA%E3%82%89%E3%81%B3%E3%81%AE%E3%81%BE%E3%81%BE%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%99%E3%82%8B/


Viewing all articles
Browse latest Browse all 8664

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>