Home > スポンサー広告 > jQuery FancyBox をFC2ブログに導入

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
Only inform the site author.

Trackback+Pingback: -

TrackBack URL for this entry
http://tktools.blog120.fc2.com/tb.php/87-3f79b7c1
Listed below are links to weblogs that reference
スポンサーサイト from ツールで遊ぼう。

Home > スポンサー広告 > jQuery FancyBox をFC2ブログに導入

Home > ブログ > jQuery FancyBox をFC2ブログに導入

jQuery FancyBox をFC2ブログに導入

  • Posted by: おためしくん
  • 2011-02-09 Wed 18:53:50
  • ブログ
ブログの画像ポップアップは今まで Lightbox 2 を利用していました。
画像へリンクを張っている <a> タグに rel="lightbox" 属性を
いちいち書き込むのがめんどいのです。そこで
jQuery FancyBox FC2ブログに導入してみました。

http://fancybox.net/
fancyboxdl.jpg

よりダウンロードして展開。

jquery.easing-1.3.pack.js
→ easing.js
jquery.mousewheel-3.0.4.pack.js
→ mousewheelpack.js
jquery.fancybox-1.3.4.pack.js(圧縮版)かjquery.fancybox-1.3.4.jsのどちらかを
→ fancybox.js
jquery.fancybox-1.3.4.css
→ fancybox.css
に名前を変更する。

名前を変えた4つのファイルとfancyboxフォルダ内の20個の画像ファイルを
FC2ブログ・ファイルアップロードツールよりアップする。



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/easing.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/mousewheelpack.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://アップロードしたURL/fancybox.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a[href$='.jpg']").fancybox({
'overlayShow' :true,
'overlayOpacity':0.8,
'transitionIn' :'elastic',
'transitionOut' :'elastic'
});
});
</script>



アップロードしたURLは、
下記の画像のパスを調べるを参考に
http://fc2blogmanual.blog60.fc2.com/blog-entry-77.html

http://blog-imgs-42.fc2.com/t/k/t/tktools/fancybox.js
このブログですと、こんなアドレスになります。

正しくアップロードしたURLを記載したもの(四ヶ所)を上のscriptに書き換えて
からテンプレート管理HTML編集で

<head>

←この<head> </head>の間に書き込んで
←更新ボタンを押す


</head>


でいけました。
speedin
speedout
がIE8では動かない気がするので、とりあえずサンプルどおりのscriptで我慢。
これで、ブログ内の昔の画像も今後の画像も特に面倒な記述をすることなくjpgならば
ポップアップするようになりました。ポップアップ後、マウスホイールで画像が切り替わります。

スポンサーサイト

Comments: 0

Comment Form
Only inform the site author.

Trackback+Pingback: 0

TrackBack URL for this entry
http://tktools.blog120.fc2.com/tb.php/87-3f79b7c1
Listed below are links to weblogs that reference
jQuery FancyBox をFC2ブログに導入 from ツールで遊ぼう。

Home > ブログ > jQuery FancyBox をFC2ブログに導入

Return to page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。