jquery.slideViewerPro.1.5.jsをXHTML5（application/xhtml+xml）対応にする

Tweet

今どきで言うとdocomoのサイトのトップページのようなギャラリーができるjQueryプラグインの、jQuery slideViewerProというのがあります。

jQuery slideViewerPro 1.5 [www.gcmingati.net]

ところが、このjQueryプラグインは、サイトがXHTMLで、MIMEタイプがapplication/xhtml+xml（XHTMLとして処理するにはこのMIMEタイプが必須です）の場合、うまく動かない。

というわけで奥さん、パッチです！

Filename: jquery.slideViewerPro.1.5.js.patch

*** jquery.slideViewerPro.1.5.js.old  2012-02-22 23:08:17.000000000 +0900
--- jquery.slideViewerPro.1.5.js  2012-02-22 23:09:02.000000000 +0900
***************
*** 23,30 ****
    }
  });
  jQuery(function(){
!    jQuery("div.svwp").prepend("<img src='images/svwloader.gif' class='ldrgif' alt='loading...'/ >"); //change with YOUR loader image path
! });
  var j = 0;
  jQuery.fn.slideViewerPro = function(settings) {
      settings = jQuery.extend({
--- 23,30 ----
    }
  });
  jQuery(function(){
!    jQuery("div.svwp").prepend('<img src="images/svwloader.gif" class="ldrgif" alt="loading..." />'); //change with YOUR loader image path
! });
  var j = 0;
  jQuery.fn.slideViewerPro = function(settings) {
      settings = jQuery.extend({
***************
*** 97,103 ****
        jQuery(this).next().after("<a href='#' class='left' id='left" + j + "'><span>"+settings.leftButtonInner+"</span><\/a><a href='#' class='right' id='right" + j + "'><span>"+settings.rightButtonInner+"<\/span><\/a>");

        jQuery(this).find("li").each(function(n) {
!             jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");
        });

        jQuery("div#thumbSlider" + j + " a").each(function(z) {
--- 97,103 ----
        jQuery(this).next().after("<a href='#' class='left' id='left" + j + "'><span>"+settings.leftButtonInner+"</span><\/a><a href='#' class='right' id='right" + j + "'><span>"+settings.rightButtonInner+"<\/span><\/a>");

        jQuery(this).find("li").each(function(n) {
!             jQuery("div#thumbSlider" + j + " ul").append('<li><a title="' + jQuery(this).find("img").attr("alt") + '" href="#"><img width="'+ thumbsWidth +'" height="'+ thumbsHeight +'" src="' + jQuery(this).find("img").attr("src") + '" /><p class="tmbrdr">&#160;</p></a></li>');
        });

        jQuery("div#thumbSlider" + j + " a").each(function(z) {

要は、プラグインが挿入しようとしているHTMLは、XMLの文法的に間違っているから入れられないというのです。

パッチ前半の部分は、XMLとしてはimg要素は<img src="～" />と書かなくてはいかんということで、後半の部分は、XHTML5だと文字実体参照として定義されている文字が極端に少なく、&nbsp; というのもXHTML5だとエラーになるので、数値文字参照でノーブレークスペースのコードを直接指定するということです。

こんなに苦労せずとも、ウェブサーバが吐き出すときのMIMEタイプを、application/xhtml+xmlから、text/htmlあたりにすると解決なんですけれども、XHTML5を使っているとはいえなくなるよね。

ともかく、XHTML5として解釈されていると、JavaScriptから挿入するHTMLもXHTML5に矛盾しないようにしなくてはいけないです。めんどくさいが気をつけましょう。

2012.02.22 23:24 投稿　大野 義貴 [XHTML/XHTML5] | 固定リンク |