我可以爲fotorama全屏模式添加自定義按鈕

Question

使用fotorama作爲圖片庫，所以我想爲全屏圖像或視頻添加自定義按鈕。有沒有辦法在全屏模式下添加自定義按鈕（例如，共享等）或工具欄。

Custom fotorama toolbar/buttons on full screen

Answer 1

我得到了一個解決方案，添加工具欄fotorama畫廊。在初始化fotorama之後，需要爲gallery的工具欄添加html。

我）以下是我的自定義HTML代碼（我的圖片庫工具欄）

var fotoramaCustomToolbarHtml = '<span class="salon-name">'+salonName+'</span><img src="'+profileImage+'" class="profile-img"> \ 
    <span rel="tooltip" data-placement="top" \ 
    class="sf add-to-favourits add-to-favourits-gallery pull-left '+favouritsActiveClass+'" \ 
    data-id="'+salonId+'" data-isYelp="'+isYe+'" style=""> \ 
    <i class=" fa fa-heart" aria-hidden="true"></i> </span> \ 
    <input type="button" id="booking-fullscreen-btn" class="btn btn-default pull-right" \ 
    value="Book this salon" style="margin-top: 10px;"> '; 

II）初始化庫像往常一樣（我初始化我的自定義functionlities也）。您可以從http://fotorama.io/customize/api/

$('.fotorama').on('fotorama:ready', 
function (e, fotorama, extra) { 
bookingFromGallery(); // my custom functions that you don't need 
initTooltip(); // my custom functions that you don't need 
}).fotorama(); // initializing the fotorama gallery 

III）初始化圖庫之後發現任何其他活動需要追加自定義HTML

$('.fotorama').append('<div class="my-custom-fotorama-toolbar"><div class="fot-cus-tb-inner">'+fotoramaCustomToolbarHtml+'</div></div>');

然後我得到了解決&工作完美。