ベースキャンプ名古屋 jQueryの日をやってよかった！
1月17日(木)に ベースキャンプ名古屋 jQueryの日 2013/01 というイベントを開催しました。幹事不在のまま、とりあえず予定を入れてみたところ、他の日と比べると何をするとか、集まりの一体感が無い感じで残念ではあったのですが、開催に大きな意味がありました。
Flex Slider をa-blog cmsのユニットグループで利用する
Flex Slider という jQuery を利用した画像スライダーを a-blog cms の本文部分であるユニット内で活用できるようにする事の提案を書いてみます。トップページに使うような事は皆さんされているんじゃないかと思います。その際には、バナーモジュール等を利用する事も多いんじゃないでしょうか。
初心者向けのjQuery勉強会をするよ
マークアップエンジニアさん向けの jQuery 勉強会を始めようと思っています。目的としては、社内のマークアップエンジニアのスキルアップのためなので社内勉強会というところなのですが、一般の方の参加もできるような事を考えています。
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 がお気に入りだったりします。理由としては、表示時に画面サイズが狭かったら、収まるように表示してくれるところがイイと思ってます。
以下に、その実装方法を書いておきます。
