ユーティリティ

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でSlimbox2を導入するには

Slimbox2はjQueryをベースにしているのでfreoには導入しやすいです。
※デフォルトでThickBoxからColorBox変更になったのでそっちで充分かも(^^;)
※2012.12.3現在、最新版のver2.0.4はモバイルで使用すると無効になります。またインラインフレームにも未対応なので管理画面ではColorBoxを使用します。

※2012.12.3に全面的に記事を改訂しました。
  1. Slimbox2 - Download のページより「Slimbox 2.xx」をダウンロードします。
  2. ダウンロードしたものを解凍し、以下のファイルをfreoの次のディレクトリにアップします。
    • js/slimbox2.jsjs/
    • css/slimbox2.csscss/
    • css/closelabel.gifcss/loading.gifcss/nextlabel.gifcss/prevlabel.gifimages/ 内に slimbox2/ を作成してその中へ
    freojsslimbox2.jscssslimbox2.cssimagesslimbox2closelabel.gifloading.gifnextlabel.gifprevlabel.gif
  3. アップした css/slimbox2.css
    url(ファイル名)
    の部分を
    url(http://cccabinet.jpn.org/images/slimbox2/ファイル名)
    に置換(赤字を追加)します。
  4. templates/header.html
    <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}colorbox.css" type="text/css" media="all" />
    の部分を
    <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}slimbox2.css" type="text/css" media="all" />
    に、
    また
    <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.colorbox.js"></script>
    の部分を
    <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}slimbox2.js"></script>
    にそれぞれ変更(緑字赤字に)します。
  5. js/default.js
    //ColorBox
    var extensions = ['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'jpe', 'JPE', 'png', 'PNG'];
    
    var target = '';
    $.each(extensions, function() {
    	if (target) {
    		target += ',';
    	}
    	target += 'a[href$=¥'.' + this + '¥']';
    });
    $(target).colorbox();
    の部分を
    //画像表示スクリプト
    var extensions = ['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'jpe', 'JPE', 'png', 'PNG'];
    
    var target = '';
    $.each(extensions, function() {
    	if (target) {
    		target += ',';
    	}
    	target += 'a[href$=¥'.' + this + '¥']';
    });
    $(target).slimbox();
    に変更(緑字赤字に)します。

ページ移動

関連エントリー

コメント

是清

スマートフォン(Android)閲覧時に「colorbox」が適用されるのですが、Load中のまま読み込まないで固まってしまう減少が多発するので、このSlimbox2に変更をしようと思っています。

config.php
にてユーザーエージェントごとの切り替えがあるので、そこでアンドロイドでもiPhoneのテンプレートを使用するように切り替えています。

ひとまず試みとしてこちらを参考にしてPCのテンプレートで実験しましたらスムーズに利用がかないました。ありがとうございます。

しかしながら、スマートフォンのテンプレートでコチラを適用させようとしますと動きません。
構造はこちらのものと全く同じにしております。
head内の記入も、PCテンプレートで成功したとおりに記述しています。(こちらの例をコピペ)

しかしながら、何度確かめてみても動きませんでした。(直接画像(jpg)を呼び出す形になってしまう)

スマートフォンのテンプーレとではまた何か違うのでしょうか??

ご助言くださりましたら幸いです。宜しくお願いいたします。

  • 2012/11/20 10:27:00

ccc

返事が遅くなってすみません。

そもそもSlimbox2のHPにはデフォルトだとモバイルでは無効だと書いてあります。
"It is disabled by default on mobile devices (Android, iPhone/iPod, Symbian, Windows Mobile, BlackBerry)."の部分。

じゃどうするんだとざっくり調べてみたんですが、どうもわかりませんでしたm(__)m

Lightbox2がjQureyに対応したのでそちらを設置してみてもいいかもしれません。設置の方法は後ほど調べて載せる予定です。

  • URL
  • 2012/11/25 11:40:00

是清

ありがとうございます。
slimboxが使えないということで残念です(^^;)てっきり使えるものと思い込んでいました。jsでも色々なのですね。

そもそもcolorbox がAndoroidでローディングのままの状態にならなければよいのですが…

ひとまずfreo とは別に設置して試してみたのですが、そちらでは読み込みました。freoでおきるエラーなのでしょうか。

自分のところだけでなく、他のfreoユーザーさんのサイトでも画像をクリックしてみましたが、ロード状態で絵が表示されませんでした。本家で問い合わせたほうがよさそうですかね??

  • 2012/11/25 21:24:00

コメント登録

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