エントリー

freoのentry(またはpage)で複数画像をcolorboxのスライドショーで表示する場合

【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」にします。
    ファイル 22-1.jpg
  3. 登録した記事から画像をクリックすると、
    ファイル 22-2.jpg
    のように画像右上が表示されます。

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

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

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

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

  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」にしたいときは
  1. tiny_mce/plugins/advlink/link.htm の197行目あたりの
    <td><label id="rellabel" for="rel">{#advlink_dlg.rel}</label></td>
    <td><select id="rel" name="rel"> 
      <option value="">{#not_set}</option> 
      <option value="lightbox">Lightbox</option> 
      <option value="alternate">Alternate</option> 

    の部分を、

    <td><label id="rellabel" for="rel">{#advlink_dlg.rel}</label></td>
    <td><select id="rel" name="rel"> 
      <option value="">{#not_set}</option> 
      <option value="slideshow">Slideshow</option> 
      <option value="lightbox">Lightbox</option> 
      <option value="alternate">Alternate</option> 
    に変更(赤字を追加)します。
  2. 1.の js/default.js の編集を次のように変更します(赤字部分が変更箇所)。
    $("a[rel='slideshow']").colorbox({slideshow:true});
  3. 2.の「リンクの挿入や編集」ウィンドウの「上級者向け」「専門的」タブで「このページのターゲットに対する関係」「ページからターゲットの関係」のところで「Slideshow」が選択できるようになるので選択して「更新」ボタンをクリックします。
    ファイル 22-3.jpg
    ※もし「Slideshow」の選択が表示されない場合は一旦ブラウザのキャッシュを削除してから作業をしてください。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed