jQueryのprettyPhotoの「pp_descriptions」に外部リンクを設定。
jQuery-PrettyPhoto
上記URLでダウンロードできる「jQuery-PrettyPhoto」のtitle部分（正確には呼び出されたページのpp_description部分）にリンクを貼れるようにJSを改造したのでメモ。
まずは、呼び出すアンカータグの中に「data-link="リンク"」を追加。
<a href="***.jpg"
rel="prettyPhoto"
class="p-img"
title="つか、説明"
data-link="http://www.google.com/">見る</a>
でもって
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(…
の次あたりに、以下を追加。
pp_links = (isSet) ? jQuery.map(matchedObjects, function(n, i){
if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).attr('data-link')) ? $(n).attr('data-link') : "";
}) : $.makeArray($(this).attr('data-link'));要するに、jQueryの「attr()」でdata-link=""の中身を取得するってわけです。
実際に、pp_descriptionsやらpp_titlesやらも同じように取得しているので。
この当たりを見ると<img>タグのalt属性を表示タイトルとして、<a>タグのtitle=""の中身をpp_descriptions（下の方の説明）としているようです。
あとは「$.prettyPhoto.open = function(…」の中にある「pp_descriptions」の表示処理をリンクで囲むように書き換えるだけです。
267行目付近を変更します。
$pp_pic_holder.find('.pp_description').show().html(unescape(pp_descriptions[set_position]));
▼こんな感じで書き換え▼
$pp_pic_holder.find('.pp_description').show().html(
'<a href="' + pp_links + '">' + pp_descriptions[set_position] + '</a>'
);jQueryのプラグインは、jQueryの使い方がわかってると結構簡単にカスタマイズ出来るので、よく使います。
jQueryをお仕事で使う場合、結構カスタマイズの要望が多いですからね…。
「data-*属性」を使っておけば、HTML5で新たに規定されたdataset IDL属性からDOMStringMapオブジェクトを取得出来ることになっているようなので、独自属性のコンテンツは「data-*属性」を使うようにしておきましょう。
このへんとか参考になるかも…。
 |
 |
 |
 |