fotorama - 我可以为 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>');

然后我得到了解决方案并完美地工作。