2

prettyPhoto で、写真の説明を(を囲むタグに"title"追加) 以外から取得するにはどうすればよいですか? 画像にカーソルを合わせると、私のウェブサイトに醜い html が表示されます。これは、開いたときに prettyPhoto によってのみ表示および表示されます (したがって、html が含まれています) が、ツールヒントとしては表示されません。<a><img>

私が考えていたのは、イベントにプラグインすることでしたが、関連するのはchangepicturecallbackだけで、そこから現在の写真要素にアクセスする方法がわかりません。

jQuery自体に何かあるのかもしれませんが、どこにあるのか少し迷っています。

どんなアイデアでも役に立ちます。

ありがとう、イゴール

4

8 に答える 8

10

うまくいけば、これはあなたの質問に答えるのに遅すぎることはありませんが、私は最近、あなたが求めていることをするためにきれいな写真のコードを変更しなければなりませんでした.

アンカーの 'title' 属性から説明を設定する行があります。必要な場所から説明を取得するように変更できます。説明を格納するアンカーの下に <p> タグを作成することにしました。

説明の由来を変更するには、きれいな写真のソースを変更する必要があります。次のような行を見つけます。

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));

少なくともバージョン 3.1.3 では 152 行目にあるはずです。検索と置換ツールを使用して「pp_descriptions」を検索するだけです。

これを次のように変更します。

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).find('p').text()) ? $(n).find('p').text() : ""; }) : $.makeArray($(this).find('p').text());

"(this).attr('title')" を ".find('p').text()" に変更すると、"title" 属性を使用する代わりにアンカー内の <p> タグが検索されます。サイトに表示されないように、CSS で <p> タグを非表示にすることをお勧めします。

これで、html マークアップは次のようになります。

<a href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <p>This is the Description</p>
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>
于 2012-03-02T14:42:36.330 に答える
1

私もこの問題を経験していて、この記事を見つけて本当に助けになりました。

PrettyPhoto キャプションでの HTML フォーマットの使用

この質問は既に回答されていることは承知していますが、この方法により書式設定の自由度が高まると思います。

記事からの引用:

サイトから jquery.prettyPhoto.js ファイルを開き、次のコードを含む行を見つけます。

pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("title ")?e(t).attr("タイトル"):""}):e.makeArray(e(これ).attr("タイトル"));

そして、それを「alt」属性に置き換えます。

pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("alt ")?e(t).attr("alt"):""}):e.makeArray(e(this).attr("alt"));

「h2」タグと「p」タグを使用してキャプションをフォーマットできます。 しかし、これでは、ページをW3 Validatorで検証することはできません。

したがって、「alt」属性を使用する代わりに、単に「aria-label」属性に置き換えただけです。期待どおりに機能し、ページを検証できます。

コード例:

<a href="path/to/your/big-image.jpg" rel="prettyPhoto" title="This is the native tooltip" aria-label="<h2> This is a caption.</h2> This caption has formatting and does not interfere with the native tooltips.">
    <img src="path/to/your/small-image.jpg" alt="alt-text" />
</a>
于 2015-09-03T13:30:03.763 に答える
1

同様の問題がありました。しかし、私の場合、HTML マークアップに二重引用符がないため、最初の単語のみが表示されました。この場合、 HTML にtitle=マークアップがあり、引用されていることを確認してください。

<a title="Your Title Quoted" href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>

これも役立つことを願っています。

于 2012-12-13T14:28:48.097 に答える
0

これは素晴らしいことですが、タグにブレークタグやアクセントタイトルを含めたい場合
、この情報は機能しないようです。そうでないと、機能が損なわれます。きれいな写真がツールチップを無効にするのをこれほど難しくするだろうとは信じられません.....

そのすべてのコードで説明を強調表示したいのは誰ですか？：P

于 2012-04-16T20:10:57.300 に答える
0

ありがとうカイル!!!!! それは本当に私を夢中にさせました、そしてついにあなたは私に道を示しました. :) ツールチップを表示したくない場合は、img タイトルに空白を追加するだけです。再度、感謝します！

于 2012-10-10T17:03:54.180 に答える
0

これを追加するだけ

font-size: 0px !important;

于 2015-08-31T21:14:06.030 に答える
0

ミッチェルが言ったことに基づいて：

ネストされたスタイルのスパンを使用したため、.text() の代わりに .html() を使用しました。

<span class="popup_text_cont">
      <span class="popup_caption_cont">
        <span class="popup_detail">
          <span class="popup_caption">Client</span>
          <span class="popup_basic_info">Playhouse Square Foundation</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Project</span>
          <span class="popup_basic_info">Broadway Buzz eNewsletter</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Skills</span>
          <span class="popup_basic_info">HTML, CSS</span>
        </span>
      </span>
      <span class="popup_description">
        Designed and implemented a templated eNewsletter that was distributed to theatergoers and Playhouse Square sponsors.
      </span>
    </span>

(圧縮されていないバージョンの 155 行目) を次のように置き換えます。

if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('span.popup_text_cont').html()) ? $(n).find('span.popup_text_cont').html() : ""; }) : $.makeArray($(this).find('span.popup_text_cont').html());
于 2013-07-30T02:33:33.627 に答える
0

tipsy.jsを使用する場合、 jquery.prettyPhoto.jsで「title」属性を「original-title」に交換するだけで済みます。

このような：

pp_descriptions=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr('rel').indexOf(theRel)!=-1)return($(n).attr('original-title'))?$(n).attr('original-title'):"";}):$.makeArray($(this).attr('original-title'))
于 2013-04-20T10:21:48.357 に答える