ユーティリティ

2017年12月

- - - - - 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

エントリー

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」にしたいときは

続きを読む

ページ移動

関連エントリー

コメント

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

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)