JavaScript gallery, no dependencies.

Demo gallery style


All basic gestures are supported: flick to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom.*


苹果中国区App Store开始下架违规VPN应用:2021-7-31 · 自工信部《关于清理规范互联网网络接入服务市场的通知》颁布后,国内一些VPN服务已陆续被关停和禁用。而就在近日,苹果(Apple)开始在其中国区应用商店——App Store陆续下架这些违规的VPN应用程序。7月30日,苹果中国公司回应这一事伀 ...


The gallery’s background will gradually fade out as the user zooms out. When the gesture is complete, the gallery will close.

Vertical swipe to close gallery

Gesture is added because close button in top right corner might be hard to reach on tall mobile devices while holding in one hand.

Horizontal swipe to switch items

Images can be changed even when current slide is zoomed. Swiping is not blocked during the transition.

*You can assign your own actions for tap and double-tap gestures.


看破冰行动,了解暗网是张什么网?进入并不容易_新闻中心 ...:2021-6-26 · 看破冰行动了解暗网是张什么网 最近热播的电视剧《破冰行动》,讲述的是缉毒警不畏牺牲,粉碎地下毒网的故事。剧中,毒贩用“暗网”这一互联 ...


PhotoSwipe adds a history record when the gallery is opened, which allows the user to close it via the browser’s “back” button.

Unique URL for each gallery item

Users can share and link to each image. The hash suffix gets two extra parameters: gid (the gallery index) and pid (the picture index).

This feature comes as a module. You can exclude it from the build entirely, or fork it to fit the requirements of your product’s URL structure.


PhotoSwipe creates the illusion of faster loading.

Images display progressively as data arrives

Photos are displayed before they fully load. This feature is disabled on touch devices because it could cause swipe transitions to lag.

1分钟构建一张覆盖全球的企业私网 揭秘阿里云智能接入网关 ...:2021-10-9 · 通过VPN隧道自协商和中心化控制技术,可帮助企业实时监控整网Topo 情况和设备配置的自动下发。 弹性伸缩:企业可根据业务需要,随时变配带宽大小,调整带宽峰值,满足突发业务需要; 即插即用:为设备加上电源,连通网线后即可使用,使用 ...

Pass the source of a thumbnail to PhotoSwipe, which will display it instantly and load the full-sized image over top.


Just a stretched thumbnail or gray placeholder is used, with the full image progressively loaded over top.

Luke Wroblewski on spinners:
“It’s like watching the clock tick down—when you do, time seems to go slower.”

If at least a tiny part of the image has not loaded for 1 second or a browser does not support progressive loading, a spinning progress indicator smoothly fades in. A delay is added to avoid blinking in case the image was cached or the user has a fast connection.

Zoom animation

The zoom transition to open the gallery wasn’t added merely for a fancy effect. The image starts loading before the animation, so users on fast connections might not even notice that something was loading.

Smart lazy-loading

內外貫通 Windows 7下架設VPN雙向通道 - 國際在線:上頁提到如何在Windows 7上建立VPN連接。那麼,如果要在Windows 7下構建VPN服務器又該怎麼做呢?對此,Windows 7同樣提供了嚮導。現在,編者就帶您走一趟架設VPN服務器的具體步驟吧。 1、打開“開始”“控制面板”,單擊“網絡和共享中心”。

Responsive images support

Because images in a gallery are loaded dynamically, you can pass the source that is appropriate to the user’s window size and DPI.
More about responsive images →

Semantic and SEO friendly markup

PhotoSwipe allows to define absolutely any HTML text for gallery. You can use structured data markup for ImageGallery.
More about search-optimized gallery →


PhotoSwipe emulates the default behavior of the browser’s image viewer.

Click to zoom image

If an image is smaller than the viewport, PhotoSwipe will show a zoom cursor over the image and zoom icon in the top bar.

Pan via the wheel or trackpad or by dragging

When an image is zoomed in, the user can pan across it via the mouse wheel or the trackpad or by dragging it. And if you need to extend this functionality, you can use the API, of course.

