で、jQueryについて調べていると、かつて画像うにょーん化をした際に使ったLightboxが、jQueryのプラグインとしてあるじゃないですか。
これを使うと"prototype.js"を使わなくて良いのかな、と思うと、だいぶブログの表示が軽くなるはず。何しろ"prototype.js"が159KB、"jquery～.js"が89KB、合計248KBものライブラリを表示のたびに読み込んでいるわけだから、そりゃ遅いわ。"prototype.js"を使わなくて良いのなら、3分の1くらいのサイズになるので軽くなるでしょ。
というわけで、ラベルを階層化したいところではありますが、ちょっと寄り道して表題の作業に取り掛かってみようと思います。
- まずは、jQuery Lightbox Pluginをダウンロードしてきます。左側にダウンロードリンクがありますので、zipファイルをダウンロードします。必要なファイルはまるっと一式入っています。
- zipファイルを展開し、「css」フォルダ及び「images」フォルダをGoogleサイトにアップロードします。このフォルダ構成のままアップロードしたと仮定すると、例えばimages内のgifファイルのURLは、「https://sites.google.com/site/[sitename]/home/images/[fiename].gif」のようになると思います。
- 残った「js」フォルダ内のファイルに少々細工をします。画像うにょーん化の際にも同じような作業をしましたが、これらのファイルはGoogleサイトに保存しますので、「jquery.lightbox-0.5.js」の中のgifファイルの記載がある部分を2で確認したURLにそれぞれ書き換えます。
(「jquery.lightbox-0.5.js」の場合、7箇所ありました) - 3で編集したファイルを保存し、「js」フォルダをGoogleサイトへアップロードします。これでjQuery Lightbox Plugin側の設定は完了です。
- 最後にブロガー側の準備です。ブロガーのメニューから「デザイン」 --> 「HTMLの編集」を選択します。
さて、jQuery導入後までのテンプレートの内容をまとめると、以下のようになっているのが現在の状況です。これをいじくっていきますが、テンプレート編集の際はバックアップをダウンロードしておくのはお約束で。
<head> <!--Lightbox2用の記述--> <script src='https://sites.google.com/site/forlightbox2/prototype.js' type='text/javascript'/> <script src='https://sites.google.com/site/forlightbox2/scriptaculous.js?load=effects,builder' type='text/javascript'/> <script src='https://sites.google.com/site/forlightbox2/lightbox.js' type='text/javascript'/> <link href='https://sites.google.com/site/forlightbox2/lightbox.css' media='screen' rel='stylesheet' type='text/css'/> <!--Lightbox2用の記述--> <!--jQuery用の記述--> <script src='https://sites.google.com/site/forjquery/jquery-x.x.x.min.js' type='text/javascript'/> <script> jQuery.noConflict(); </script> <!--jQuery用の記述-->
これにjQuery Lightbox Pluginの設定を追記していきます。
まず、今回はjQueryでLightboxを動かすのが目的ですので、「prototype.js」で動かすために記述していた部分は削除しちゃいます。でもって、「prototype.js」と「jquery-x.x.x.min.js」の競合も無くなりますので、競合を回避するおまじないも不要。消しちゃいます。消すのはハイライト部分です。
<!--Lightbox2用の記述--> <script src='https://sites.google.com/site/forlightbox2/prototype.js' type='text/javascript'/> <script src='https://sites.google.com/site/forlightbox2/scriptaculous.js?load=effects,builder' type='text/javascript'/> <script src='https://sites.google.com/site/forlightbox2/lightbox.js' type='text/javascript'/> <link href='https://sites.google.com/site/forlightbox2/lightbox.css' media='screen' rel='stylesheet' type='text/css'/> <!--Lightbox2用の記述--> <!--jQuery用の記述--> <script src='https://sites.google.com/site/forjquery/jquery-x.x.x.min.js' type='text/javascript'/> <script> jQuery.noConflict(); </script> <!--jQuery用の記述-->
あとは、jQuery Lightbox Pluginの設定を記述して出来上がりです。ここはハイライト部分を追記します。
<!--jQuery用の記述-->
<script src='https://sites.google.com/site/forjquery/jquery-x.x.x.min.js' type='text/javascript'/>
<!--jQuery用の記述-->
<!--jQuery Lightbox Plugin用の記述-->
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/[sitename]/home/
css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="https://sites.google.com/site/[sitename]/home/
js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<!--jQuery Lightbox Plugin用の記述-->
これで、全ての準備が整いました。
うにょーんとしたい画像を<div id="gallery"></div>で囲むことで、うまいことうにょーんとなってくれます。以前に記述していた<a href="～">の中の「title="～"」は、そのままキャプションとして使えるみたいです。嬉しくなって今までの投稿で乗っけた画像全部にjQuery版うにょーんを施してみました。疲れた。まーでも気持ちサイト読み込みも速くなったような気が。
寄り道してしまいました。ラベルはまだまだ先が長そうです。つーか進捗無し。。。
0 件のコメント:
コメントを投稿