我可以为fotorama全屏模式添加自定义按钮

Question

我使用fotorama作为图片库，所以我想在全屏时为图片或视频添加自定义按钮。有没有办法在全屏模式下添加自定义按钮（例如，用于共享，如...）或工具栏。

Custom fotorama toolbar/buttons on full screen

Answer 1

我有一个为fotorama gallery添加工具栏的解决方案。初始化fotorama后需要为库的工具栏添加html。

i）以下是我的自定义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）像往常一样初始化库（我也初始化了我的自定义功能）。您可以在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>');

然后我得到了解决方案＆amp;工作完美。