初心者向けのjQuery勉強会をするよ
マークアップエンジニアさん向けの jQuery 勉強会を始めようと思っています。目的としては、社内のマークアップエンジニアのスキルアップのためなので社内勉強会というところなのですが、一般の方の参加もできるような事を考えています。
選択されているタグ : jQuery
タグを絞り込む : a-blog ablogcms Ajax API appleple Google highslide lightbox prettyPhoto カスタマイズ
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>
<!-- エントリー検索 終了▲▲ -->
lightbox から prettyPhoto に変更しました
Lightboxを利用する設定になっていましたが、prototype の利用をやめ、jQueryを利用するようにし、prettyPhoto を利用する事にしてみました。
prettyPhoto では、画面のサイズが小さな時にサイズをあわせて拡大してくれるようで、縦長の画像とかがはみ出してしまう事がないのがよかったかもしれません。デフォルトの角丸をもう少し小さなものにしたいところですね。
確認用サンプル画像
ユーノスロードスター
スマートカブリオ
ニュービートルカブリオレ
