Call a function from photo browser

rashnk · May 12, 2018, 11:59am

I have added photo browser plugin i my F72 vue app and its working fine, i would like to know how can i call function on clicking on a opened photo? basically im trying to share the image with cordova social share plugin, but how can i add a button in the photo brower, currently it shows next and prev buttons by default, and i searched in docs but i found no way to call a function and no way to add a button in that page, can someone help me

thanks for the photobrowser plugin

pvtallulah · May 13, 2018, 9:07pm

Hi @rashnk,
As you dont tell us the plugin name nor put a link to it, its almost impossible to help you without knowing the plugin, asi is my case.
Please share the link of the plugin.

nolimits4web · May 16, 2018, 6:52am

There are renderNavbar / renderToolbar parameters where you can return custom navbar/toolbar html with all the required buttons. Here is what it returns by default:

github.com

framework7io/framework7/blob/master/src/components/photo-browser/photo-browser-class.js#L157-L185


renderNavbar() {
  const pb = this;
  if (pb.params.renderNavbar) return pb.params.renderNavbar.call(pb);


  let iconsColor = pb.params.iconsColor;
  if (!pb.params.iconsColor && pb.params.theme === 'dark') iconsColor = 'white';


  const backLinkText = pb.app.theme === 'ios' && pb.params.backLinkText ? pb.params.backLinkText : '';


  const isPopup = pb.params.type !== 'page';
  const navbarHtml = `
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link ${isPopup ? 'popup-close' : ''} ${!backLinkText ? 'icon-only' : ''} ${!isPopup ? 'back' : ''}" ${isPopup ? 'data-popup=".photo-browser-popup"' : ''}>
            <i class="icon icon-back ${iconsColor ? `color-${iconsColor}` : ''}"></i>
            ${backLinkText ? `<span>${backLinkText}</span>` : ''}
          </a>
        </div>
        <div class="title">

This file has been truncated. show original

Anuska_Oo · April 5, 2020, 12:45am

I need read more but I can’t. It is wroken.
When I use photo-browser I can’t see the icons (back and arrows). I don’t know why. I tried with css but nothing works for me. I don’t know how use renderNavbar. Can you give me an example, please?
Best regards
ANuska