Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open in fullscreen mode #851

Open
ghost opened this issue May 30, 2015 · 9 comments
Open

Open in fullscreen mode #851

ghost opened this issue May 30, 2015 · 9 comments

Comments

@ghost
Copy link

ghost commented May 30, 2015

Is there a current/planed option for this?
I'm actually using this:

gallery = ...
gallery.init()
gallery.ui.getFullscreenAPI().enter()

is this a good approach?

Also i'm listening on fullscreenchange event and closing the photoswipe when fullscreen exited:

document.addEventListener App.vendor_prefix + 'fullscreenchange', ->
  return if document.mozFullScreen || document.webkitIsFullScreen # actually in fullscreen mode
  gallery.close()

it works well however a error thrown when exiting by pressing esc key.
looks like _listeners is already null here

temporarily fixed like this:

_shout = function(name) {
        if (!_listeners)
            return;
        var listeners = _listeners[name];
...
@dimsemenov
Copy link
Owner

It's fine method, but ideally – you should at first enter fullscreen and only then init PhotoSwipe. I'd recommend to fork the default UI and exclude default fullscreen feature entirely.

it works well however a error thrown when exiting by pressing esc key.

Make sure that you aren't calling any method on PhotoSwipe that is already destroyed (closed).

@rodislav
Copy link

rodislav commented Jun 2, 2015

Hi, the issue with _listeners also affects my project, my question is - any time I close (by clicking on close button) photoSwipe - should I init() again ? or create new instance ?

@dimsemenov
Copy link
Owner

@rodislav, close() destroys PhotoSwipe instance, you can not execute anything after it, PhotoSwipe is in memory only when it's open.

my question is - any time I close (by clicking on close button) photoSwipe - should I init() again ? or create new instance ?

Create new instance.

@rodislav
Copy link

rodislav commented Jun 2, 2015

ok, got it
thanks a lot for help!

@COLABORATI
Copy link

could you please add an example how to implement this the right way? I also would like to have a no-thumbnail gallery that starts in fullscreen mode directly when visiting the site. Currently I played with the examples, but when hitting the esc key the page is blank (as there is nothing else). It would be really nice if photoswipe supported a fullscreen gallery by default. Here is a fork of the old photoswipe that shows very well, what I want, but it is, well, based on the old version... would be great to have this in your version! Thanks for your attention!
https://github.com/jonathanbell/photoswipe

@prabhathAmila
Copy link

hi
I want to listen to is the photo full screen or not.
but listen function not working.
"gallery.listen('requestFullscreen',function(){console.log('requestFullscreen');});"
please help

thank you.

@ghost
Copy link

ghost commented Apr 6, 2017

I developed a library to allow PhotoSwipe to open in fullscreen mode with support for deep linking to specific gallery images. Here's the code needed to do so, which uses the initPhotoSwipeFromDOM function from the PhotoSwipe docs:

fetchInject([
  '/css/vendor/photoswipe/photoswipe.css',
  '/css/vendor/photoswipe/default-skin/default-skin.css',
  '/js/vendor/photoswipe/photoswipe.min.js',
  '/js/vendor/photoswipe/photoswipe-ui-default.min.js'
]).then(() => {
  initPhotoSwipeFromDOM('[itemtype="http://schema.org/ImageGallery"]')
})

It loads everything in asynchronously in parallel, so you won't need to add any link or script tags directly to your markup to get PhotoSwipe loaded.

pwsp

More info here:
https://github.com/jhabdas/fetch-inject#loading-and-handling-composite-libraries

@mayagithub87
Copy link

Hello everyone, the way I solve this problem was like this:

var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
gallery.init();
let psAPI = gallery.ui.getFullscreenAPI();
psAPI.enter();
gallery.listen('close', function (name) {
    psAPI.exit();
});

Hope it helps!

@Satish-TD
Copy link

Hello everyone, the way I solve this problem was like this:

var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
gallery.init();
let psAPI = gallery.ui.getFullscreenAPI();
psAPI.enter();
gallery.listen('close', function (name) {
    psAPI.exit();
});

Hope it helps!

This will not work in mobile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants