prettyPhoto、 "title"とツールチップ

Question

prettyPhotoでは、写真の説明を"title"（<a>タグに<img>を追加して追加）以外のものから来ることができますか？画像上をホバリングすると、prettyPhotoが開いて（それにはhtmlが含まれていますが）ツールチップとして表示されずに表示されたいという醜いhtmlがウェブサイトに表示されます。

私はイベントにプラグインするしかありませんでしたが、関連する唯一のものはchangepicturecallbackです。これから現在の写真要素にアクセスする方法を理解できません。

おそらくそれはjQuery自体の中にあるかもしれませんが、私はそれを見つける場所が少し分かりません。

どのようなアイデアが役に立ちます。

おかげで、 イゴール

Answer 1

あなたの質問に答えるために後半にうまくいけば、このありえない、しかし、私はあなたが求めているだけで何を行うに最近かなりの写真のコードを変更する必要がありました。

アンカーの '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()); 

"（この）.ATTRを（ 'タイトル'）" に ".find（ 'P'）テキスト（）" < Pを見つけます>タグをアンカーに追加する必要があります。 <p>タグをCSSで非表示にして、サイトに表示されないようにしてください。

は現在、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> 

Answer 2

をこれは私がタグで改行タグ
やアクセントのタイトルを含めたい場合は、この情報が動作するようには思えないが偉大であるか、そうでなければ壊れます機能性私はかなりの写真がツールチップを無効にするのが難しいと信じることはできません.....

本当にその説明をすべてのコードで強調したいのですか？ ：P

Answer 3

ありがとうKyle !!!!!それは本当に私を夢中にさせ、ついにあなたは私に道を教えてくれました。 :)あなたが表示するツールチップを表示したくない場合は、imgタイトルに空白スペースを追加するだけです：title = ""そうでなければ、それを無視してアンカータイトルに戻ります。再度、感謝します！

Answer 4

私にも同様の問題がありました。

<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> 

：私の場合は最初の単語だけが表示されていたこの場合には、HTMLマークアップで二重引用符が欠落していたとしてではなく、そこに タイトル=あなたのHTML内マークアップがあると はを引用していることを確認します

希望するとこれも役立ちます。

Answer 5

あなたはtipsy.jsを使用する場合、 "タイトル" 属性のみexchanageにneeedできるjquery.prettyPhoto.jsで "オリジナル・タイトル" へ。

このような

：

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')) 

Answer 6

ビル・ミッチェルが言ったことに：

<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> 

：代わりの.textの

私は（.htmlを使用）（）私は、ネストされたスタイルのスパンを使用しているため置き換え（非圧縮バージョンでは私のために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());  

Answer 7

ただ、私もこの問題が発生して、実際に私を助けてくれ、この記事を見つけたこの

font-size: 0px !important;

Answer 8

を追加します。

Using HTML Formatting in PrettyPhoto Captions

私はこの質問が既にされている知っています私はこの方法は、フォーマットの面でより自由を許すと信じています。記事から

引用：

オープンサイトからjquery.prettyPhoto.jsファイルと次のコードを含む行 探します

pp_descriptions = ISSET jQuery.mapを（？ （t）、e（t）、e（t）、e（t）、e（t）、e（t） .attr（ "title"）： ""}）：e.makeArray（e（this）.attr（ "title"））;

そして 'ALT' 属性に置き換えます？

pp_descriptions = ISSET jQuery.map（O、機能（T、N）{場合（E（t）が.ATTR（設定（ "alt"）： ""}）：e.makeArray（e（t））.attr（ "alt"）：これ）.attr（ "alt"））;

「h2」タグと「p」タグを使用すると、キャプションをフォーマットすることができます。 BUTこれは、ページが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>