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.
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.