Add Litebox Pluginによる文法エラーの解消

何で今まで気がつかなかったんだろうという場所で文法エラーが発生している事に気がつきました。

Line 80, Column 103: character “[” is not allowed in the value of attribute “rel”

…e_2011-12-24-6-7-36.png” rel=”lightbox[2481]”><img src=”http://cefa.sakura.ne.…

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

何とかならないモノかと調べていたところ、Lightbox 2 and XHTML 1.1 validation | simon.schönbeck.dkの記事にたどり着きました。 “[” は”_” で置き換えられそうな雰囲気なので、Lightbox Plugin の add-lightbox/lightbox-auto.php を触ります。

function addlightboxrel_replace ($content)
{   global $post;
        $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox['.$post->ID.']"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

ここの場所を次のように書き換えてみます。

function addlightboxrel_replace ($content)
{   global $post;
        $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox_'.$post->ID.'"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

これで解決できました。

序にDTDの指定について警告が出ていたので修正。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">

やはり偶にはValidatorを実行しないといけないなあ…と反省のクリスマスイヴでした。

反省したばかりでアレなのですが、CSS2.1の文法にも問題ありとの事。

-moz-opacity と opacity を指定している事が問題になって引っ掛かっているようです。「CSS3では対応しているよ!」とValidatorも回答をしてくれているのですが、過渡期ということもあるのではずしておきましょう。gblitebox/css/lightbox.css の次の行をコメントアウトしておきます。

#overlay{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 90;
        width: 100%;
        height: 500px;
        background-color: #000;
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
        }
#overlay{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 90;
        width: 100%;
        height: 500px;
        background-color: #000;
/*      filter:alpha(opacity=60);*/
/*      -moz-opacity: 0.6;*/
/*      opacity: 0.6;*/
        }