スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery FC2 Plugin

jQueryプラグインとしてFC2ブログ用のライブラリを制作しています。
今のところ、ページ送り・アイキャッチ画像の設置・スムーズスクロールをサポートしています。

ダウンロード

目次

ページ送り

指定した要素下にページ送りリストを設置します。

JavaScript

$(function() {
	$('.pagination').fc2().pager();
});

HTML

<div class="pagination" data-total="<%total_pages>" data-current="<%current_page_num>"></div>

オプション

$(function() {
	$('.pagination').fc2().pager({
		'range': '10', // 表示幅
		'totalData': 'total', // ページ合計用のdata
		'currentData': 'current', // 現在のページ用のdata
		'dataName': 'pagination', // キャッシュ用データ
		'skip': true, // 1ページ目と最後のページのリンクを表示するかどうか
		'prev': "\u00ab", // 前のページへのリンクの文字列
		'next': "\u00bb", // 次のページへのリンクの文字列
		'className': null // <ol>にclassを追加したい場合は指定
	});
});

アイキャッチ画像

アイキャッチ画像の設置をサポートします。

JavaScript

記事の本文を囲む要素に対してeyecatch()してやります。

$(function() {
	$('.post > .body').fc2().eyecatch();
});

HTML

記事の本文を囲む要素にdata-enoを設定します。

<div class="body" data-eno="<%topentry_no>" data-title="<%topentry_title>">
	<%topentry_body>
	...
</div>

アイキャッチ画像のURLの設定の仕方

記事の本文(追記でなく本文)の中に次のようなタグを記述します。

<aside data-eyecatch="画像URL"></aside>

記事ページ用の画像と他で表示する画像を分けたい場合は、 画像のURLを%%で区切って記述してください。

<aside data-eyecatch="記事ページ用の画像URL%%記事ページ以外の画像URL"></aside>

オプション

$(function() {
	$('.post > .body').fc2().eyecatch({
		'className': 'img-eyecatch', // <img>のclass
		'linkClassName': 'link-eyecatch', // 記事ページへの<a>のclass
		'enoData': 'eno', // 記事番号用のdata
 		'titleData': 'title', // 記事タイトル用のdata
		'dataName': 'eyecatch', // キャッシュ用data
		'fade': false, // アイキャッチ画像をフェードインして表示するかどうか
		'fadeSpeed': 300 // フェードインのスピード(ms)
	});
});

簡単なJavaScriptとHTMLコードを追加するだけでアイキャッチと連携したカルーセルを設置することができます。

カルーセル

JavaScript
$(function() {
	$('.carousel').carousel();
});
	
HTML
<!--index_area-->
<section id="index-carousel" class="carousel slide fade">
  <div class="carousel-inner">
    <!--topentry-->
    <div class="item" data-target="<%topentry_no>">
      <a href="<%topentry_link>" rel="bookmark" title="<%topentry_title>"><img class="img-eyecatch" alt="<%topentry_title>" /></a>
      <div class="carousel-caption">
        <h4><a href="<%topentry_link>" rel="bookmark"><%topentry_title></a></h4>
        <p><%topentry_discription></p>
      </div>
    </div>
    <!--/topentry-->
  </div>
  <a class="carousel-control left" href="#index-carousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#index-carousel" data-slide="next">&rsaquo;</a>
</section>
<!--/index_area-->

スムーズスクロール

アンカーリンクをスムーズスクロールするようにします。

$.fc2().scroll(300); // 引数はスクロールスピード(ms)

TODO

  • SNSボタン用のmetaデータを追加するメソッドの作成する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。