[php+js]phpでswiperを大量生産する

前の記事の続きというか。

やりたいこと

こんな感じでディレクトリをキーにしてその中の画像を配列にした多次元連想配列を作ったのでそれをswiper.jsに突っ込んで、1ページ内にディレクトリごとに分けたスライドを設置しまくるっていうのをやる。

やっていくこと

作った配列をいい感じに展開して任意の形に書き出していく。
別でデザインを組んでおいて法則っていうか形を決めておく。

 

ディレクトリごとにメイン画像として1枚表示しておいて、それをクリックしたらスライドがポップアップで表示されるってのを作りたいから、大枠はこんな感じ。

popupの中はこんな感じ。
スライドと一緒にページャーのサムネも付ける。

js部分はこう。
ページャーのことがなければ手間もなかったんだけどね。

HTMLの方でも書いてるけど、スライドを複数設置するから各所で連番「01」を付けてるのがポイント。
foreachで展開しつつこれらを書き出していく。

配列の作成と準備

同じパターンでやるなら流用できるけど、考え方を理解する方で活用したのが今後を考えると良いと思う。

前回のおさらいを含めて。
画像を格納してるディレクトリをキーにして入ってる画像名の配列を紐付けてる。前回の記事ではキーが「01」だったと思うけど、こっちでは使い勝手優先で「./images/01/」みたくなるようにした。

で、array_keys()に突っ込んでそのキーだけを取り出して配列化。
見直してみたら$dirArrayからでも$keyArray生成できるじゃんって感じだけど、慣れるまでは順を追ってやんないと混乱するし、まあいいよねと。
これで準備完了。

配列の展開

展開しつつ書き出しをやっていく。

html部分

$cntKeyで連番を生成してる。
上の方のhtmlでは「01」ってやってるのにこれだと「1」になるからダメなんだけど狙い的に間違ってないから良しとする。

「foreach($keyArray as $keys){}」でキーの配列を展開。
「foreach($imagesArray[$keys] as $fileNames){}」で各キーが持ってる配列を展開。
これでうまいことやっていく。

「if($fileNames === reset($imagesArray[$keys])){}」で最初だけ処理。
$cntKeyみたいに連番振ってn番目でなんちゃらってやろうとしても効かなかったからそうしてる。基礎がないからなんで動かないのか分からないまんま。

JS部分

swiper.jsの決まりごとで<body>の最後に記述しろってなってるのでまた1から展開。
htmlの方で理解できたらこっちは応用までいかないレベルの内容なので超簡単。

まあでもこれに関しては全部同じ動作でいいからってとこがある。
物によって処理を変えたいとかになってくるとifの振り分けがクソだるい。

参考

PHP – foreachで最初と最後の処理を制御する – Qiita

コメント

タイトルとURLをコピーしました