自問自答です。
BloggerでjQuery使えるかな？
（外部サイトに置いたCSSやJavascriptファイルをBloggerから利用できるかな？）
と思っったのでやってみました。
結論
できました。
以下が、サンプルのjQuery lightBox プラグインです。
下の画像をクリックすると、lightBox風に拡大画像がビヨーンとなります。
使用ファイル
2011/1/15 追記
動画も扱いたくなったため、lightpopへ移行しました。そのため、lightboxは使用していません。lightpopを使用した投稿→
http://tinypicotips.blogspot.com/2011/01/is06_15.htmljQuery lightBoxはこちらからダウンロードさせていただきました。
ダウンロードしたZIPのうち、使用するファイルは以下の4ファイルです。
- css/jquery.lightbox-0.5.css
- images/lightbox-btn-close.gif
js/jquery.js- lightpop移行ついでにgoogleさんのjquery.min.js へ移行
js/jquery.lightbox-0.5.js- jquery.lightpop-0.8.5.min.jsへ移行
今回はNext / Prevを使用しないので、CLOSE画像だけを使います。
＊jquery.lightbox-0.5.jsをいじってNext / Prevが表示されないようにしています。lightpop移行により細工やめました。
使用サイト
ここはBloggerですし、お金をもありませんから、Bloggerの運営者であるGoogleさんのサービスで無料で利用できるGoogleサイトを利用します。
以前の投稿で作ったサンプルのtinypicotipsサイトをそのまま使います。
ファイルの保存先
Googleサイト→[その他の操作]→[サイトを管理]→[添付ファイル]として以下の4ファイルをアップロードしました。
2011/1/15
jquery.js → googleさんのホスティングしているjquery.jsに変更。
jquery.lightbox-0.5.js → lightpopへ変更。https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.css https://sites.google.com/site/tinypicotips/lightbox-btn-close.gif https://sites.google.com/site/tinypicotips/jquery.jshttps://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.jshttps://sites.google.com/site/tinypicotips/jquery.lightpop-0.8.5.min.js
表示する画像ファイル
CADLIBのJIS画像（picasaに保存）を使います。
最初に表示する（小さい）画像：
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6MkcTXxqPS-AgwYy8OqiTNb9fHrYydCBl45vi7F5Zg8J8AxXpSdgS5wyroDvVMCKP74F1eG-wOfs9vdN8g470fa5SgrWw_VD3iCXXrm4I7_MWXmacZYfi9aoSyDpCRT2sqWWV35VMXAE/s400/jis.PNG
クリック後表示する（大きい）画像：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6MkcTXxqPS-AgwYy8OqiTNb9fHrYydCBl45vi7F5Zg8J8AxXpSdgS5wyroDvVMCKP74F1eG-wOfs9vdN8g470fa5SgrWw_VD3iCXXrm4I7_MWXmacZYfi9aoSyDpCRT2sqWWV35VMXAE/s720/jis.PNG
ファイルの編集
jsファイルをそのまま使用するとパスが違うため、CLOSE画像が表示されません。そのため、jquery.lightbox-0.5.jsの以下の箇所を変更しました。2011/1/15
オプションでできました(^^;
lightbox→lightpopへの移行よりオプションに変更しました。imageBtnClose: 'images/lightbox-btn-close.gif'
↓imageBtnClose: 'https://sites.google.com/site/tinypicotips/lightbox-btn-close.gif'
$('a[rel*=lightbox]').lightpop({imageBtnClose:'https://sites.google.com/site/tinypicotips/lightbox-btn-close.gif'});
NextとPrev画像はfunction _set_navigation() の中身すべてをコメントアウトして表示されないようにしました。
2011/1/15
lightpop移行時にパスが無効であれば表示されなかったので、以下のような細工はせず、何も記述せずに放置してあります。function _set_navigation() {
/*
$('#lightbox-nav').show();
．．．．．．．．．
}
*/
// Enable keyboard navigation
_enable_keyboard_navigation();
}
Bloggerテンプレート
Bloggerのテンプレートのheadタグの中に以下を埋め込みます。headタグ内ならどこでも良いと思います。
2011/1/15
lightpopへ移行したため、全面書き換えしました。<head>
．．．．．．．．．<link href='https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/tinypicotips/jquery.js' type='text/javascript'/>
<script src='https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.js' type='text/javascript'/>
<script type='text/javascript'>$(document).ready(function() {$('a[rel*=lightbox]').lightBox();});</script>2011/1/15 変更
．．．．．．．．．
</head>
投稿
画像部分は以下のhtmlタグを記述します。
<a href="大きい画像のパス" rel="lightbox">
<img border="0" src="小さい画像のパス">
</a>具体的には以下を記述しています。
|<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6MkcTXxqPS-AgwYy8OqiTNb9fHrYydCBl45vi7F5Zg8J8AxXpSdgS5wyroDvVMCKP74F1eG-wOfs9vdN8g470fa5SgrWw_VD3iCXXrm4I7_MWXmacZYfi9aoSyDpCRT2sqWWV35VMXAE/s720/jis.PNG" rel="lightbox"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6MkcTXxqPS-AgwYy8OqiTNb9fHrYydCBl45vi7F5Zg8J8AxXpSdgS5wyroDvVMCKP74F1eG-wOfs9vdN8g470fa5SgrWw_VD3iCXXrm4I7_MWXmacZYfi9aoSyDpCRT2sqWWV35VMXAE/s400/jis.PNG"></a>そうすると画像をクリックした時にビヨーンと拡大画像が表示されます。
嬉しかったので、もう一度最初と同じ画像を貼っておきます。クリックしてみてください。
これからはいろいろ使っていこうかと思います。
0 件のコメント :
コメントを投稿