Fancyboxタイトルに左/右ボタンを追加する

Question

これを終了するにはヘルプが必要です。タイトルの前/次のボタンを表示するif文が正しく機能していません。

ここで例の画像のようにタイトルに余分な左/右のボタンを追加することで、標準fancyboxのカスタマイズ：

これは私がこれまでの画像数を追加した持っているものです。これにボタンを追加できるので、スタイルを簡単にできますか？

$("a.fancybox").fancybox({ 
      'padding' : 5, 
      'overlayShow' : true, 
      'speedIn' : 600, 
      'speedOut' : 500, 
      'transitionIn': 'elastic', 
      'transitionOut': 'elastic', 
      'easingIn' : 'easeOutBack', 
      'easingOut' : 'easeInBack', 
      'titlePosition' : 'inside', 
      'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
       $title = ''; 
       var current = currentIndex + 1; 
       if(current >= currentArray.length){ 
        $title += '<a href="javascript:;" onclick="$.fancybox.prev();" id="fancybox-prev-btn"></a>'; 
       } 
       if(current <= currentArray.length){ 
        $title += '<a href="javascript:;" onclick="$.fancybox.next();" id="fancybox-next-btn"></a>'; 
       } 
       $title += '<span class="fancybox-title">' + title + '<span class="fancybox-title-count">(image ' + (currentIndex + 1) + ' of ' + currentArray.length + ')</span></span><br class="clearBoth"/>'; 
       return $title; 
      } 
     }); 

Answer 1

代わりに（demo）を、これを試してみてください：

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
    $title = ''; 
    var current = currentIndex; 
    if(current > 0){ 
    $title += '<a href="#" onclick="$.fancybox.prev();return false;" id="fancybox-prev-btn"></a>'; 
    } 
    if(current < currentArray.length - 1){ 
    $title += '<a href="#" onclick="$.fancybox.next();return false;" id="fancybox-next-btn"></a>'; 
    } 
    $title += '<span class="fancybox-title">' + title + '<span class="fancybox-title-count">(image ' + (currentIndex + 1) + ' of ' + currentArray.length + ')</span></span><br class="clearBoth"/>'; 
    return $title; 
} 

私はときに私「Javascriptを」ポップアップ表示を見好きではないので、私はhref="#"代わりに...ただ個人的な好みを持っているリンクを変更リンク上にカーソルを置きます。 FancyBoxため

---

アップデート2.1+（demo）

CSS

#fancybox-prev-btn, #fancybox-next-btn { 
    position: absolute; 
    top: 0; 
    width: 30px; 
    height: 30px; 
    margin-left: -50px; 
    cursor: pointer; 
    z-index: 1102; 
    display: block; 
    background-image: url('http://i56.tinypic.com/s5wupy.png'); 
} 

#fancybox-prev-btn { 
    background-position: -40px -30px; 
    left: 0; 
} 
#fancybox-next-btn { 
    background-position: -40px -60px; 
    left: 30px; 
} 

Javascriptが

$(selector).fancybox({ 

    beforeLoad: function() { 
     var title = ''; 
     if (this.index > 0) { 
      title += '<a href="#" onclick="$.fancybox.prev();return false;" id="fancybox-prev-btn"></a>'; 
     } 
     if (this.index < this.group.length - 1) { 
      title += '<a href="#" onclick="$.fancybox.next();return false;" id="fancybox-next-btn"></a>'; 
     } 
     title += '<span class="fancybox-title">' + $(this.element).find('img').attr('alt') + '<span class="fancybox-title-count">(image ' + (this.index + 1) + ' of ' + this.group.length + ')</span></span><br class="clearBoth"/>'; 
     this.title = title; 
    } 

});