Photo Browser

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

Photo Browser uses Swiper Slider component to slide between photos.

Photo Browser App Methods

Let's look at related App methods to work with Photo Browser:

app.photoBrowser.create(parameters)- create Photo Browser instance

  • parameters - object. Object with photo browser parameters

Method returns created Photo Browser's instance

app.photoBrowser.destroy(el)- destroy Photo Browser instance

  • el - HTMLElement or string (with CSS Selector) or object. Photo Browser element or Photo Browser instance to destroy.

app.photoBrowser.get(el)- get Photo Browser instance by HTML element

  • el - HTMLElement or string (with CSS Selector). Photo Browser element.

Method returns Photo Browser's instance

For example:

var photoBrowser = app.photoBrowser.create({
  photos: [
    'path/to/photo-1.jpg'
    'path/to/photo-2.jpg'
  ],
});

Photo Browser Parameters

Let's look on list of all available Photo Browser parameters:

Parameter Type Default Description
photos array [] Array with URLs of photos or array of objects with "url" (or "html") and "caption" properties.
exposition boolean true Enable disable exposition mode when clicking on Photo Browser.
expositionHideCaptions boolean false Set to true if you also want to hide captions in exposition mode
swipeToClose boolean true You can close Photo Browser with swipe up/down when this parameter is enabled
routableModals boolean true Will add opened photo browser to router history which gives ability to close photo browser by going back in router history and set current route to the photo browser modal
url string photos/ Photo browser modal URL that will be set as a current route
view object Link to initialized View instance if you want use "page" Photo Browser type or where to set routing when routableModals enabled. By default, if not specified, it will be opened in Main View.
type string standalone Define how Photo Browser should be opened. Could be standalone (will be opened as an overlay with custom transition effect), popup (will be opened as popup), page (will be injected to View and loaded as a new page).
theme string light Photo Browser color theme, could be light or dark
captionsTheme string Captions color theme, could be also light or dark. By default, equal to theme parameter
navbar boolean true Set to false to remove Photo Browser's Navbar
toolbar boolean true Set to false to remove Photo Browser's Toolbar
backLinkText string Close Text on back link in Photo Browser's navbar
navbarOfText string 'of' Text of "of" in photos counter: "3 of 5"
iconsColor string One of the default colors
swiper object Swiper parameters. By default equals to:
swiper: {
  initialSlide: 0,
  spaceBetween: 20,
  speed: 300,
  loop: false,
  preloadImages: true,
  navigation: {
    nextEl: '.photo-browser-next',
    prevEl: '.photo-browser-prev',
  },
  zoom: {
    enabled: true,
    maxRatio: 3,
    minRatio: 1,
  },
  lazy: {
    enabled: true,
  },
},
Render functions
renderNavbar function Function to render navbar, must return navbar HTML string
renderToolbar function Function to render toolbar, must return toolbar HTML string
renderCaption function(caption, index) Function to render single caption, must return caption HTML string
renderObject function(photo, index) Function to render photo object, must return photo object HTML string
renderLazyPhoto function(photo, index) Function to render lazy loaded photo slide, must return slide HTML string
renderPhoto function(photo, index) Function to render photo as a swiper slide, must return slide HTML string
renderPage function Function to render photobrowser page, must return full page HTML layout string
renderPopup function Function to render photobrowser popup, must return full popup HTML layout string
renderStandalone function Function to render photobrowser standalone modal, must return full modal HTML layout string
Events
on object Object with events handlers. For example:
var photoBrowser = app.photoBrowser.create({
  ...
  on: {
    opened: function () {
      console.log('photo browser opened')
    }
  }
})

Note that all following parameters can be used in global app parameters under photoBrowser property to set defaults for all photo browsers. For example:

var app = new Framework7({
  photoBrowser: {
    type: 'popup',
  }
});

Photos Array

When we initialize Photo Browser we need to pass array with photos/videos in photos parameter. Let's look at different variations of this array:

// If we need photo browser with just photos we may pass array with string urls:
var photos = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    'image4.jpg',
];

//If we need to use caption for some of photos then each photo should be presented as object:
var photos = [
    {
        url: 'image1.jpg',
        caption: 'Caption 1'
    },
    {
        url: 'image2.jpg',
        caption: 'Caption 1'
    },
    // This one will be without caption
    {
        url: 'image3.jpg',
    },
    // This one will be also without caption
    'image4.jpg'
];

