画像をスライドさせるjQueryスライダー「bxslider」。画面サイズに合わせて拡大縮小機能もついているので、非常に便利で私もよく使っております。
ただ横幅一杯に使う場合はどうしても画像が大きくなりがちで、その場合ページの読み込みに時間がかかり、一瞬2枚目以降の画像が表示されてしまうことがあります。
これを簡単に解決するためは、jQueryで2枚目以降の画像を表示する時間を遅らせます。
html
<ul class="bxslider"> <li><img id="img1" src="http://test.com/test1.jpg" /></li> <li><img id="img2" src="http://test.com/test2.jpg" /></li> <li><img id="img3" src="http://test.com/test3.jpg" /></li> </ul>
css
#img2, #img3 {
display:none;
}
jQuery
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
autoHover: true,
pager: false,
speed: 1200,
pause: 6000,
mode: 'fade'
});
$('#img2,#img3').delay(3000).css('display','block');
});
要は
「最初2枚目以降の画像を非表示にして、サイトが読み込まれるまで待ってから表示」
するって形。
具体的には
1, 指定画像(ここでは#img2,#img3)を最初display:noneで非表示にしておく
2, delayで数秒後(ここでは3000=3秒)に表示させる
※wordpressの場合はカプセル化するか、$をjQueryに変更。
サーバーのエラーログに
File does not exist: folder/none, referer:http://domain.jp/
とやたら出力される。
気になって当該サイトのFirebugのエラーを見たところ、cssファイルからのリンクエラーが出ていた。
そのcssには
#container {
background-image: url(none);
}
と背景色は白、画像は「無し」を指定してある。
実はこれが問題で、背景を無しと正しく指定するには
#container {
background-image: none;
}
としないとサーバーが404エラーを返してしまう。
こちらに詳しい事が書いてあります。素敵。
何がダメって、Dreamweaverで背景無しを指定しようとcssスタイルをいじくったら、平気で上のソースを吐く事。
もうそろそろエディタ変えないとやばいな。
困ったこと↓
特定のmarginを指定している時だけ、なぜか100％Dreamweaverがフリーズする。
phpのインクルード先に該当コードがある時に、require_onceをコメントアウトしてもフリーズする。
（コメントにしていても読みに行ってしまうのか？）
原因↓
Dreamweaver CS5の現在、そのままではclearfixがデザインビューに反映されない。
clearfixを使用してデザインビューを見ると、親Boxのheightが効いていないのに加え、CSSスタイルパネルが延々と表示の更新が繰り返されたり、上記のような特定のcssでフリーズする。
対処↓
clearfixにoverflow: hidden;を追加する。
clearfix分の表示も整い、フリーズも消えた。
cssでショートハンドを使って背景を指定した場合、背景が消えることがある。
その場合はリセット用CSSに{background: transparent;}が指定されてないか確認。
IE６ではこのリセットのあとにショートハンドで背景色を指定すると、反映されないバグがある。
対策・該当箇所をショートハンドで背景を指定しない。
レンタルサーバーhetemlで共有SSlを使うと、urlがhttps://ssl***.heteml.jp/ユーザーネーム/フォルダ/となり、cakephpをインストールてもcssやimgなどが表示されない。
この場合、app/webroot/index.phpを書き換えることで解決する。
てっく★ゆきろぐ Rev2様に解決法が書いてあるのだが、馬鹿（と書いてボクと読む）にも分かるようにしておく。
以下を６１行目から最後までコピペ。(ver1.3.7)
if (!defined('WEBROOT_DIR')) {
define('WEBROOT_DIR', basename(dirname(__FILE__)));
}
if (!defined('WWW_ROOT')) {
define('WWW_ROOT', dirname(__FILE__) . DS);
}
if (!defined('CORE_PATH')) {
if (function_exists('ini_set') && ini_set('include_path', CAKE_CORE_INCLUDE_PATH . PATH_SEPARATOR . ROOT . DS . APP_DIR . DS . PATH_SEPARATOR . ini_get('include_path'))) {
define('APP_PATH', null);
define('CORE_PATH', null);
} else {
define('APP_PATH', ROOT . DS . APP_DIR . DS);
define('CORE_PATH', CAKE_CORE_INCLUDE_PATH . DS);
}
}
// define img/css/js
define ( "URLBASE" , "/../ユーザー名/フォルダ名/" ) ;
define('IMAGES_URL', URLBASE . 'img/');
define('CSS_URL', URLBASE . 'css/');
define('JS_URL', URLBASE . 'js/');
if (!include(CORE_PATH . 'cake' . DS . 'bootstrap.php')) {
trigger_error("CakePHP core could not be found. Check the value of CAKE_CORE_INCLUDE_PATH in APP/webroot/index.php. It should point to the directory containing your " . DS . "cake core directory and your " . DS . "vendors root directory.", E_USER_ERROR);
}
if (isset($_GET['url']) && $_GET['url'] === 'favicon.ico') {
return;
} else {
$Dispatcher = new Dispatcher();
$Dispatcher->dispatch();
}
これでユーザー名とフォルダ名を書き換えれば、共用SSLでもいける。