dimsemenov / photoswipe

JavaScript image gallery for mobile and desktop, modular, framework independent

PhotoSwipe v5 — JavaScript image gallery and lightbox

Demo | Documentation

Repo structure

• dist/ - main JS and CSS
• src/ - source JS and CSS.
  • src/js/photoswipe.js - entry for PhotoSwipe Core.
  • src/js/lightbox/lightbox.js - entry for PhotoSwipe Lightbox.
• docs/ - documentation markdown files.
• demo-docs-website/ - website with documentation, demos and manual tests.
• build/ - rollup build config.

To build JS and CSS in dist/ directory, run npm run build.

To run the demo website and automatically rebuild files during development, run npm install in demo-docs-website/ and npm run watch in the root directory.

Older versions

Documentation for the old version (v4) can be found here and the code for 4.1.3 is here.

---

This project is tested with BrowserStack.

photoswipe's Issues

runtime error when using jQM with ajax page transitions

Please see the demo at http://photoswipe-jqm.heroku.com/info
And the source code at https://github.com/nurey/photoswipe-jqm

Steps to reproduce:

1. load the demo in google chrome with javascript console open
2. click on the "images" tab
3. advance to next image using photoswipe control
4. close photoswipe
5. click on another thumbnail
6. observe error in javascript console: Uncaught TypeError: Cannot call method '_trigger' of undefined

Same steps in iOS Simulator render the app unusable after step 6

[iOS] Load a large images

When you have a large images in your gallery, for example: 200 images, each image about 70K, so the total load is: 200x70=14,000k = 14 MB

Yeah .... but look at this link: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html,

And we can see some first images in the gallery, in this case I can see first 140 images (140x70 = 9800KB), and other images (141, 142, .... 200) I can't see it ? is this a bug ?

Thanks for a cool framework ......

Love it :-) + small question

Playing around with PhotoSwipe in my native application on iPhone4 (JQM/PhoneGap). Really love PhotoSwipe because it's really gergeous. Also the compatibilty with different platforms and framework and the easy installation/integration is kind of sexy.

Just wondering... Is it possible to skip/switch off the thumbnail view when the gallery page is called? So when I open the gallery page, the first detail image with navigation opens directly.

Feature request: Toolbar should stay int the same state after swipe

Currently we can control the behavior of the toolbar after swipes using the captionAndToolbarHideOnSwipe setting:

• true means, that the toolbar is hidden after every swipe, no matter if it was visible before
• false means, that the toolbar is made visible after every swipe, no matter if it was hidden before.

The feature I'm missing is a more inteligent behavior: Why not add a third option auto which means, that the toolbar is hidden after the swipe if it was hidden before and the toolbar is shown if it was visible before the swipe. In other words, the toolbar preserves its state.

Thanks anyway for the great software.

Caption bar disappears when swapped to bottom

Here's a screen recording of what I'm seeing… (right click save to download)

http://www.kchtenthusiasts.com//web_pics/caption-bar.m4v

Summary:

The caption box disappears off the bottom of the page when swapped from the top to be at the bottom. It will then reappear in the correct spot when the window is resized. Any suggestions on a workaround?

This happens on iPad, Safari, & Firefox.

And I love the coding you've done. The best I've found for gesture controlled photo galleries. :-)

issues after device rotation

testing now on Android 2.2 (Froyo) in stock browser with the webkit only engine (no jQuery). When rotating the phone image and black background do not scale or refit to the viewport. Gets worse as you repeat.Will do some testing on my own, too. Just thought you should know.

Also, think that making the back button (on Android) to close out the overlay would be good. I've seen several people use the back button to close out of the image gallery doing this - but it takes them away from the page they were on - not expected to them.

Cheers-

PS - Awesome script!! Saved my life today.

Images too large

Ideally, the default setting for PhotoSwipe would be that images are never bigger than their actual sizes (and centered in the viewer). Is this an easy change?

Trackpad swipe support

It would be great with support for horizontal "scroll" swipes on track pads too, which show up as mousewheel (webkit) events with e.wheelDeltaX above zero when swiping to the left (previous image) and below zero when swiping right (next).

Tap to zoom and unzoom and going straight to slideshow

