Can I add custom button for fotorama full screen mode

Question

Im using fotorama as a image gallery, So I want to add custom button for images or video when its on full screen. Is there any way to add custom buttons (eg. for share, like ...) or toolbar when fotorama image in full screen mode.

Custom fotorama toolbar/buttons on full screen

Answer 1

I got a solution to adding toolbar for fotorama gallery. Need to append the html for toolbar of gallery after initialize the fotorama.

i) Following is my custom html code(for my gallery toolbar )

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) Initialize the library as usual(I have initialized my custom functionlities also). You can find any other events from 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) After initialize the gallery need to append the custom html

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

Then I got the solution & work perfectly.