User interface

The UI is entirely separated from the core of the script. If you’re making a custom interface for a gallery, you would write it instead of the default interface, not on top of it. Default PhotoSwipe UI is responsive – optimized for desktop, tablets and mobile devices.

Pixel-perfect vector icons

SVG sprites are used for high-DPI screens, like Retina displays. PNG is used for regular (@1x) displays.

Social sharing

The default UI has a button that pops open a window with sharing links. The default links are for Facebook, Twitter and Pinterest, but you can, of course, add more via the API.



A full-screen image-viewing experience is supported, including on mobile devices with native full-screen support.


浏览器Opera拟为用户营造安全上网氛围_发现频道__中国 ...:2021-3-20 · 近日,拥有3.5亿名用户的浏览器Opera宣布收购VPN服务商SurfEasy,这不仅是为了加强公司的投资组合能力,也是为了给用户提供浏览过程中更加安全的VPN ...


To draw the most attention to the photos, controls are hidden when the mouse hasn’t moved for 2 seconds or when the mouse moves off the window.

PhotoSwipe can be closed simply by scrolling the page (on non-touch devices), thus avoiding any extra movement of the mouse.

The background can be set to any color and transparency level.

The vertical margins between images can be controlled through an API.

PhotoSwipe is treated as a modal dialog, so aria attributes are added, and the gallery gains focus when it is open.

Problems solved by PhotoSwipe

Images are displayed at their highest possible size and are not limited by the width of the column or wrapper. Each image is isolated from the other content and fits the viewport vertically, so that the user can focus on it. If an image is larger than the viewport, it can be zoomed (which most galleries are unable to do).

Detail is preserved in responsive images

Let’s say the viewport on a user’s phone is 500 pixels wide and your uncompressed image is 1200 pixels wide. You wouldn’t want to serve such a large image on mobile, so perhaps you’d resize it to 500 pixels. But if the image has important details and the user zooms it, it will look pixelated. With PhotoSwipe, when the user taps the small image (500 pixels), the large one will load (1200 pixels), thus preserving all of the detail.

Compared to an inline horizontal JavaScript gallery

PhotoSwipe will not slow the page from loading, because you can defer loading the gallery’s JavaScript file or even load it after the user has clicked the “Open gallery” button.

Compared to a list of images, one after another

PhotoSwipe saves users’ bandwidth because it doesn’t load all images at once — just nearby images according to the user’s direction of movement. Also, it occupies less space on the page, and you can directly link to individual images in a gallery.

暗网强大到设计者都无法销毁 中国也可能有风险 - · 钱童心 中国访问学者章莹颖6月9日在伊利诺伊大学香槟分校校园失踪。迄今,美国警方仍未找到章莹颖的伅何痕迹。最新进展是:章莹颖家人数天前 ...


PhotoSwipe is built for performance and integration with your product needs.


PhotoSwipe is broken down into modules. All of them, except the controller, events & gestures and framework bridge, may be excluded from your build to reduce the size. You’re free to edit any of these to fit your requirements. Built with Grunt, linted with JSHint.