I love this plugin! Just wondering if you plan to add tap to zoom/unzoom like is done in the standard iOS photo viewer.

Also, not sure if this is the best way to handle, but I wanted to go straight into the slideshow and bypass the gallery. So I started with the exclusive-mode example, but set preventHide to false. Then I added a window.close(); to the code so that the window closed when you hit the X. Might be a nice option.

Oh yeah, even with the mouseclick firing, the gallery would flash up briefly. I added style="display: none;" to the Gallery DIV.

Not very elegant, but it works. Thanks again!

Full screen display issue with I-phone 4

Hello
After consulting some pictures on the I-phone 4 in full screen. The picture it's not in the right place and you can't access the control panel.

To fix it, you just turn your I-phone and it's ok.

How can I avoid this ?

PS : I'm using PhotoSwipe with Jquery mobile
!

http://media-partage.tk/image/1310027847photo.PNG

Thanks for your great plugin it rock's !

Works with Firefox, nothing in Safari / iPhone ...

Hello,

  I made the upgrade of the script and JqMobile, and now, my "gallery" is not working...

I can see it working on Firefox desktop, but, using Safari (and User Agent iOS 4), nothing is happening.
I really don't know why...

Thanks, I lost 2 hours for nothing ... :)

Swipe not "active" when controls are visible

Hi, an unexpected behavior I encountered was that I could not swipe photos when the controls were visible. This is a deviation from standard behavior on iOS devices. Is there a fix for this?

Great work on this!

Regards,
Matthew

Movement when zoomed and dragging

Great plugin! Thanks a lot.

I'm using on the iPhone and when zoomed and dragging the ratio of image movement to finger movement is more than 1 to 1, based on the unzoomed image I guess. This feels odd, and is hard to control, so I would prefer (at least an option) to make the ratio 1 to 1.

Compatibility with jQuery 1.6

First of all, great plugin. Thanks for your work. I tried implementing it but found that while using the latest version of jQuery (1.6 and 1.6.1) that the navigation controls don't work, both on click/tap events and keyboard controls. I reverted to 1.5.2 and everything worked swimmingly.

Image zooming on android

Hi again. This is not an "issue" - more of a feature request.
I noticed while testing my gallery site on an iphone, that I was able to zoom in and even rotate the images in the gallery. That was a very nice feature. Any plans on adding that functionality to android devices?

video support

Hi,
i woul like to know if it's easy to make photoswipe supporting html5 video tags.

Regards,

Luca

Issues with desktop browsers

Hi,

I have noticed that the gallery is not working fine with some desktop browsers :

• Opera version 11.10 (WinXP SP3) : when I click on an image, I get a blank black screen. No image, no button, no way to get back other than the browsers back button.
• Internet Explorer 9 (Win7 SP1) : same issue
• Firefox 3.6.16 (WinXP SP3) : same issue.
• Internet explorer 8 (WinXP SP3) : no gallery is displayed at all. When I click on an image, I get the defaut href (which is the full-sized image) .

Is there any way I can help you troubleshooting the issue ?
I get no error in the consoles (just some CSS errors in Opera, and unknown javascript error in IE8)

Thanks

NB : tested with version 1.0.5 and the untouched bundled example "index.html"

iPhone: Rotate device strange behave

PhotoSwipe/Query Mobile/XCode /PhoneGap.

When I am in the "swipe" mode (not thumbnail) and I rotate my iPhone4 (iOs 4.3.3), from portrait to landscape (or landscapre to portrait), PhotoSwipe does not adjust to the new screen size/format. The navigation bar has the wrong position and parts of the thumbnails appear behind the wrong sized zoomed images.

Is there a way to fix this? Or can I switch off device rotation only for the gallery page?

Cheers
Ralph

Possible to have two "exclusive-mode" galleries display on single screen?

Is it possible to have two different galleries, when in "exclusive mode", on the screen at the same time? For example, the top half of the screen is gallery1 and the bottom half is gallery2, and both work independently of each other?
Thanks,
Kristin.

Issues with PhotoSwipe on android phone

Great script! But when using it (or when viewing the demo gallery), with my Android phone (htc desire):

