修改fancybox html

Question

是否可以自定義fancybox HTML代碼？
我要外遷出下一個和以前的按鈕.fancybox-外

Answer 1

這是我如何解決它。我以前不知道你可以擴展/替換jQuery中的方法。但是這個新方法將會（用一些基本的css）從右側滑動到左側。

它呈現fancybox-outer元素外部的按鈕，並且它佔據了文檔的寬度。它可能可以優化很多。

jQuery('ul a').fancybox({ 
    margin: 0, 
    openMethod : 'afterZoomIn', 
    nextMethod : 'slideIn', 
    nextSpeed : 1000, 
    prevMethod : 'slideOut', 
    prevSpeed : 1000 
}); 



(function ($, F) { 
    var getScalar = function(value, dim) { 
     var value_ = parseInt(value, 10); 

     if (dim && isPercentage(value)) { 
      value_ = F.getViewport()[ dim ]/100 * value_; 
     } 

     return Math.ceil(value_); 
    }, 
    getValue = function(value, dim) { 
     return getScalar(value, dim) + 'px'; 
    }; 

    F.transitions.afterZoomIn = function() { 
     var current = F.current; 

     if (!current) { 
      return; 
     } 

     F.isOpen = F.isOpened = true; 

     F.wrap.addClass('fancybox-opened').css('overflow', 'visible'); 

     F.reposition(); 

     // Assign a click event 
     if (current.closeClick || current.nextClick) { 
      F.inner.css('cursor', 'pointer').bind('click.fb', function(e) { 
       if (!$(e.target).is('a') && !$(e.target).parent().is('a')) { 
        F[ current.closeClick ? 'close' : 'next' ](); 
       } 
      }); 
     } 

     // Create a close button 
     if (current.closeBtn) { 
      $(current.tpl.closeBtn).appendTo('.fancybox-overlay').bind('click.fb', F.close); 
     } 

     // Create navigation arrows 
     if (current.arrows && F.group.length > 1) { 
      if (current.loop || current.index > 0) { 
       $(current.tpl.prev).appendTo('.fancybox-overlay').bind('click.fb', F.prev); 
      } 

      if (current.loop || current.index < F.group.length - 1) { 
       $(current.tpl.next).appendTo('.fancybox-overlay').bind('click.fb', F.next); 
      } 
     } 

     F.trigger('afterShow'); 

     // Stop the slideshow if this is the last item 
     if (!current.loop && current.index === current.group.length - 1) { 
      F.play(false); 

     } else if (F.opts.autoPlay && !F.player.isActive) { 
      F.opts.autoPlay = false; 

      F.play(); 
     } 
    }; 

    F.transitions.slideIn = function() { 
     var current = F.current, 
      effect = current.nextEffect, 
      startPos = current.pos, 
      endPos = { opacity : 1 }, 
      direction = F.direction, 
      distance = $(document).width(), 
      field; 

     startPos.opacity = 0.1; 

     field = 'left'; 
     if (direction === 'right') { 
      startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance); 
      endPos[ field ] = '+=' + distance + 'px'; 

     } else { 
      startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance); 
      endPos[ field ] = '-=' + distance + 'px'; 
     } 

     // Workaround for http://bugs.jquery.com/ticket/12273 
     if (effect === 'none') { 
      F._afterZoomIn(); 

     } else { 
      F.wrap.css(startPos).animate(endPos, { 
       duration : current.nextSpeed, 
       easing : current.nextEasing, 
       complete : F._afterZoomIn 
      }); 
     } 
    }; 

    F.transitions.slideOut = function() { 
     var previous = F.previous, 
      effect = previous.prevEffect, 
      endPos = { opacity : 0 }, 
      direction = F.direction, 
      distance = $(document).width(); 

     if (effect === 'elastic') { 
      endPos[ 'left' ] = (direction === 'left' ? '-' : '+') + '=' + distance + 'px'; 
     } 

     previous.wrap.animate(endPos, { 
      duration : effect === 'none' ? 0 : previous.prevSpeed, 
      easing : previous.prevEasing, 
      complete : function() { 
       // $(this).trigger('onReset').remove(); 
       previous.wrap.trigger('onReset').remove(); 
      } 
     }); 
    } 

}(jQuery, jQuery.fancybox)); 

Answer 2

爲了搬出.fancybox-outer容器的next和previous按鈕，你只需要添加這些CSS規則（在自己的自定義CSS文件，並在您加載的fancybox CSS文件）

.fancybox-nav { 
    width: 60px;  
} 

.fancybox-nav span { 
    visibility: visible; 
    opacity: 0.5; 
} 

.fancybox-nav:hover span { 
    opacity: 1; 
} 

.fancybox-next { 
    right: -60px; 
} 

.fancybox-prev { 
    left: -60px; 
} 

你說you have looked around in the documentation but haven't found anything但上面在fancyapps.com網站有據可查的位置 - >http://fancyapps.com/fancybox/#useful檢查6號，並演示是this fiddle

...但不知道你是否會認爲這是一個正確的答案。