fotoramaフルスクリーンモード用のカスタムボタンを追加することはできます

Question

私は画像ギャラリーとしてfotoramaを使用しています。そのため、フルスクリーンで画像やビデオのカスタムボタンを追加します。フルスクリーンモードでfotorama画像を使用する場合、カスタムボタン（たとえば、共有のような...）やツールバーを追加する方法はありますか？

Custom fotorama toolbar/buttons on full screen

Answer 1

私はfotoramaギャラリーのためにツールバーを追加する解決策を得ました。 fotoramaを初期化した後、ギャラリーのツールバーに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）の後にギャラリーを初期化するから、他のイベントを見つけることができます

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

は、その後、私は完全に解決&仕事を得たカスタムHTMLを追加する必要があります。