tabulous.js でフォトギャラリー
先日、tabulous.js でナビを作った話を書きましたが、今回は↓こんなフォトギャラリーを。 サムネイルにマウスオーバーで写真とキャプションを切り替え、クリックで拡大表示という仕様です。 前回同様、切り替えとリンクが必要なので、ａタグのIDと切替部分のIDを対応させました。 実装はAdvanced Custom Fields の繰り返しフィールドで。
カテゴリー: 最近の仕事など
閲覧制限の付け方
プラグインで WP Members：投稿・固定ページ全般にアクセス制限を付ける場合。 User Access Manager：特定のカテゴリー・特定の固定ページ・特定の投稿にアクセス制限を付ける場合。 テンプレート上で分岐 特定のカテゴリーの場合、あるいはカスタムフィールドのチェックや入力欄を別にするなど。以下の例は親カテゴリーのIDが1の場合に非ログインユ…
動きのあるタブ切り替え
メニュー部分で画像とテキストを切り替えてリンク、という仕様で、タブ切り替えがいいかな、と、tabulous.js を利用した。 scale、scale up、slide、flip の４つの動きを選べる。 デフォルトではクリックで切り替えだが、リンクを付けたいので、 links.bind(‘click’, を links.bind(&#…
管理画面投稿一覧に項目を追加
Advanced Custom Fields でアップロードした画像を管理画面投稿一覧に表示 functions.php に。フィールド名が image の場合。 add_filter( 'manage_edit-post_columns', 'set_columns' ); function set_columns(…
スクロール時にナビを上部に固定
スクロール時にグローバルナビが常に見えるように、ということで、SMINT を付けたのだけど、accordion のあるページで干渉して、jQuery のバージョンを両方が動くものに変えるとグローバルナビのリンクが効かなくなるという現象が…検索してみるとリンクが効かなくなるという現象はあるようなのだが、解決策は見つからず… http://www.backsla…
ajax で「次のページ」を続きに読み込む
1ページに写真をすべて表示したいが、件数が多くなった時のために分割して「続き」を読み込むようにしたい、ということで、ajax で次のページを読み込むことは出来たのだけど、jquery masonry でレイアウトしているので、読み込みのタイミングでmasonry をリロードしないといけない。 あれこれ色々とやってみたけれど、なかなかスッキリとは解決せず…読み…
jQuery でグリッドレイアウト
大きさの違う写真をきれいに並べたい、ということで、Masonry を実装した。 グリッドレイアウトにしたい親要素と並べたい子要素、グリッドの最小幅を指定するだけで、案外簡単だった。 ただ、最新版はIE8以降対応なので、IE7・6でも動かしたい場合はhttps://github.com/desandro/masonry/archive/v2.1.08.zip …
一覧でカウントを付ける
一覧を表示する際、サムネイル付きでフロートさせる場合など、1つずつ左寄せ右寄せ、とか、4つずつ clearfix で括るとかに必要なカウントの付け方のまとめ。 while 文の場合、while の前で初期化 $post_count = 1; endwhile の前で1つプラス $post_count++; foreach 文の場合も理屈は同じ。 分岐は $p…