Photo Browser Vue Component

    Photo Browser is an photo browser component to display collection of photos / images. Photos can be zoomed and panned (optional).

    Photo Browser Vue component doesn’t render any output. It can be used to create JS Photo Browser instance and control it inside of your Vue component.

    Photo Browser Properties

    You can pass all parameters in single params property or use separate props for each parameter to specify them via component properties:

    Photo Browser Methods

    You can access Photo Browser initialized instance by accessing **.f7PhotoBrowser** component’s property.

    Examples

    1. <template>
    2.   <f7-page>
    3.     <f7-navbar title="Photo Browser"></f7-navbar>
    5.     <f7-block>
    6.       <p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
    7.       <f7-row>
    8.         <f7-col>
    9.           <f7-photo-browser
    10.             :photos="photos"
    11.             ref="standalone"
    12.           ></f7-photo-browser>
    13.           <f7-button raised @click="$refs.standalone.open()">Standalone</f7-button>
    14.         </f7-col>
    15.         <f7-col>
    16.           <f7-photo-browser
    17.             :photos="photos"
    18.             type="popup"
    19.             ref="popup"
    20.           ></f7-photo-browser>
    21.           <f7-button raised @click="$refs.popup.open()">Popup</f7-button>
    22.         <f7-col>
    23.           <f7-photo-browser
    25.             type="page"
    26.             back-link-text="Back"
    27.             ref="page"
    28.           ></f7-photo-browser>
    29.           <f7-button raised @click="$refs.page.open()">Page</f7-button>
    30.         </f7-col>
    31.       </f7-row>
    32.     </f7-block>
    34.     <f7-block>
    35.       <p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
    36.       <f7-row>
    37.         <f7-col>
    38.           <f7-photo-browser
    39.             :photos="photos"
    40.             theme="dark"
    41.             ref="standaloneDark"
    42.           ></f7-photo-browser>
    43.           <f7-button raised @click="$refs.standaloneDark.open()">Standalone</f7-button>
    44.         </f7-col>
    45.         <f7-col>
    46.           <f7-photo-browser
    47.             :photos="photos"
    48.             theme="dark"
    49.             type="popup"
    50.             ref="popupDark"
    51.           ></f7-photo-browser>
    52.           <f7-button raised @click="$refs.popupDark.open()">Popup</f7-button>
    53.         </f7-col>
    54.         <f7-col>
    55.           <f7-photo-browser
    56.             theme="dark"
    58.             back-link-text="Back"
    59.             ref="pageDark"
    60.           ></f7-photo-browser>
    61.           <f7-button raised @click="$refs.pageDark.open()">Page</f7-button>
    62.         </f7-col>
    63.       </f7-row>
    64.     </f7-block>
    65.   </f7-page>
    66. </template>
    67. <script>
    68.   export default {
    69.     data() {
    70.       return {
    71.         photos: [
    72.           {
    73.             url: 'img/beach.jpg',
    74.             caption: 'Amazing beach in Goa, India',
    75.           },
    76.           'http://placekitten.com/1024/1024',
    77.           'img/lock.jpg',
    78.           {
    79.             url: 'img/monkey.jpg',
    80.             caption: 'I met this monkey in Chinese mountains',
    81.           },
    82.           {
    83.             url: 'img/mountains.jpg',
    84.             caption: 'Beautiful mountains in Zhangjiajie, China',
    85.           },
    86.         ],
    87.       };
    88.     },
    89.   }