freoカスタマイズ集

【2012/10/24 13:22】1.の部分を templates/header.html の変更から js/default.js の変更に修正しました。

もし前の方法で使用されている方は、templates/header.html の

{literal}
<script>
  $(document).ready(function(){
    $("a[rel='start']").colorbox({slideshow:true});
  });
</script>
{/literal}

の部分を削除して1.の編集をしてください。

1. jsファイルの変更
   • js/default.js（PC用）の下から2行目にある

     $('a.colorbox').colorbox({ width:'80%', height:'80%', iframe:true });

     の下に、

     $("a[rel='start']").colorbox({slideshow:true});

     を追加します。
   • js/iphone/common.js（iPhone用）の106行目あたりにある

     $('a.colorbox').colorbox({ width:'90%', height:'90%', iframe:true });

     の下に、

     $("a[rel='start']").colorbox({slideshow:true});

     を追加します。
2. こちら の方法で挿入したすべての画像に「リンクの挿入や編集」ウィンドウの「上級者向け」「専門的」タブで「このページのターゲットに対する関係」「ページからターゲットの関係」のところを「Start」にします。
   
3. 登録した記事から画像をクリックすると、
   
   のように画像右上が表示されます。

   自動切り替えを停止するには、画像右上の []（[] にカーソルを近づけると [] に切り替わります）をクリックします。

   自動切り替えを再開するときは、画像右上に配置されている []（[] にカーソルを近づけると [] に切り替わります）をクリックします。

   スライドを閉じるには、画像右上の [] をクリックします。

   ※実装してみた感じ ⇒ こちら

4. 表示時間を変更したい場合は、1.の加入部分を、

   $("a[rel='start']").colorbox({slideshow:true, slideshowSpeed:3000})

   に（赤字を追加）します。数字はデフォルト値は2500なので適宜調整してください。
5. 画像が切り替わる際に一旦画像をフェードアウトさせたい場合は、1.の加入部分を

   $("a[rel='start']").colorbox({slideshow:true, transition:"fade"});

   に（赤字を追加）します。
6. 繰り返し表示させたくない場合は、1.の加入部分を

   $("a[rel='start']").colorbox({slideshow:true, loop:false});

   に（赤字を追加）します。

   4.5.6.は併記してもOKです。
   その他の表記方法については colorboxのサイト を参照してください。

「このページのターゲットに対する関係」のところが「start」だと分かりにくいので「slideshow」にしたいときは

続きを読む