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

Question

我将 fotorama 用作图片库，因此我想在全屏显示时为图像或视频添加自定义按钮。当 fotorama 图像处于全屏模式时，是否有任何方法可以添加自定义按钮（例如用于共享，例如...）或工具栏。

Custom fotorama toolbar/buttons on full screen

Answer 1

我找到了为 fotorama 画廊添加工具栏的解决方案。初始化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>');

然后我得到了解决方案并且工作得很好。

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

Can I add custom button for fotorama full screen mode

fotorama