freyjaMasonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜皆さまこんにちは!厳しい残暑の候、いかがお過ごしですか?本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜をお送りします。前回の記事はこちらです。前回の設定だけでうまくいった方もいらっしゃるかも知れません。私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました(笑)そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。前回までの設定だけではPC、スマホ共に、galleryをクリックすると画像が重なって表示されてしまいました。リロードすると直るのですが、これでは自分以外見ることが出来ません。こんな感じに表示されていました。jQueryプラグインimagesloadedです。これは画像の読み込みが完了したら、その後の処理を実行する、というものです。こちらから→imagesloadedプラグインをダウンロードします。前回作ったjsフォルダに保存します。(これで今、jsフォルダには3つのファイルが入っている状態です)次に前回と同じように、対応する固定ページのphpファイル(ここではpage-gallery.php)のget_header();の上に、imagesloaded.pkgd.min.jsを呼び出す一行を書き足します。?>さらに、FTPへ行って前回作ったgallery用のjsファイル(ここではmasongallery.js)を以下のように書き直します。});これで、きちんと画像が読み込まれるようになりました。新たに書き足した内容について少し解説しますと、gutter-sizerというのは、画像の右横の隙間の幅になります。w2というのは画像に付けるクラス名です。jQueryのtoggleClass()で、画像をクリックすると.galleryに.w2が適用され画像が拡大し、再度クリックすると.w2が外れ元の大きさに戻る、というものです。どんな動きかはgalleryで画像をクリックしてみてくださいね!ちょっとした動きが出て面白いですよ(^^)参考までに私のgalleryのcssの一部です。コンテナの中でひとつの画像の占める幅。この%だと4つの画像が並べて表示できる。%を変えてためしてみよう。masonryのこちらの解説も参考にしてください。ピンタレスト風になったかな?gallery完成!ちなみに、固定ページにサイドバーウィジェットなどを表示させたく無いという時は、その固定ページのphpファイルの中にあるget_sidebar();をコメントアウトすればokです。このgalleryのページでは、page-gallery.phpの中のget_sidebar();をコメントアウトして非表示にしています。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。