2012-07-19

jQuery 導入メモ

動画を表示するのに、jQueryプラグインというのを使ってみました。

jQueryってなんぞ?

jQueryプラグインいろいろ

BloggerにColorBoxを設置

最初試したプラグイン「ColorBox」を入れた時のメモ。
他の同系プラグインを入れるときも手順はこんな感じ。

  • 参考サイト1: ColorBox
  • 参考サイト2: connect2 | lightbox系 jQueryプラグイン「colorbox」
  • 導入してみる:

    1. ColorBoxのサイトへ。
    2. ページ上部「View Demos」で5つのタイプから
      好みのを1つ選ぶ。私は5を選択。
    3. ColorBox.zipをダウンロード。
    4. Zipを解凍し以下をサーバーにアップロード:

      colorboxフォルダ内
      jquery.colorbox.js または jquery.colorbox-min.js
      (min はコメントを省いた軽量版だそう)

      私は5を選んだので、「example5」フォルダ内の
      colorbox.cssimagesフォルダ

      階層は同じとこにね:
      jquery.colorbox.js (jquery.colorbox-min.js)
      colorbox.css
      images
    5. ブログの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>
    6. そのすぐ下に続けて、以下をコピペ(つまりこれも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>
      
    7. htmlの記述は、exampleフォルダ内 index.html を参考に。
      例えばYoutubeを貼りたい時は
      <a class='youtube' href="http://www.youtube.com/embed/xxxx?rel=0&amp;wmode=transparent" title="xxx">Youtube</a>

0 件のコメント: