スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

lightboxで、表示枚数を表す内容(「Image n of m」)がおかしい

原因は、lightboxの仕様とcssの記述方法。

今回、二つのボックスに分けてlightboxを使用するようにしていたが、
レイアウトが同様ということで、css上ではclassで定義を行っていた。

lightboxの仕様では、同一のID,または、Classで定義されたcss内の画像枚数は
トータルで算出されるようになっているようで、
html上は別々に見えても、classで複数個所定義した為、
枚数が合算されてしまった。

対策としては、idで別々の定義とした。

スポンサーサイト

lightboxで、表示位置を表す内容(「Image n of m」)が表示されない。

これは、jQueryの仕様。

複数枚あるときに表示されるようになっている。


LightBoxで「Close」、「NEXT」が表示されない。

原因は、jquery.lightbox-0.5.js内の画像フォルダーへのパスの記述ミス。

ダウンロード直後では、該当部分は以下のようになっている。
(31行目から35行目)

imageLoading:            'images/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
imageBtnPrev:            'images/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
imageBtnNext:            'images/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
imageBtnClose:            'images/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
imageBlank:                'images/lightbox-blank.gif',            // (string) Path and the name of a blank image (one pixel)

当初は、jsファイルを配置したフォルダの配下に、imageフォルダを配置し
その中に画像を配置していたが、画像が表示されなかった。
(デフォルトのまま使用)

上記部分を以下のように記述したところ、解消した。

imageLoading:            '../images/jQuery/lightbox/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
imageBtnPrev:            '../images/jQuery/lightbox/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
imageBtnNext:            '../images/jQuery/lightbox/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
imageBtnClose:            '../images/jQuery/lightbox/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
imageBlank:                '../images/jQuery/lightbox/lightbox-blank.gif',            // (string) Path and the name of a blank image (one pixel)

使用する画像をimageフォルダのjQuery\lightbox配下に格納。




LightBox使用時に、以下のような表示が行われる。

LightBox使用時に、以下の表示が行われる。


lightbox_バグ

原因は、CSS定義のコーディングミス。
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox-0.5.css" media="screen" />
とコーディングしなければならなかったところを
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

と記述されていたため。(CSSのパスの記述ミス)

正しいパスに修正する。

LightBoxについて

jQueryのLightBoxについては、以下のように設置する。

(1):下記URLから、zipファイルをダウンロードする。
leandrovieira.com/projects/jquery/lightbox/

leandrovieira.com/projects/jquery/lightbox/

(2):解凍後、以下のファイル、フォルダを環境に応じた所へコピーする。

jquery.lightbox-0.5.css
imageフォルダー内の画像
jquery.lightbox-0.5.min.js

(3):jquery.lightbox-0.5.min.js内の31から34行目を、
imageフォルダー内の画像を格納したフォルダーへのパスに書き換える。
以下は、その該当部分の抜粋。(修正前)

imageLoading:            'images/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
imageBtnPrev:            'images/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
imageBtnNext:            'images/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
imageBtnClose:            'images/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
imageBlank:                'images/lightbox-blank.gif',            // (string) Path and the name of a blank image (one pixel)

(3):以下を記述する。
(下記は一例である。環境に応じて変える必要があるので、注意すること)
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>  
<script type="text/javascript">  
$(function() {  
  $('#gallery a').lightBox();  
});  
</script> 

<div id="gallery">  
<ul>  
<li><a href="photos/image1.jpg" title="画像1のタイトルが入ります。"><img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /></a></li> 
</ul>


参考URL
www.css-lecture.com/log/javascript/012.html

PHP_SELFの脆弱性

http://itpro.nikkeibp.co.jp/article/COLUMN/20070227/263356/

SCRIPT_NAMEを使用する方法が記述されている。

6/14補足
この回避策には二通りの方法がある。

(1):htmlspecialcharを使用する方法。
htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'UTF-8');
(2):formのactionを空にする方法

今回は(2)を採用することとする。

参考URL

insecurephp.blog.shinobi.jp/Category/2/

PHPで複数のパラメータを受け取る方法

d.hatena.ne.jp/shellcat/20090928

サイト構築中にURLを人為的に変化させたときに、意図しないサイトのトップを表示してしまう。

これは、自分の卒業制作第2弾、Picture'sコーポレートサイトを構築中に
レンタルサーバ上で、URLを手動で変化させたときに、トップに戻るかのテストをしていたところ、
本来ならば、Picturesのトップページへ戻らなければならないのに、
CanCam Infomation Webのトップに戻ってしまった。

原因は、リダイレクト処理のコーディングミス。

修正前は、以下のようなコーディングをしていた。

    //URLを人為的に操作されたときは、トップページへ戻る。
    if (isset($_REQUEST["navi"])) {
    }else{
          $url = "http://".$_SERVER["HTTP_HOST"] . "/index.html";
         header("location:$url");
    }

上記のコーディングだと、ローカル上では正常に動作するが、
サーバ上では、パスが異なるため、
http://www.eno-moto.sakura.ne.jp/index.htmlへ飛んでしまう。

これは、CanCam Infomation WebのURLのため、
そのページが表示されてしまった。

以下のようにコーディングを修正した。

    //URLを人為的に操作されたときは、トップページへ戻る。
    if (isset($_REQUEST["navi"])) {
    }else{
        // ローカル接続時
        if ($_SERVER["HTTP_HOST"] == "localhost") {
          $url = "http://".$_SERVER["HTTP_HOST"] . "/index.html";
        }else{
          $url = "http://".$_SERVER["HTTP_HOST"] . pictures_dir ."/index.html";
        }
       
        header("location:$url");
    }
}

サーバ上では、http://www.eno-moto.sakura.ne.jp/pictures/index.htmlへ
リダイレクトされるように修正した。


header関数を実行したところ、下記のエラーが発生する。

header関数を実行したところ、下記のエラーが発生する。

Warning: Cannot modify header information - headers already sent by (output started at E:\sotsusei\Pictures\html\priwed\wedpri.html:18) in E:\sotsusei\Pictures\html\priwed\wedpri.html on line 93


PHP_headerエラー

原因は、heaeder関数を実行する前に、既に何かしらの出力が行われていたため。
header関数は、出力が行われる前に実行されなければならない。

今回は、以下のようなコーディングを行っていた。

        <?php
            // グローバルメニューから遷移したとき
            if (isset($_REQUEST["navi"])) {
              if ($_REQUEST["navi"] == 'gloval') {
                pictures_menu_pankuzu();
              }else{
                // キーイメージから遷移したとき
                idea_no7_top_pankuzu();     
              }
             }else{
                   $url = $_SERVER["PHP_SELF"] . "/index.html";
                //$url = "http://localhost/index.html";
                header("location:$url");

            }
        ?>

既に出力が行われていたため、エラーとなってしまった。

$url = $_SERVER["PHP_SELF"] . "/index.html";
//$url = "http://localhost/index.html";
header("location:$url");

の部分を<!DOCTYPEの前に記述することにより、解決した。

参考URL
php.net/manual/ja/function.header.php

droppyを使用するとIE6,7で、背景が透過してしまう。

droppyを使用したところ、IE6,7で、以下のように背景が透過してしまう。

droppy_IEバグ

FireFoxでは問題なし。

原因は、IEでは、position:rerativeで指定された領域に画像があると、
絶対配置されているドロップダウンメニューが隠れてしまう(透けてしまう)
という現象が発生する。

IE6,7では、z-indexの解釈に不備があるようで、
この現象が発生するようです。

今回は、以下のようなCSSを記述していましたが、
/* ローカルナビゲーション */
ul#pwed_lonv li {
padding:0px 1px 15px 0px;
position:relative; /* for droppy */
float:left;
}
上記の末尾に、z-index:1;を追記することで回避した。

参考URL
http://www.css-lecture.com/log/javascript/jquery-droppy-menu.html

IE6で絶対値指定したものがずれてしまう。

ie6絶対値指定バグ

原因は、CSSの設定。

該当部分には、以下の設定を行っている。
/* 各メニュー リンク */
.pwed_menu_link {
    position:absolute;
    bottom:10px;
    right:10px;
}

その親ボックスには、以下の設定を行っている。
/* 各メニュー */
.pwed_menu    {
    margin-bottom:20px;
    padding:0px 20px 20px 20px;
    position:relative;
}

bottomとpaddingの設定が干渉したため、
IE6では落ちてしまったと思われる。

pwed_menu_linkのbottomを削除する事により回避した。

改行コードを取り除く命令

改行コードを取り除く命令
$check_data["body"] = ereg_replace("\r|\n","",$check_data["body"]);  // 改行コード削除

IEでテーブル内で指定したボーダー(トップ)が消えてしまう

ieでcommnetボタンに指定したボーダーが消えてしまう。
(テーブル内で指定したボーダー(トップ)が消えてしまう。)

今回は、tableタグを使用せず、ulを使用し、float inline要素
を使用することにより回避した。

ieは、td内の要素に対しborderを指定するとこのような現象になるようである。
おかしくなった要素に position:relative; を加えると回避可能。

参考URL
d.hatena.ne.jp/kusakari/20071101/1193883020
enjoyjob.blog116.fc2.com/blog-entry-227.html

PHPでメッセージBoxを表示

PHPでメッセージボックスを表示する例
www.php.net/manual/ja/ref.w32api.php

PHPでのログイン・ログアウト処理について

PHPログインログアウト処理参考URL
2inc.org/blog/166.html

PHPのグローバル変数について

グローバル変数について
www.phpmanual.jp/language.variables.scope.html

HTML特殊文字について

html特殊文字について
参考URL
e-words.jp/p/r-htmlentity.html

ダブルコーテーションについて

mysql_real_escape_string関数などでエスケープした"(ダブルコーテーション)は、
stripslashes関数で戻す必要がある。

urldecode関数の注意点

urldecode関数について。
$_REQUEST,$_GETで使用される変数については、すでにでコード済みであるので、
urldecode関数を使用する必要はない。使用すると予期せぬ結果となる場合がある。

参考URL
jp2.php.net/manual/ja/function.urldecode.php

mysql_real_escape_string関数でエスケープされる文字

mysql_real_escape_string関数でエスケープされる文字
\x00(null)、\n(CR)、\r(LF)、'(シングルコーテーション)、"(ダブルコーテーション)、\x1a(eof)


mysql_real_escape_string関数でエラー発生

mysql_real_escape_string関数を使用しようとしたところ、
以下の警告エラーが表示された。
Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: Access denied for user 'ODBC'@'localhost' (using password: NO) in E:\sotsusei\html\blog\blog_lib.php on line 519

Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: A link to the server could not be established in E:\sotsusei\html\blog\blog_lib.php on line 519

原因は、connectを実行していないため。
connectを実行するようにする。

参考URL
oshiete1.goo.ne.jp/qa5627098.html

IE6でフロート落ちが発生する

IE6で、フロート落ちが発生してしまう。

ie6フロート落ち例

FireFox、IE7では発生しない。

IE6のボックス拡張バグによるものと思われる。

Paddingを調整することにより回避した。

5/24追記
IE6には、widthにborderで指定した幅を含んでしまうというバグがある。
これも一因である。

jQueryのdroppyでプルダウンが設定されない

原因は、htmlのコーディングミス。

droppyでは、プルダウンさせる部分のリストのコーディングは、
以下のようにしなければならない
(プルダウンさせる部分は、親のリストに挟まないとならない)

        <ul id="com_gnavi">
            <li>
                <a href="#"><img src="images/gnv_photo.png" class="btn" alt="写真撮影グローバルナビゲーション" /></a>
                <ul>
                    <li><a href="#">商品出張撮影</a></li>
                    <li><a href="#">商品預かり撮影</a></li>
                    <li><a href="#">イベント出張撮影</a></li>
                    <li><a href="#">カメラマン時間チャージ</a></li>
                </ul>
                </li>

今回、
<a href="#"><img src="images/gnv_photo.png" class="btn" alt="写真撮影グローバルナビゲーション" /></a></li>
                <ul>
                    <li><a href="#">商品出張撮影</a></li>
                    <li><a href="#">商品預かり撮影</a></li>
                    <li><a href="#">イベント出張撮影</a></li>
                    <li><a href="#">カメラマン時間チャージ</a></li>
                </ul>

とコーディングしたため、プルダウンが設定されなかった。

コーディングを修正したところ、正常に動作した。

IE6で、jQueryのdroppyを使用したところ、グローバルナビゲーションが消える

原因は、CSSの定義ミス。

グローバルナビゲーション全体を定義するCSSで、
widthを指定しないとグローバルナビゲーションが消えてしまった。

FireFox、IE7では問題なし。
FireFoxでは、widthの指定がなくても表示されたため、
widthを削除した。このため、IE6で表示させたときに、
グローバルナビゲーションが表示されなかった。

今回は、以下のような定義をしていた。
#com_gnavi {
position:relative;
width:840px;
clear:both;
}

width:840px;の部分を復活させたところ、ie6でも表示された。

ページ先頭のマージンがIEとFirefoxでとられ方が違う

ページの両脇を囲むようなデザイン(backgroundで枠を読み込ませるような)のページで
先頭のマージンをとろうとすると、IEでは正常に表示されるのに、
FireFoxでは、枠の先頭からマージンが設定されてしまう。

原因は、marginで設定したため。
paddingで設定したところ、問題なく表示された。
プロフィール

e.swan

Author:e.swan
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。