GalleryViewのリンク設置カスタマイズ（target考慮） | Codetter（こーどったー）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//38行目あたりのthis.href = null を親要素のaのhrefを保持するように変更
//なお、このhrefはhref属性を付加するのではなく「href」という変数を保持するという意味みたいです
//          this.href = null;
          this.href = img.parent('a').attr('href') || null;
          
          //追加(target属性の値を保持する）
          this.href = img.parent('a').attr('target') || null;
 
 
//160行目あたりのli>imgをli imgに変更
//               this.sourceImgs = $('li>img',this.$el);
               this.sourceImgs = $('li img',this.$el);
 
 
//509行目あたりに追加
               _img.fadeIn();
               //以下の行を足します。1枚目の画像を読み込んだ時にリンクを設置します。data-link属性を保持させるのは後ほどの処理で
               //data-linkおよびdata-targetの有無によってwrapの内容を分岐する
               if(_img.attr('data-link') && _img.attr('data-target')){
                    _img.wrap('<a href="' + _img.attr('data-link') + '" target="' + img.attr('data-target') + '"></a>');
               } else if(_img.attr('data-link') && !_img.attr('data-target')){
                    _img.wrap('<a href="' + _img.attr('data-link') + '"></a>');
               }
 
//526行目あたりに追加
                              .attr('src',gvImage.src.panel)
                              
                              //以下の行を追加。画像自体にdata-link属性でリンク先を保持します。data-targetとしてtarget属性の内容も保持
                              .attr('data-link',gvImage.href).attr('data-target',gvImage.target);
 
 
//600行目あたりに追加
//今回はpanel_animationがfadeのものに適用させてますが、それ以外のcrossfadeやslideに適用させる場合はその部分（caseの中）に書いてください。
//
                         if(panel.children().attr('data-link') && panel.children().attr('data-target')){
                              panel.children().wrap('<a href="' + panel.children().attr('data-link') + '" target="' + panel.children().attr('data-target') + '"></a>');
                         } else if(panel.children().attr('data-link') && !panel.children().attr('data-target')){
                              panel.children().wrap('<a href="' + panel.children().attr('data-link') + '"></a>');
                         }
                         break;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX