▼すべてのカテゴリーを見る

【PHP・CSS】複数枚の写真や画像をランダムに散らす仕組みをJavaScript無しで自作する

plan_phhoto_library_sample

みやびです。先日、PLOGの新しいコンテンツとして「PLANフォトギャラリー」を作成しました。そのリンクバナーを動的かつある程度のデザインで制作できないかなぁと思い、ランダムCSS出力をベースとしたPHP関数として作成してみました。読み込むたびに画像と配置が変化するのが特徴です。

みやびさん、なぜJavaScript(JS)で制作しなかったのですか?

何を隠そう、私はJSが苦手なのである!以上!!

…というのは冗談ですが、ちょっと重くなりそうだし、カスタマイズが面倒な気がしたのでやめました。数枚の画像ならいいですが、何十枚とか一度に要素足したりすると、少し古いAndroidさんは耐えられなそうな気がしたからです。

それに、ある特定のディレクトリに表示したい画像を格納している場合、PHPだと一発で取りに行けますが、JSだとファイル内に書き込んでおいたり、別ファイルでリストを作成してから読み込むなど、少々面倒そうですね。

また、PHPで関数として作成しておけば、表示したい枚数を引数に渡すだけで気軽にボリュームを調整できることもメリットです。外部JSファイルとして読み込む際にパラメーターを渡すのもナンセンスかと。もちろんWordPressに組み込むのも楽ちん。

写真を乱雑に散らしたように表示する自作関数(show_dispersed_photos($num))

仕組みとしては至ってシンプルです。

  1. 画像URLのリストを読み込む
  2. リストをシャッフルする
  3. imgタグのsrc属性につっこんでループ表示
  4. 表示したそれぞれの画像の特徴を指定するためのランダムCSS生成関数の呼び出し(create_dispersed_photos_css($num))

ループ処理に慣れてない人でも、そこまで混乱することはないと思います。エコーエコーして遊ぶだけです。

PHPプログラム全文

2つの関数を分けてそれぞれご紹介します。

使い方

写真を乱雑に散らしたように表示する関数(show_dispersed_photos($num))

それぞれの画像の特徴を指定するためのランダムCSS生成関数(create_dispersed_photos_css($num))

簡単に解説します

上からさらーっと読んでいけば何やってるかはなんとなく分かるかと思います。

解説すべきところを挙げるとすれば、画像リストの読み込み方法とリンクマスク、それからランダムCSSの概要についてでしょうか。

画像リストの読み込み

まず画像リストについてですが、上の関数では、関数の内部に配列として画像URLを直接書き込んでいます

これだと変更が面倒なので、

のようにファイル一覧を取得した方が便利かと思います。

注意点として、file_get_contents()にURLを指定してpreg_match_all()やpreg_replace()を用いて画像リストを動的に作成する場合に、自分など実行中のファイルを対象とした読み込みはできません

全ページで表示したりWordPressでサイドカラムに組み込む際には、上述した「自分を読み込む」行為に当たりますので、無限ループして動作しなくなるので注意してください。

リンクマスクについて

こんな単語は無いと思いますが、要は上で挙げた<div id=’dispersed_photos’></div>要素をrelativeとして、縦横100%かつz-index上位の<div>要素をabsoluteとしてカバーをかけるということです。

これに<a>要素でリンクをつけることにより、表示したランダム写真のどこをクリックしても発リンクされるようになります(後ろの要素・画像には触れません)。

ランダムCSS概要について

下の関数内で、$rand_なんちゃらという変数をいくつか定義していますが、それぞれ自由に変更してOKです。

縦横($rand_x, $rand_y)を30%~70%にしていますが、これを0%~100%にすると、完全に枠からはみ出る画像が出現します。ある程度中央に寄せたいので、デフォルトはこれにしてます。

それから、角度($rand_d)を-45度~45度にしていますが、写真が180度裏返ってしまうと何の写真か認識できなくなってしまう可能性があるので、デフォルトは一応これ。

z-index要素をランダムにする変数($rand_z)はそこまで必要性が無いかもしれないのですが、念のため

上から?下から?左から?右から?をランダムにすることも必要です($rand_xp, $rand_yp)。理由としては、abusoluteの位置はrelativeの左上を0, 0とした相対位置であり、その数値が意味するものは、absolute属性を付加した要素の左上の角の位置を基準に比較しているということです。

つまり、すべてtop: ?%; left: ?%; とした場合、どちらも0%はの場合は左上に写真が出ますが、どちらも100%の場合は右下の枠外にはみ出した位置に表示されます

そのため、これらの偏りを排除するために、$rand_xp, $rand_ypが必要であるということです。少し数学のお話になってしまいましたね。

WordPressにショートコードを用いて実装する方法

今回ご紹介したPHPプログラムはWordPressにも実装可能です。

実装方法

まずWordPressのテーマディレクトリ配下にあるfunctions.phpに上記の関数を追加します。

その際に、これらをサイドカラムや固定記事内で表示できるようにショートコードとして登録するため、以下のコードもfunctions.phpに追記してください。

そしてWordPressで表示させたい部分に以下のショートコードを記入します。

ここまで追記したら、最初に追加した関数内に準備しておいたWordPress用コード部分を編集します。

そして使い方ですが、ショートコードshow_dispersed_photos num=7の数値が表示する枚数になるので、自由に変更してください。

show_dispersed_photosとすると、デフォルトの5枚が反映されます。

コード丸パクリで使ってみてね

以上です。このプログのサイドカラム(スマホだと下のほう)にも実装しています

何回かリロードしてもらえば、その変化がわかると思いますので、ぜひ試してみてください!

 

面白かったら、役に立ったら、何も感じなかったら「いいね!」してね!

仕事そっちのけで記事を書いた人

プログラムしたりトレードしたりスケートしたりけん玉したりするひと。趣味はトライアンドエラー。優しいときもあれば厳しいときもある。寝不足を基本とする。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です