JQuery Plugins

今はタグ打ちなんてしなくてもできるねーと思っていたら、まさかのTumblrのテーマカスタマイズでのタグ打ち。 この機会にいろいろメモっておく。

まずはJQuery

JQuery<head>...</head>の間で呼び出しておく。 最新はGoogle Hosted Librariesで確認。
プラグインの呼び出しはこの指定より下に。

画像などを拡大表示

画像だったりコンテンツだったりをにゅっと開く。LightBoxとか言いますねぇ。
fancyBox-test

JQueryを追加したあと、fancyBoxも追加しておく。バージョンはfancybox cdnjsにて確認。

でもって<script>内に追加。 使うときはこんな感じで。
画像以外にも使えるので詳しくはドキュメントを参照。

トップに戻る

上記のJQueryとFont Awesome1を追加し、判りやすいところ(ナビメニュー近辺とか)に追加。

CSSに追加。デザインはお好みで。

あとはスクリプトを追加で完了。

無限スクロール

Infinite Scroll

JQueryのあとに、Infinite Scrollを呼び出し jquery-infinitescrollで最新を確認。2

設定。 ロード中や完了のメッセージを変えたり、アニメーションGIFを置き換えてみたり。

Infinite Scroll + Masonry

Infinite ScrollMasonryimagesLoadedの相性が良いらしい。
記事がグリッドに並んでいて、スクロールすると記事一覧の続きがぱらぱらっと表示されていく3
参照 その1 その2

でもって設定。

Popな見出し

cssで実現!見出しで使えるタイトルロゴのデザイン参考。

See the Pen Pop Lettering by Laurel (@laurel-treetop) on CodePen.

  1. Fonts参照。 

  2. もしかして3.xでは動かない? あと、場合によっては最後にinfinitescrollを呼び出さないと、他の(なにかしらのプラグインとか)と干渉することがある。 

  3. 説明ムズイ… 

Leave a Comment

Leave a Comment