//If we need to use videos in some slides we need to pass HTML element of video element or iframe within "html" property:
var photos = [
    {
        url: 'image1.jpg',
        caption: 'Caption 1'
    },
    // Video element with caption
    {
        html: '<video src="video1.mp4"></video>',
        caption: 'Video Caption'
    },
    // This one is embedded video without caption
    {
        html: '<iframe src="..."></iframe>',
    },
    // This one will be also video without caption
    '<video src="video2.mp4"></video>'
];

Photo Browser Methods & Properties

After we initialize Photo Browser we have its initialized instance in variable (like photoBrowser variable in examples above) with helpful methods and properties:

Properties
photoBrowser.app Link to global app instance
photoBrowser.el Photo Browser HTML element
photoBrowser.$el Dom7 instance with Photo Browser HTML element
photoBrowser.activeIndex Index number of currently active photo slide
photoBrowser.exposed true if Photo Browser in exposition mode
photoBrowser.opened true if Photo Browser is currently opened
photoBrowser.url Photo Browser URL (that was passed in url parameter)
photoBrowser.view Photo Browser View (that was passed in view parameter) or found parent view
photoBrowser.swiper Contains initialized Swiper instance with all available Swiper methods and properties
photoBrowser.params Object with initialization parameters
Methods
photoBrowser.open(index) Open Photo Browser on photo with index number equal to "index" parameter. If "index" parameter is not specified, it will be opened on last closed photo.
photoBrowser.close() Close Photo Browser
photoBrowser.expositionToggle() Toggle exposition mode
photoBrowser.expositionEnable() Enable exposition mode
photoBrowser.expositionDisable() Disable exposition mode
photoBrowser.destroy() Destroy photo prowser instance
photoBrowser.on(event, handler) Add event handler
photoBrowser.once(event, handler) Add event handler that will be removed after it was fired
photoBrowser.off(event, handler) Remove event handler
photoBrowser.off(event) Remove all handlers for specified event
photoBrowser.emit(event, ...args) Fire event on instance

Photo Browser Events

Photo Browser will fire the following DOM events on photo browser element and events on app and photo browser instance:

DOM Events

Event Target Description
photobrowser:open Photo Browser Element Event will be triggered when Photo Browser starts its opening animation
photobrowser:opened Photo Browser Element Event will be triggered after Photo Browser completes its opening animation
photobrowser:close Photo Browser Element Event will be triggered when Photo Browser starts its closing animation
photobrowser:closed Photo Browser Element Event will be triggered after Photo Browser completes its closing animation

App and Photo Browser Instance Events

Photo Browser instance emits events on both self instance and app instance. App instance events has same names prefixed with photoBrowser.

Event Target Description
swipeToClose photoBrowser Event will be fired when user close photo browser with swipe up/down.
tap photoBrowser Swiper event. Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments.
click photoBrowser Swiper event. Event will be fired when user click/tap on Swiper after 300ms delay. Receives 'touchend' event as an arguments.
doubleTap photoBrowser Swiper event. Event will be fired when user double tap on Swiper's container. Receives 'touchend' event as an arguments
slideChange photoBrowser Swiper event. Event will be fired when currently active slide is changed
transitionStart photoBrowser Swiper event. Event will be fired in the beginning of transition.
transitionEnd photoBrowser Swiper event. Event will be fired after transition.
slideChangeTransitionStart photoBrowser Swiper event. Event will be fired in the beginning of animation to other slide (next or previous).
slideChangeTransitionEnd photoBrowser Swiper event. Event will be fired after animation to other slide (next or previous).
lazyImageLoad photoBrowser Swiper event. Event will be fired in the beginning of lazy loading of image
lazyImageReady photoBrowser Swiper event. Event will be fired when lazy loading image will be loaded
touchStart photoBrowser Swiper event. Event will be fired when user touch Swiper. Receives 'touchstart' event as an arguments.
touchMoveOpposite photoBrowser Swiper event. Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives 'touchmove' event as an arguments.
touchEnd photoBrowser Swiper event. Event will be fired when user release Swiper. Receives 'touchend' event as an arguments.
open photoBrowser Event will be triggered when Photo Browser starts its opening animation. As an argument event handler receives photoBrowser instance
photoBrowserOpen app
opened photoBrowser Event will be triggered after Photo Browser completes its opening animation. As an argument event handler receives photoBrowser instance
photoBrowserOpened app
close photoBrowser Event will be triggered when Photo Browser starts its closing animation. As an argument event handler receives photoBrowser instance
photoBrowserClose app
closed photoBrowser Event will be triggered after Photo Browser completes its closing animation. As an argument event handler receives photoBrowser instance
photoBrowserClosed app
beforeDestroy photoBrowser Event will be triggered right before Photo Browser instance will be destroyed. As an argument event handler receives photoBrowser instance
photoBrowserBeforeDestroy app

Examples

<div class="page-content">
  <div class="block-title">Light Theme</div>
  <div class="block row">
    <div class="col-33"><a href="#" class="button pb-standalone">Standalone</a></div>
    <div class="col-33"><a href="#" class="button pb-popup">Popup</a></div>
    <div class="col-33"><a href="#" class="button pb-page">Page</a></div>
  </div>
  <div class="block-title">Dark Theme</div>
  <div class="block row">
    <div class="col-50"><a href="#" class="button pb-standalone-dark">Standalone</a></div>
    <div class="col-50"><a href="#" class="button pb-popup-dark">Popup</a></div>
  </div>
</div>
var app = new Framework7();

var $$ = Dom7;


/*=== Default standalone ===*/
var myPhotoBrowserStandalone = app.photoBrowser.create({
    photos : [
        'http://lorempixel.com/1024/1024/sports/1/',
        'http://lorempixel.com/1024/1024/sports/2/',
        'http://lorempixel.com/1024/1024/sports/3/',
    ]
});
//Open photo browser on click
$$('.pb-standalone').on('click', function () {
    myPhotoBrowserStandalone.open();
});

/*=== Popup ===*/
var myPhotoBrowserPopup = app.photoBrowser.create({
    photos : [
        'http://lorempixel.com/1024/1024/sports/1/',
        'http://lorempixel.com/1024/1024/sports/2/',
        'http://lorempixel.com/1024/1024/sports/3/',
    ],
    type: 'popup'
});
$$('.pb-popup').on('click', function () {
    myPhotoBrowserPopup.open();
});

/*=== As Page ===*/
var myPhotoBrowserPage = app.photoBrowser.create({
    photos : [
        'http://lorempixel.com/1024/1024/sports/1/',
        'http://lorempixel.com/1024/1024/sports/2/',
        'http://lorempixel.com/1024/1024/sports/3/',
    ],
    type: 'page',
    backLinkText: 'Back'
});
$$('.pb-page').on('click', function () {
    myPhotoBrowserPage.open();
});

/*=== Standalone Dark ===*/
var myPhotoBrowserDark = app.photoBrowser.create({
    photos : [
        'http://lorempixel.com/1024/1024/sports/1/',
        'http://lorempixel.com/1024/1024/sports/2/',
        'http://lorempixel.com/1024/1024/sports/3/',
    ],
    theme: 'dark'
});
$$('.pb-standalone-dark').on('click', function () {
    myPhotoBrowserDark.open();
});

/*=== Popup Dark ===*/
var myPhotoBrowserPopupDark = app.photoBrowser.create({
    photos : [
        'http://lorempixel.com/1024/1024/sports/1/',
        'http://lorempixel.com/1024/1024/sports/2/',
        'http://lorempixel.com/1024/1024/sports/3/',
    ],
    theme: 'dark',
    type: 'popup'
});
$$('.pb-popup-dark').on('click', function () {
    myPhotoBrowserPopupDark.open();
});

/*=== With Captions ===*/
var myPhotoBrowserPopupDark = app.photoBrowser.create({
    photos : [
        {
            url: 'http://lorempixel.com/1024/1024/sports/1/',
            caption: 'Caption 1 Text'
        },
        {
            url: 'http://lorempixel.com/1024/1024/sports/2/',
            caption: 'Second Caption Text'
        },
        // This one without caption
        {
            url: 'http://lorempixel.com/1024/1024/sports/3/',
        },
    ],
    theme: 'dark',
    type: 'standalone'
});
$$('.pb-standalone-captions').on('click', function () {
    myPhotoBrowserPopupDark.open();
});

/*=== With Video ===*/
var myPhotoBrowserPopupDark = app.photoBrowser.create({
    photos : [
        {
            html: '<iframe src="//www.youtube.com/embed/lmc21V-zBq0" frameborder="0" allowfullscreen></iframe>',
            caption: 'Woodkid - Run Boy Run (Official HD Video)'
        },
        {
            url: 'http://lorempixel.com/1024/1024/sports/2/',
            caption: 'Second Caption Text'
        },
        {
            url: 'http://lorempixel.com/1024/1024/sports/3/',
        },
    ],
    theme: 'dark',
    type: 'standalone'
});
$$('.pb-standalone-video').on('click', function () {
    myPhotoBrowserPopupDark.open();
});