Flex Slider をa-blog cmsのユニットグループで利用する
Flex Slider という jQuery を利用した画像スライダーを a-blog cms の本文部分であるユニット内で活用できるようにする事の提案を書いてみます。トップページに使うような事は皆さんされているんじゃないかと思います。その際には、バナーモジュール等を利用する事も多いんじゃないでしょうか。
Snippet - jQuery Syntax Highlighter を使えるようにしてみました
jQuery Syntax Highlighter Snippet を a-blog cms で使えるようにしてみました。
テキストユニットの＜pre＞タグを拡張し、コンフィグの設定に pre.html を追加する事で、＜pre class="html"＞が使えるようになり、Syntax Highlighter が使えるようになります。少し、標準のCSSのままで利用すると、blog.css の設定と被っておかしくなってたり、デフォルトのままの指定だとスタイルがランダムになってたりしますが、簡単に使えそうなのでオススメしておきます。他にも同様の JavaScript として
のようなものもあります。
スクロール時に画像の読み込みを開始する Lazyload
今までの a-blog cms では jQuery のバージョンが 1.2.6 という事で、最新のプラグイン的なものが動作しないでいたので、あまり導入のチャレンジをしていませんでしたが、a-blog cms 1.3.0 になって jQuery も最新版になった事から気にせず使えるようになったのが、とても嬉しいですね。
今回のエントリーでは、jQueryのプラグインで見えてない部分は画像の読み込みをしないでおいて、スクロールして表示されるようになってから読み込む「Lazyload.js」というのを試してみましたので、その実装方法をメモっておきます。
画像拡大時のjsをhighslideからprettyPhotoに
a-blog cms では、画像の拡大で利用するJSはHighslide のものを利用していますが、Lightbox で表示させたい人もいるのではないかと思います。
そんな中で、私としては prettyPhoto がお気に入りだったりします。理由としては、表示時に画面サイズが狭かったら、収まるように表示してくれるところがイイと思ってます。
以下に、その実装方法を書いておきます。
company3で試すjs-post_inculde機能
a-blog cms 1.3.0b では、JavaScriptが分からない人でもAjax機能を実装する事が簡単に出来る機能が用意されております。その方法を簡単に書いておきますので、よろしければ以下の手順のようにお試し下さい。
サイト内検索した時にリロード無しにメインのコンテンツエリアを書き換える
修正するファイルは、/themes/company3/include/subInfo.html のみで、最初は以下のような感じになっております。
<!-- エントリー検索 開始▼▼ -->
<div id="freewordSearch" class="menuListBox">
<h2>検索</h2>
<form action="" method="post" name="searchForm" id="searchForm">
<input type="text" name="keyword" value="%{KEYWORD}" size="15" />
<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
<input type="hidden" name="tpl" value="/search.html" />
<input type="hidden" name="bid" value="%{BID}" />
</form>
</div>
<!-- エントリー検索 終了▲▲ -->