• The animation between photos is not running smooth, as it is on my pc
• When swipe through a gallery, it hangs after a couple of images. Then it's not responding on a new swipe or 'click'. Sometimes after a couple of seconds, an android-browser 'zoomout swipe command' it's working again for a couple of images.

Hopefully you could fix these problems.

Address bar does not hide (android 2.2)

Thanks again for fixing the previous issue!

Now if I only could get my android browser to hide the address bar when viewing a photoswipe gallery.!
That would make for a great fullscreen experience.
Is that something You could code ?

jQuery Mobile view problem

There's a problem with views order while using PhotoSwipe with jQM.
How to reproduce problem:

1. Create PhotoSwipe gallery with jQM
2. Add custom button to PhotoSwipe full view
3. use that button to change page to something
4. try to navigate back
   What's supposed to happen - you should go back to full screen or at least to gallery
   What happens - you go to the index page

JQM and rel=external

I LOVE photoswipe. Elegant and dead simple to implement. Great job!
Just wondering why in the JQM demo you use rel=external for the images? I setup a web app with 1.0.6 thats pulling images from flickr using phpFlickr, and although I initially was using rel=external to deal with the hash issue, it seemed to be resolved when I put the photoswipe initiallze within each "page". see m.markburstyn.com

Thanks, and again, live it! Keep up the great work!!
Andy

Previously selected photos getting used in new slideshow request

I have integrated two functionalities of PhotoSwipe in my website. They are

1. Clicking on any image, starts the slideshow from that image and continues for all the images in my defined "div" tag.
2. Using the "exclusive-mode-with-array.html" example for playing the Photo slideshow for the pictures selected by the user.

Both of this works fine when tested individually, but the problem starts when the user selects a few photos, plays them, closes the slideshow and now clicks on the individual image. In this case, the behaviour should have been as in "(1)", i.e. slideshow should start from the clicked image and continue for all the images in the defined "div" tag, but it some how plays the files which were selected earlier by the user.

I looked into the code, but somehow couldn't find anything related to resetting PhotoSwipe(). I would like to know is there any API / function call which can be used to completely reset PhotoSwipe?

Steps to reproduce:

1. Select multiple images from a list of images, and set the Image Source
   Code.PhotoSwipe.Current.setImages([ " + arrImages + " ]);
2. Play the slideshow for a while
3. Stop the slideshow
4. Click on any image, which will eventually start the slideshow

Observed:

Plays the previously selected photos

Expected:

Should start the slideshow from the clicked image.

I am not sure if there is something wrong with my implementation or a corner case bug in PhotoSwipe. Can the developer(s) / community users verify this behaviour?

No event dispatched on autohide

Small one: seems like there's no event dispatched on autohide. Or not the one that's dispatched on click.

iOS Zoom Pan Adjustment/Fix

First off, thanks so much for sharing with the community. Love your work.

To keep it short and sweet... when zoomed in it seemed like the photo would pan rather erratically, so I adjusted the pan function to account for scale, aiming to more closely replicate the native iOS photo viewer (i.e. slowing down the pan movement as you scale up).

I've pasted the adjustment I made below (created two new vars that divide dx and dy by the present scale). It seemed to work perfectly.

