hazi.log » jQuery

Shadowbox.js を設置した

admin — Sun, 17 Apr 2011 17:16:47 +0000

jQuery 1.4.x系にした関係で今まで利用していた、jQueryのプラグインが使えなくなっていた。
なので、今回新しい Shadowbox.js というのを利用することに。

通常、リンクにrel="shadowbox" を書き加えると、ポップアップ表示されるようになるが、いちいち rel を追加するのは手間なので、外部JSファイルに下記のコードを書き加えた。

Shadowbox.init({
    skipSetup: true
});
Shadowbox.setup("div.post a[href$='.jpg'], div.post a[href$='.png'], div.post a[href$='.gif']", {
    modal: true
});

上記のコードは div.post 内の画像リンク全てに Shadowbox.js を適応するコードです。

外部リンクに自動的に新しいウィンドウリンクを付ける

admin — Sat, 25 Jul 2009 21:55:09 +0000

外部へリンクする際良く使用する target=”_blank” はxhtmlでは禁止されているので、どうせなら外部へのリンクは「新しいウィンドウで表示」のアイコンを別途付けてしまおう！

ということで、jQueryを使って新しいウィンドウで表示するアイコンを付ける物を書いてみました。

$(document).ready(function(){

	var checkArea = 'div.post-inner a:not([href^="http://hazisarashi.com"]),';
	var anchorObject = '';
	var className = 'newWin'

	$(checkArea).each(function(){
		var target = this;
		var img = $(target).find("img").length;

		var url = $(target).attr('href');
		if ( url != '' && img == 0 ){
			$(target).after( $(''+anchorObject+'').click(function(){ window.open(url, "_blank", "status=yes,scrollbars=yes,directories=yes,menubar=yes,resizable=yes,toolbar=yes"); return false; }) );
		}

	});

})

これだけです。
頭の変数を修正することで、どこのサイトでも使える用になります。

checkAreaは、適応したいリンクの jQuery Selectors
anchorObjectは、表示させるアイコンのHTML
classNameは、リンクのclass名

必要に応じて、class名を元に外部CSSなどで margin などを記述してください。

WordPress で Facebox を使う

admin — Sat, 25 Jul 2009 21:23:25 +0000

今日は、ブログの調整を色々行っていました。
今回は画像のポップアップをjavascriptで実装する方法に関してです。

今までは prototype.jsベースの lightview.js を使っていたのですが、そろそろ prototype.js を脱しようと思い、jQuery.js ベースの Facebox を使うことにしました。

Facebox の導入はとても簡単でした。
大半のこういったスクリプトはWordPressプログラムとして、提供されているので試してみましたがダメでした。

何がダメかというと、オプション設定が無い為です。
Faceboxはどのリンクをポップアップにするかを簡単に記述出来る様になっているので、オプションが無い＝プラグインソースを修正する必要がある = プラグインの意味がない！という結論に至りました。

なので、手動でファイルをダウンロード。

まずは js と css 内の画像へのリンクを修正する必要があるので、修正しファイルをFTPでアップロード。
あとはヘッダー~~又は、フッター~~に下記のソースを書き加える。

訂正：タグ内でしかタグ使えないのにフッターとか書いてました…。訂正致します。

基本的には以上で終わりです。

5行目の部分が自動でポップアップにするリンクを定義してる部分になります。
ここは、「,」区切りで記述してあり、例えば

div.post-inner a[href$=".jpg"]

などは、CSSの記述と同じで div.post-inner 内の .jpg で終わるアドレスにリンクしているアンカーに対して、ポップアップを有効にすることを意味しています。

詳しくは、jQueryの記述方法をご覧ください。

参考サイト：jQueryでLightviewみたいなFacebox.js