freoでSlimbox2を導入するには
- 2010/06/08 16:25
- カテゴリー:画像拡大表示
- タグ:freoテンプレート, freo画像
Slimbox2はjQueryをベースにしているのでfreoには導入しやすいです。
※デフォルトでThickBoxからColorBox変更になったのでそっちで充分かも(^^;)
※2012.12.3現在、最新版のver2.0.4はモバイルで使用すると無効になります。またインラインフレームにも未対応なので管理画面ではColorBoxを使用します。
※2012.12.3に全面的に記事を改訂しました。
- Slimbox2 - Download のページより「Slimbox 2.xx」をダウンロードします。
- ダウンロードしたものを解凍し、以下のファイルをfreoの次のディレクトリにアップします。
- js/slimbox2.js ⇒ js/ へ
- css/slimbox2.css ⇒ css/ ヘ
- css/closelabel.gif、css/loading.gif、css/nextlabel.gif、css/prevlabel.gif ⇒ images/ 内に slimbox2/ を作成してその中へ
freo ┣ js ━ slimbox2.js ┣ css ━ slimbox2.css ┗ images ━ slimbox2 ┳ closelabel.gif ┣ loading.gif ┣ nextlabel.gif ┗ prevlabel.gif
- アップした css/slimbox2.css の
url(ファイル名)
の部分を、
に置換(赤字を追加)します。url(../images/slimbox2/ファイル名)
- 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>
- 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)を呼び出す形になってしまう)
スマートフォンのテンプーレとではまた何か違うのでしょうか??
ご助言くださりましたら幸いです。宜しくお願いいたします。