1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

既に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が干渉する、干渉してしまう、っていうのはこういうことなんだな。学び。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?