Anyway, I was hoping you could take a look and let me know what you think (particularly if you thought I was doing something stupid that might break functionality in a way I'm not anticipating). If it's clean, perhaps you could incorporate something similar into the next release? Cheers.

    /*
     * Function: pan
     */
    pan: function(point){ 

        var 
            dx = point.x - this.panStartingPoint.x,
            dy = point.y - this.panStartingPoint.y;
            dxScaleAdjust = dx / this.transformSettings.scale;
            dyScaleAdjust = dy / this.transformSettings.scale;

        this.transformSettings.translateX = 
            this.transformSettings.startingTranslateX + dxScaleAdjust;

        this.transformSettings.translateY = 
            this.transformSettings.startingTranslateY + dyScaleAdjust;

        this.applyTransform();

    },

Issue with content="width=device-width, height=device-height minimum-scale=1" on iOS

If I re-orient a Droid (Incredible, or EVO4g) from portrait to landscape, PhotoSwipe handles it well; it looks good and remains usable.

If I do the same on an ipod touch (and presumably iphone?) the rendering is such that the image is pushed down and to the left so that only about 75% of the image is visible. This also hides the 'X' button. Re-orienting to portrait does not restore proper rendering.

See here: http://www.ohmyhead.com/zenphoto/

How i can extend photoSwipe js ?

Hi

If i want do something on events : onShow, onNext, onPrevious.

How i can do ?

I have tried :
Code.PhotoSwipe.Current.show = function (){ console.log('test') };
Code.photoSwipe('a', '#Gallery');
But onShow events wil be overridden.

i tried with
Code.PhotoSwipe.Current.addEventListener('show', function(){ console.log('test') });

but nothing happen.

Not work, get errors from jquery.mobile-1.0b1

Hello,

the plugin are not working and i get follow errors in firebug:

b.height(i + j).data("page") is undefined
a.mobile.minScrollBack&&(j=0);d&&(d.he...ght("").data("page")._trigger("hide",
jquery....min.js (Zeile 49)

the mobile.js

$(document).ready(function() {
    $.mobile.ajaxLinksEnabled = false;
    var queue = new Array();
    if (window.innerHeight > window.innerWidth) {
        var orientation = 'portrait';
    } else {
        var orientation = 'landscape';
    }
    changeImgs(orientation);
    $(window).bind('orientationchange', function(event) {
        addToQueue(queue, event.orientation);
    });

    $('div.gallery-page').live('pageshow', function(e) {
        $('div#gallery a', e.target).photoSwipe();
    });
});

and some more functions..

Edit: Hmm.. ok, html-code i cannot write here, but this is how like the example has.

suggested improvement

My site has nearly 4000 photos. As such, I could not just populate the HTML with that many thumb img tags. Our Droid would catch fire!

So, instead I just put a plain text reference to the album whose page I'm transitioning to, and hooked to jQuery's "pageshow" event. When the event fires, it runs through my function to check if any div.gallery-item DOM elements exist. If not, then I know I need to do an AJAX call to the server with my album reference. It returns JSON with an array of all my image data, and I build up the list of div.gallery-item tags and call photoSwipe.

So, the improvement suggestion... for very large albums, you may have people populate their HTML with something like:

/url/to/thumb.jpg

Then when the pageshow event fires (or some other event, if not in jQuery), PhotoSwipe can convert all those spans to img tags. This gives the illusion of fast initial load, but seamless operation to the site visitor.

Example: (view in mobile device or with spoofed user-agent) http://www.ohmyhead.com/zenphoto/

Working together Mootool

Hi

PhotoSwipe is amazing and i want bring to joomla.

But joomla is using Mootool, and the simple inheritance class that photoswipe is using maybe conflict with Mootool

I get an error "Class.Mutators is undefined " form mootool when include simple inheritance class.

To fixed it, i have some modified with simple inheritance

this.Class -> this.SimpleClass

Class.extend -> SimpleClass.extend

So i have to modified photoSwipe class:

Code.PhotoSwipe.EventClass = Class.extend -> Code.PhotoSwipe.EventClass = SimpleClass.extend

Now , photoSwipe can work with joomla and mootool

But it's only for me. And i want to upgrade if photoSwipe is upgraded.

Could we do something to fix this issue ?

Thank

iPhone Browsing

I've implemented PS (animate-enhanced) with a default HTML mobile template based on DreamWeaver CS5.5. When browsing on the iPhone, the browser nav bar disappears usually, giving more room for the content. When viewing the PS gallery, the gallery assumes the browser nav is still there and doesn't fill the whole screen unless you somehow manage to keep the browser nav in place (not auto-hiding it).

In addition to that issue, I've noticed the default back functionality in jquery.mobile-1.0a3.min.js doesn't function well with PhotoSwipe, which you can test on http://m.aside.ca (currently only "Fashion" has content). The back button will read a #PhotoSwipe hash tag which was generated over top of the thumbnails but can't draw it again, or go to the main.

Any input or advise is appreciated.

swipe is not working on HTC Incredible

I am testing PhotoSwipe Live Demo with jQM on HTC Incredible running Android 2.2
using this url http://www.photoswipe.com/latest/examples/jquery-mobile.html#Gallery1 and swipe is not working. It works just fine in iPad, iPhone and HTC Thunderbolt. Is it known issue for HTC Incredible?

Line break in thumbnail anchor can cause a JS error

Not sure if you'd class it as an issue or not but if you have your thumbnail structured like this with an image inside and anchore and there is a line break before the img tag e.g.:

then the default GetImageCaption tries to use the firstChild of the anchor which due to the line break is a text node which results in the error "eL.getAttribute is not a function code-photoswipe-1.0.1.js line 336".

Stumped me for a wee while but a great little library!

Does not snap to next photo on swipe or when using the controls.

Does not snap to next photo on swipe or when using the controls. The gallery always thinks you are still on the previous photo. If I click the photo, it will finally become the current photo. Also, I will usually still see a part of the previous photo until I click on the photo.

I'm using a Motorola Atrix running Android 2.2.2.

Technical question about Photo swipe

Hello

I'm trying to use your gallery code : Photo swipe.

I have been working with the version 1.0.2, and 1.0.3.

Actually, I'm trying to set some HTML markup in the caption part, rather than just plain text.

Here is the code I use (jquery plugin version) :

    $(document).ready(function(){

        $("#Gallery a").photoSwipe(
            {
                getImageCaption: function(el){
                    var mybanner            = document.createElement("div");
                    mybanner.style.border    = "1px solid yellow";
                    mybanner.innerHTML        = "test click !";
                    mybanner.setAttribute('onClick',"alert('test');");

                    return mybanner;
                }
            }
        );

    });

I can get the yellow bordered div, and the onClick event is working on my PC (tested on Firefox 4.0 and Chrome 10, both on Windows XP).

However, the onClick event doesn't seem to be triggered on any mobile plateform (tested on Ipod/iOS and android).

Do you know if there is any reason for that ?
Is there any workaround, or another way of doing it ?

Thanks for your help, and thanks for the plugin, which is great... so far ;-)

Cheers,

Nabbo

Reuse problem

I use photoSwipe with jQm and I have a bit of reuse problem with it. When I dynamically change list of images and try to re-apply photoSwipe, it doesn't recognize picture I click (or tap) and always opens first picture.
You can look at demo here: http://geoapp.bk-edition.de/
How to reproduce:

1. Go to any gallery there
2. Try to open any image <- now it works fine
3. Change page
4. Try to open any image <- now it always shows first image

Exclusive mode in jquery mobile

Hello,

Not really an issue but I've not found the way for doing this (and I can not find other way to contact you regarding Photoswipe, sorry :) )

I want to run PhotoSwype with jQuery mobile in exclusive mode. That's because I do not want thumbnails list to be shown. In your jquery-mobile.html sample, when clicking on a button it should go to the first slide.

I tried this (I've been trying for the last 5 hours)

    $(document).ready(function(){



        $('div.gallery-page').live('pageshow', function(e){



            // Re-initialize with the photos for the current page

            $("div.gallery a", e.target).photoSwipe();

            Code.PhotoSwipe.Current.setOptions({

                preventHide: false,

            });         


            Code.PhotoSwipe.Current.show(0);                

            return true;



        })



    });

But thumbnails are shown for a fraction of time, and then it fades to slide 0. Even playing with FadeIn and FadeOut doesn't help.

Please, I'm desperate :) Any hints ?

Regards,
Alfonso

How to start Photoswipe in fullscreen initially instead of thumbnail listing page

Hi,

I need to start the Photoswipe gallery directly in full screen without displaying thumbnail listing page. I need to show thumbnail once user click on close button or tap on large image from gallery.

Is this possible?

Please help me out...it's bit urgent.

Pratik91s

Body Padding Issue

First I'd like to say thanks for your guys work on PhotoSwipe, it's awesome and makes my life much easier!

Anyway, on the current project I'm working on I've run into an issue and I'm wondering if it's something you have run into or know of a solution for. We've got a padding on our body tag to give spacing around all content without using a wrapper, however when we open a PhotoSwipe gallery the padding on the right is visible, but not on the left (we'd like PhotoSwipe to go full screen and ignore the padding). We can get around this by setting our body to have padding: 0; on .ps-active which works on desktops and iPhone. However this (changing the body padding) freaks out PhotoSwipe on Android and causes the gallery to disappear until you change the orientation of the phone or scroll up. Very strange and frustrating.

Hopefully it's fairly clear what's going on and any solutions would be appreciated!

Cheers,
Ben

No way to add link to image?

I'm not sure if this is a feature request or an issue of my own incompetence…

Is there a way to add a link to an image to open in a tablet web browser? I tried wrapping various tags and spans around the div to give the entire div it's own specific element but no luck thus far. (It always tries to process the link as another image) Thanks!

max and minUserZoom not stopping zoom?

Hello, I have things set up and working swimmingly for an ipad installation. I am having good luck with most of the configuration options, but can't for the life of me get min and maxUserZoom to work. Is there something I am missing?

Many thanks, this is a fabulous tool.

Probably not an issue, just help!

This code is totally amazing, first off!!! lol. I am having an issue, but as I noted in the title, it might be I just need help calling the jquery correctly. I have all the thumbnails on the page but i want to divide them in groups of three. so 1-3 only rotate amongst themselves when clicked, then 4-6 will rotate only those larger images and lastly 7-9 will rotate within those. does that make sense? I thought to try to activate the photoswipe feature within each group like so:

$(document).ready(function(){

$("#Gallery1 a").photoSwipe();
$("#Gallery2 a").photoSwipe();
$("#Gallery3 a").photoSwipe();

});

but the last gallery are the only images that get rotated when any thumbnail is clicked.
my page looks like this:

I would appreciate any help!!!

Support for Mac using Chrome...?

Any love for Mac OSX 10.6.7 on Chrome 12.0.742.91?

Image loads in same window, but no Photoswipe love :(

Firefox 3.6.17 on Ubuntu: black screen, no photo

I built 1.0.10 from source and brought up release/1.0.10/examples/index.html

The screen turns black and no photo appears.

The jQuery version works, but shouldn't the default version work with Mozilla-based browsers?

Firefox 3.6.17 on Ubuntu

Brief flash of background and old image on Chrome 12.0.742.68 beta

I built 1.0.10 from source and viewed release/1.0.10/examples/index.html

Going through the pictures either by clicking the arrow button or tapping arrows on the keyboard, there's a brief flash after the current image slides out and the new image slides in. The old image becomes briefly visible, and the background web page becomes briefly visible.

This is on an old laptop running at 800MHz. I don't know how visible this flash is on faster computers.

There is no visible flashing on the jQuery-based PhotoSwipe.

Chrome 12.0.742.68 beta (Linux)

I tried putting alerts into the onShowPreviousEnd function in slider-class.js but already when that function is first entered, the old image is showing. The new one doesn't appear until this.dispatchDisplayCurrentFullSizeImage().

Opera Mobile

Hello,

Is there any indication when can we expect Opera Mobile support? In current situation there is only a black rectangle when you click on image.
Is this something related to Opera’s support of CSS3 or JS capabilites?

White background on orientation change

Hi there,
First of all, thank you for providing a really good photo gallery for my first iPad web app development!
I've noticed that on changing the orientation of the iPad (whilst in full gallery view) there is a delay in the picture re-scaling to the size for that orientation view. This allows the previous view (thumbnails etc) to be seen when the image is re-scaling... is there any way of fixing this? I've checked it on your example gallery and it does the same thing.
Cheers,
Vicky

Layout does not refresh on orientation change?

Hello!
Lovely gallery - thanks.

I have a question regarding the gallery layout. It seems the gallery gets messed up when i rotate my phone to landscape mode or vice versa.

It looks fine when i use my phone to look at your live demo at
http://m.codecomputerlove.com/flickr-uploads/

however, when I use the code for my own gallery, or even when I look at the example galleries supplied with the code, the layout gets distorted on the phone when changing orientation.

any tips?

Navigation very small on iphone.

I implemented the photoswipe 1.0.12
On Mac/Safari if you resize the page the navigation stays big.
On the iphone the navigation is very small, looks like it is resizing with the image.

In the example of codecomputerlove it is fine.
What can be the problem?

Thanx,
Wendela