Posted by をかもと at 2007年12月22日 土曜日

画像だけでなく、各種動画ファイル、YouTubeなどの動画サイト、自サイト内の別ページを lightbox 風に表示するための jQuery用プラグインです。
コンテンツを表示する際のフレームを通常の白枠ではなく、画像を使用したフレームに変更することもできます。
フリーの FLV プレイヤー JW FLV Player を入手することで FLV 形式のファイルを扱えるようになります。

デモは以下のリンクからどうぞ。
jQuery.lightpop.js サンプル

ダウンロード

jQuery.lightpop plugin
続きを読む

サムネイル画像の拡大表示をすることのできる jQuery プラグイン jQuery lightBox plugin を画像ファイル以外にも対応させてみたので、自分用にメモ。

YouTube 対応させたデモは、こんな感じ。
オヤジの心に灯った小さな火 – 里田まい with 藤岡藤巻
息子よ – 藤岡藤巻

動画ファイルのデモは、こんな感じ。
海空中ワイドスターマイン
ツバメ子育て


追記:2007/12/22
jQuery.lightpop.js として、この改造と同等のことができる jQuery 用プラグインを公開しました。
デモはこちら

また、あわせて WordPress で、簡単にこのスクリプトを利用できるようにする WordPress 用プラグイン WP-lightpop も公開しています。
そちらもどうぞ。

Posted by をかもと at 2007年11月16日 金曜日

さて、やっつけ仕事でJavaScript-XPath を jQuery で使えるようにしてみたのだが、コレをどんなときに使おうか?と思い、とりあえずベンチマークを取ってみることにした。

使ったツールは SlickSpeed Selectors Test
Prototype, jQuery, mootools, Ext JS, js of K, cssQuery, findCSS 等の JavaScript framework それぞれとの比較テストを行う。
他の framework との比較のため、CSS セレクタを XPath式に変換して JavaScript-XPath に渡しているが、これは Piro さんが公開している selector.js を利用している。

続きを読む

Posted by をかもと at 2007年11月14日 水曜日

id:amachang がリリースした JavaScript-XPath が、かなり良さげ。
JavaScript-XPath の検索結果を jQuery オブジェクトにして、利用できると便利そうなので、以下のようなコードを書いてみた。

(function(jQuery){
 jQuery.xpath = function(selector, context){
  context = context || jQuery(document);
  var r, res=[];
  context.each(function() {
   r = document.evaluate(selector, this, null, 7, null);
   for(var node_no=0; node_no<r .snapshotLength; node_no++){
    res.push(r.snapshotItem(node_no));
   }
  });
  return new jQuery(res);
 };
 jQuery.extend(jQuery.prototype, {xpath: function(selector){return jQuery.xpath(selector, this);}});
})(jQuery);
var $x = jQuery.xpath;

これで、jQueryオブジェクト.xpath() または $x() を介して JavaScript-XPath 検索結果を jQuery オブジェクトとして利用することができる。
使い方は jQueryオブジェクト.xpath("XPath 文字列") または $x("XPath 文字列", jQueryオブジェクト)
$x() の第2引数は省略可能で、検索範囲を限定したい場合にセットしてください。
...続きを読む

jQuery で右にスライドしながら隠れるサイドバーを実装。
元ネタはこちら
jQuery の強力なエフェクト機能を使えば、こんなのも簡単にプログラミングできちゃいます。

続きを読む