2011-07-26 5 views
2

私はこれに似た質問を閲覧しましたが、どこかで答えられている場合には、私が必要とするものを見つけたわけではありません。RELでHTML5を検証する

私は、画像を表示するために私のWebページにJavaスクリプトのライトボックスを使用して開始しているとのリンクの上に置くように言われています:<a href="..." rel="lightbox"></a>

これはHTML 5バリデータが "と言っているがライトボックス内の画像は、現在開いていることを意味しlightbox 'は明らかに許可されたリンクタイプではありません。

ライトボックスのJavaスクリプトに必要なリンクを関連付けて検証するにはどうすればよいですか?

おかげでたくさん(彼らはすべての問題を引き起こさないように)事前に、 マット

答えて

6

どちらか

  1. は、検証エラーを無視するか、のようなものへrel="lightbox"から

  2. 変更data-lightbox="true"。 「data-」で始まる属性はすべてHTML5で許可され、有効です。

+0

好ましくは後者。 'rel =" lightbox "'はゴミです。 – Quentin

+0

お返事ありがとうございます。 私は 'data-lightbox'メソッドを実装しようとしましたが、まっすぐにはうまくいかなかったので、' data'タグについてもっと読む必要があると思います。 あなたが言うように、もう一方の方法はゴミですそれを使用しないことをお勧めします! – matt

+0

私はxhtml1を使い、rel = "lightbox"に切り替えました。もう一つは私にエラーを与える – onurcano22

0

マシューの答えは機能しますが、ライトボックスのソースコードもカスタマイズする必要があります。このような変更の例を次に示します。http://wasthere.com/lightbox2/js/custom-lightbox.js - これが動作します(例:http://wasthere.com/asia/en/show-entry/141/kerala---munnar-(india).HTML5の検証に合格します。上記のソースファイルのコメントをチェックしてみましょう。ライトボックスイメージに関連するすべての "rel"属性をサイトの "data-rel"に変更するだけです。

敬具、 ルーカス

-1

のsiのLO solucione:

ModificoエルHTML:

<a href="img/2.jpg" data-rel="lightbox" title="" > 

Modificoエルのjavascript:私はそれを検証し助けた何

jQuery(function($) { 
     $("a[data-rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { 
      return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
     }); 
    }); 
} 
0

、上記の内容に基づいています:

Javascriptを

function externalLinks() 
{ 
    if (!document.getElementsByTagName) return; 
    var anchors = document.getElementsByTagName("a"); 

    for (var i=0; i<anchors.length; i++) 
    { 
     var anchor = anchors[i]; 

     if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") 
     { 
      anchor.target = "_blank"; 
     } 

     if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "lightbox") 
     { 
      anchor.setAttribute('data-lightbox','lightbox'); 
     } 
    } 
} 
window.onload = externalLinks; 

HTML

<a href='assets/newsTemplate/07_350wtd.jpg' rel='lightbox' title='DumbThumb'><img src='assets/newsTemplate/07_350wtd.jpg' alt='dumb'></img></a> 
関連する問題