これは質問ではなく、私があなたに伝えたいアドバイスです。何時間にもわたってグーグルでテストした後、ライトボックスで機能するソリューションが見つかりませんでした. 理由はわかりませんが、タイトルにリンクを適用できませんでしたhtmlentities()
。
そのため、私は独自の解決策を思いつきました。これは単なる回避策です。私は自分自身に本当に満足していませんが、それが私にとってうまくいく唯一の方法です. したがって、私と同じ問題を抱えている場合は、次のコード行を追加してください。
次のコード行を検索しlightbox.js
ます (私のファイルでは 277 行目でした)。
$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
これを次のように置き換えます。
$lightbox.find('.lb-caption').html('<span onclick="window.location.href=\'http://yourdomain.com\'">'+this.album[this.currentImageIndex].title+"</span>").fadeIn('fast');
私は何をしましたか?
title 属性を表示するために が追加されているので.lb-caption
、元の出力を要素にラップし、クリック イベントを特定の場所にバインドするだけです。
問題: title 属性全体をラップしたため、title 属性全体がリンクになってしまいます。
カーソルを取得するには: ポインター; css と標準のリンク レイアウトで効果を得るには、タイトルをリンクにするだけです。このようにして、htmlentities()
リンクをデコードする必要はありません。
例:
<a href="img/image1.png" rel="lightbox[roadtrip]" title="<a class"lightboxlink">This link opens a new page</a>
別の問題は次のとおりです。現在、リンクは静的です。(リンクの href を使用していないため)。
解決:
リンクに1 つの 属性を追加する$_GET
には、数行を修正するだけです。あなたがしていることは、あなたの画像呼び出し(その部分)に属性「rev」を追加することです。
の代わりに<a href="img/image1.png" rel="lightbox[roadtrip]" title="<a class"lightboxlink">This link opens a new page</a>
、
あなたは今使用しています(「rev」属性を追加してください):
<a href="img/image1.png" rel="lightbox[roadtrip]" rev="test" title="<a class"lightboxlink">This link opens a new page</a>
今Javascriptの部分に...
検索する:
if ($link.attr('rel') === 'lightbox') {
this.album.push({
この部分を次のように置き換えます。
link: $link.attr('href'),
title: $link.attr('title'),
と
link: $link.attr('href'),
title: $link.attr('title'),
rev: $link.attr('rev')
数行下に行くと、リンク: $….、タイトル: $…. の同じ部分が表示されます。その部分を次のように置き換えます。
link: $(a).attr('href'),
title: $(a).attr('title'),
rev: $(a).attr('rev')
次に、ラッパーを変更する必要があります: (279 行目に戻ります。$_GET 部分の前は 277 行目です)。
$lightbox.find('.lb-caption').html('<span onclick="window.location.href=\'http://yourdomain.comindex.php?page=contact&t='+this.album[this.currentImageIndex].rev+'\'">'+this.album[this.currentImageIndex].title+"</span>").fadeIn('fast');
'+this.album[this.currentImageIndex].rev+'
静的部分の代わりに追加します。
このメソッドを繰り返して、無限の$_GET
パラメーターを追加し、画像呼び出しに新しい属性を追加するだけで、説明で行ったように JavaScript を変更できます。
これは、タイトルの問題のリンクを解決するための非常に複雑で珍しい方法ですが、私のスクリプトで機能する唯一の方法です。
私は誰かを助けたことを願っています!:)