jQueryってなんぞ?
jQueryプラグインいろいろ
- 個人的に気に入ってる10のLightbox系jQueryプラグイン及び、
その特徴まとめ - かちびと.net - ColorBox
最初これにしたのだけど、
ニコニコ動画に対応するにはどうすればいいかわからなかった… - jQuery.lightpop.js | dogmap.jp
こっちはニコニコ含め、色んな動画に対応しててるらしい。
でもプラグインのDLページが工事中? - jQuery.createvideo Plugin
これを使ってみることに。
BloggerにColorBoxを設置
最初試したプラグイン「ColorBox」を入れた時のメモ。他の同系プラグインを入れるときも手順はこんな感じ。
- 参考サイト1: ColorBox
- 参考サイト2: connect2 | lightbox系 jQueryプラグイン「colorbox」
- 導入してみる:
- ColorBoxのサイトへ。
-
好みのを1つ選ぶ。私は5を選択。 - ColorBox.zipをダウンロード。
- Zipを解凍し以下をサーバーにアップロード:
colorboxフォルダ内
jquery.colorbox.js または jquery.colorbox-min.js
(min はコメントを省いた軽量版だそう)
私は5を選んだので、「example5」フォルダ内の
colorbox.css と imagesフォルダ。
階層は同じとこにね:
jquery.colorbox.js (jquery.colorbox-min.js)
colorbox.css
images
- ブログのhead内に以下をコピペ。
それぞれcss、jQuery本体、jsファイルを読み込む記述。
ピンクのとこは、さっき自分がアップロードしたファイルの場所に書き換えます。<link media="screen" rel="stylesheet" href="xxx/colorbox.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="xxx/jquery.colorbox.js"></script>
- そのすぐ下に続けて、以下をコピペ(つまりこれもhead内)。
<script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".group1").colorbox({rel:'group1'}); $(".group2").colorbox({rel:'group2', transition:"fade"}); $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"}); $(".group4").colorbox({rel:'group4', slideshow:true}); $(".ajax").colorbox(); $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); $(".inline").colorbox({inline:true, width:"50%"}); $(".callbacks").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>
- htmlの記述は、exampleフォルダ内 index.html を参考に。
例えばYoutubeを貼りたい時は<a class='youtube' href="http://www.youtube.com/embed/xxxx?rel=0&wmode=transparent" title="xxx">Youtube</a>
0 件のコメント:
コメントを投稿