3.6 KB
  • Core
    basic functionality, like switching items or zooming
  • vp下载苹果
    all buttons and their actions, captions, etc. (the interface is built exclusively with public methods — an example of what the API can do)
  • Events & gestures
    touch, pointer, mouse events and gestures
  • Controller
    managing gallery items; adding content to the gallery; returning the sizes of images
  • Framework bridge
    generic functions, like 免费Ⅴpn安卓 and vp下载; feature detection
  • History
    changes URL’s hash suffix (#); enables browser’s “back” button to close gallery
  • Desktop zoom
    clicking to zoom; panning with trackpad or mouse wheel.
  • Tap
    firing tap and double-tap events

The total size of core modules (Gzip’d) is about 11 KB + 3 KB UI, which is about three times lighter than jQuery 1.11 and only 2 KB heavier than FancyBox.
The CSS comes out to 0.5 KB core + 1.5 KB skin + single SVG or PNG icons sprite. Uses Sass preprocessor.


  • RequestAnimationFrame is used wherever possible.
  • Only the transform and opacity properties are animated. Almost no paints occur during animation, making transitions as smooth as possible.
  • The frames-per-second (FPS) rate largely depends on the sizes of the images and the device itself. For example, landscape-oriented images that are 1000 pixels wide and displayed in portrait mode on an iPhone 4s running iOS 8 will animate smoothly at 60 FPS. If the images were 1400 pixels wide, then the FPS rate would drop noticeably.


  • PhotoSwipe keeps only three images in the DOM at once, because each “slide” is a composited layer, which consumes quite a lot of memory.
  • 暗网使用者:有些人应该被判处死刑_荔枝网新闻 - JSTV.COM:2021-8-2 · 如果有人问我去哪里观看CP(Child Pornography,即儿童色情作品)影片,我会告诉他伀永远都不要去看。其实,暗网世界中的儿童色情作品相当泛滥,在“暗黑维基”(Hidden Wiki)上甚至有“儿童色情影片”的链接专栏。
  • 家中看“黄片”是否违法?-中国法院网 - · 【案情】2021年8月,刘某在家中电脑上观看“黄片”, 三名民警突然造访,称其违反《计算机信息网络国际互联网安全保护管理办法》第五条第六项和第二十条,对其罚款1000元。

Supported browsers and devices

The script has been developed to work on every device, which means that basic functionality should be supported everywhere:

If you discover a problem on your device, please open an issue on GitHub, and provide as much detail as possible (OS name and version, browser name and version, screenshot or screencast, etc.).

弃 Windows 而拥抱 Linux,我有这些新发现! - hebtv:2021-2-21 · 你用的是 Windows 系统还是 Linux?作者 | Simon Frey译者 | 苏本如责编 | 屠敏出品 | CSDN(ID:CSDNNews)2021年圣诞节,我回家和父母一起欢庆假期,像通

If both touch and mouse input methods are detected, the script waits for two consecutive mousemove events to occur and only then applies the mouse-only features (for example left/right arrow buttons).

How the zoom animation works for opening images

  1. Once a thumbnail is clicked, its large version instantly starts loading.
  2. Meanwhile, PhotoSwipe creates a fixed-positioned layer with the duplicated thumbnail image, background, buttons and caption. The background and controls are styled with opacity: 0.001 (if it had opacity: 0, the paint would not occur in some browsers).
  3. A 50-millisecond timer starts. It is added to give the browser time to render the new layers (background, controls, image). Otherwise, the animation would start with a noticeable lag. TODO: change this delay depending on browser/os/device?
  4. Three CSS transitions start: one scales the image (scale and translate are animated), the second changes the opacity of the background, and the third changes the opacity of the controls.
    By default, the transition lasts 333 milliseconds.
    The background is a separate element, because animating opacity looks much smoother than animating an RGBa background-color.
  5. Once the transition is complete, the large image is added on top of the stretched thumbnail, whether or not it’s fully loaded.
  6. To make the swipe transition smooth, the two neighboring slides are readied at the sides of the viewport.
  7. If lazy-loading is enabled on more than two neighboring images, then those images would start to load now, too.

Are PhotoSwipe images crawlable by search engines?

PhotoSwipe does not force any HTML markup into the gallery — you have full control. Images will be crawlable if you'll have list of links to large images or the images themselves.

License and price

The script is free to use for personal and commercial projects. It falls under the MIT license with one exception: Do not create a public WordPress plugin based on it, as I will develop it.
If you need to use it for a public WordPress plugin right now, please ask me by email first. Thanks!

Attribution is not required, but much appreciated, especially if you're making product for developers.


The script was created by Code Computerlove, a digital agency in Manchester. In March 2014, it 免费Ⅴpn安卓 on development to Dmitry Semenov.
The new version of PhotoSwipe (4.0) was entirely rewritten, supports a much longer list of devices, and contains a lot of performance and UX improvements. Built-in support for jQuery Mobile has been dropped.