Photoswipe
Emelina Gilpin
I'm currently trying to build a mobile image gallery using PhotoSwipe.I've been able to get it working but there's one small problem. When Iclick on a photo thumbnail, the actual photo always takes up the entireviewport. This is OK when you're viewing the gallery on a mobile device.But if your viewport is a computer screen and the image isn't a high-res one, the photo can be very blurry. I'd rather limit the phototo a width of maybe 300 to 400 pixels when viewed on a computer. Is therea way to do this in PhotoSwipe? I read the documentation but couldn'tquite figure it out. I've enclosed my code below.
I do not know of an automatic way to do this, what i did was to put the .pswp div inside of a container div with fixed width and height and then position that container div via JS + CSS in the center of the screen.Use a basic setup as described on the photoswipe documentation with the pswp div already added and then:
This should give you the desired effect and a good starting point for your own page, BUT keep in mind that it will be necessary to add your own background layer to trigger the 'close on click somewhere else' and other details that you have to fix during the opening / closing events of the popup ...
Note though that this didn't seem to work for mobile browsers, which was fine as for screens that small I wanted a fallback option anyway to render as an overlay over the whole page due to limited screen real estate.
I asked about this a while ago, but now that Photoswipe 5 is out of beta, I was wondering if integration was being worked on? Photoswipe 4 has a lot of issues with iOS and the popping up of the bottom bar. I did some testing with Photoswipe 5 and it seems like they have fixed this issue. I would be happy to pay for a version with Photoswipe 5 integration as well if that was offered.
There is still a lot to do, like displaying captions, adding a fullscreen button and migrating all the existing options for PhotoSwipe 4 (or remove them in the admin UI if they can not be used with the new version). In the end there will be a new option to choose between PhotoSwipe 4 or PhotoSwipe 5 where new installations will use PhotoSwipe 5 by default and existing setups can be changed manually.
As suggested by Dmytro Semenov the plugin will now also try to use a lower resolution preview of the images for the opening transition for better performance. This also applies to PhotoSwipe 4 as you can see on other demo pages like -demo.arnowelzel.de/lightbox-with-photoswipe/. If no lower resolution is available, the original image is used.
However since caption display is implemented as plugin it may be possible to implement some another variation which adds captions as overlays as well, similar to the generic example in the documentation:
Great plugin, this way I can build a website without jQuery and still have a nice gallery.
I have one issue though, if I enable caching in system config, it loads photoswipe assets only on the first page load, all the others both js and css assets are gone. Have you experienced anything like this? How could I solve it?
Hello/Hi/Greetings,
I love the Fotorama plugin, but it lacks the ability to zoom, especially on mobile phones. As I mentioned in another thread, I started hacking a variant of the Fotorama plugin based on PhotoSwipe. There's a demo/test here: -moy.fr/piwigo/index.php?/category/1 . The interesting code is essentially [Github] Piwigo-Fotorama file template/photoswipe-content.tpl.
I'm now wondering how to proceed. Initially I thought this would become a standalone plugin, as an alternative to Fotorama. BUT ... there's a lot of code in main.inc.php that deserves to be shared between Fotorama and PhotoSwipe (and honestly, it's rather obscure to me who's not used to Piwigo's code). So I'm wondering whether both Fotorama and PhotoSwipe should live in the same plugin, with a configuration option "use Fotorama"/"use PhotoSwipe", and perhaps "use PhotoSwipe on mobile browser, and Fotorama otherwise" (I really prefer PhotoSwipe on mobile, but Fotorama's thumb mode on desktop is kind of cool also, so choosing the tool to use depending on the client may be nice too).
Any advice on what to do next?
Thanks,
2) offering option photoswipe/fotorama for mobile on one side and desktop on another side is a purely technical option. It is absolutely impossible to understand for a non-developer user. Could we find a piece of explanation to provide next to this option?
Oops, I said my code was still a draft, a leftover piece of debug code was indeed still there ;-).
The admin page still requires some love. My plan was:
- to write a short explanatory text saying what Fotorama and PhotoSwipe are, with the pros and cons of each backend, just above the dropdown menus to chose the backend.
- to have explicitly a part about configuring Fotorama and another about configuring PhotoSwipe (but right now, PhotoSwipe is not configurable), probably greying out the section of a backend when it's not selected at all.
- Maybe have a part with common options (e.g. "add an info button" that would apply to both Fotorama and PhotoSwipe), but I'm not sur whether it's a good idea: if the user choses only one backend, the "common options" part doesn't have a real added value, and if they chose different backends for desktop and mobile, maybe it's a good idea to allow different customization for both.
I just wanted preliminary feedback before doing this, because none of this would make sense if the idea of having both backends in the same plugin is discarded.
I think both backends are valid options and if they are in 2 separate plugins, they would be conflicted. Having them both in the same plugins give the choice to the user on which backend to use and use one for desktop and another one for mobile (what I write is obvious for you, I just write it for readers who would not understand the advantage to have 2 possible backends in the same plugin).
For me, it's a GO :-)
OK, we're on the same page :-). I wrote a quick todo-list on the PR's text on GitHub. If you have a bit of time, any help on the combine_css / combine_script issue (currently last item on the todo-list).
The plugin has a single JS file photoswipe-dynamic-caption-plugin.esm.js (UMD version is in the dist/ folder) and a single CSS file photoswipe-dynamic-caption-plugin.css. Include them directly or via with npm:
A ratio defines the amount of horizontal empty space before the mobile caption switches to "overlap" layout. For example, if it's set to 0.3 - the caption will start overlapping the image when more than 30% of horizontal space is not occupied by an image. If you set it to 0 - the caption will always overlap. If you set it to 1 - the caption will always shift the image (unless it's taller than viewport).
If enabled, the image will always be vertically centered in the remaining space between caption and the rest of viewport. If set to false (default value) - the image will lift up only if caption does not fit below.
The PhotoSwipe skin combines the PhotoSwipe-5 Lightbox with the popular Justified-Gallery type of grid (images maintain their aspect ratio, and are resized to have the same height, it is also used by Flickr). See -started/ and -Gallery/ .
It is also possible to select a masonry layout for the thumbnails in the gallery. The skin contains many options to which allows you with possible extra files in the output directory to adapt it to your needs.
The PhotoSwipe skin has the same index page as the FancyBox skin, but the Slide page is replaced by the PhotoSwipe JavaScript gallery developed by Dmitry Semenov, see
Like the Slide Show 4 skin , the LightGallery skin and the FancyBox skin, it is a small single page html5 compliant skin which gives maximum attention to your photos, because it will fill your screen with your photo, by adapting the image size to the screen size of your tablet or computer. The focus is not lead away by other small pictures or text (except the optional image captions).
There are several options to create the theme image and the album title may be displayed at any place in the theme image or above the theme image.
It is also possible to put the album description and / or the link-buttons and / or the audio controller with or without the music name in a theme image.
Navigation and control is possible via buttons, via the keyboard on a PC and via one finger swipes on the iPhone or iPad and other touch screen devices. The buttons at the top of the index page are optional and can be hidden or displayed by clicking the theme image or the album title.
Navigation on the slide page: Swipe left / right to the next or previous image, spread to zoom in, swipe up or down to close the slide page and return to the index page.
The skin has a responsive layout of the thumbnails gallery: it make an elegant image gallery with the Justified Gallery library. A Justified Image Grid respects the original aspect ratio, no detail is lost due to cropping. It is also possible to display the thumbnails in a grid without the use of the Justified-Gallery.
The height of the thumbnails can be selected as a % of the screen height.
Some settings can be changed by the viewer like the button size and the font size, which is is useful for small devices like an iPhone and in case you have troubles reading small letters. It is also possible to change here the viewing time for a slide in the optional slide show presentation and the viewer can decide to show the Slide image always in full-screen mode The slide show can be started from the slide page, from the index page and fully automatically, where the index page is skipped.
This skin can handle large image descriptions on the slide page: the description can be displayed below the image with a 'more info' text-link which displays a longer description below the image or in a new modal window. It is also possible to display long descriptions in a side panel right of the image or below the images if there is more space.
59fb9ae87f