Viewing Photoswipe for Mobile devices

Photoswipe for Mobile devices



User: Christopher 9 years ago
EverWeb's feature set is pretty limited for Mobile sites right now. There's no mobile navigation and there's no mobile-specific gallery or slider. I'm having to implement both through html snippets and it's taking a lot of time!

Roddy has helped me implement Photoswipe galleries but it's not working as well as it should with iOS rotation. The first couple of rotations work fine but eventually 80% of the photo is placed off screen, forcing me to pinch and zoom to bring it back in or click back and restart. I can reproduce this every single time. I've tried both the non-JQuery version and the JQuery version. Since EW is now automatically adding JQuery vs 1.9.1 to every web page, could this be the reason for all my troubles? If so, I need a solution! Trying to problem-solve this on my own is a huge waste of time!

It should be noted that the Photoswipe developer's page works perfectly on my iPhone 5 no matter how many rotations I make.

You can try my sample pages here and here. Since images are different sizes, the viewer is naturally going to want to rotate here and there.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
You should note that the PhotoSwipe website is using the jQuery Mobile framework to create the site and the jQuery plugin version of PhotoSwipe with jQuery V1.5.2.

jQuery changed radically in V1.8 - I think - and some older plugins will not work properly - or at all - in these later versions.

PhotoSwipe is available in a non jQuery version and it would make more sense to use this on a mobile website. This is not an option with EverWeb since it inserts jQuery on every page.

I note that the next version of PhotoSwipe is not due until sometime in 2015. This is probably due to the fact that it will use jQuery 3 or, more likely, the Compat version.

jQuery V1.9.1 is now about 18 months old and I, for one, would rather be using V2 since I have no desire to support ancient versions of Internet Explorer. I would also like to use some older plugins which require V1.6.

I cannot think of any good reason to insert jQuery on every page of a website. I think it would be better if we had an option to turn this off in the Site Publishing Settings page. Then we could insert our version of choice on a page by page basis.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul-RAGESW 9 years ago
Quote:
I cannot think of any good reason to insert jQuery on every page of a website. I think it would be better if we had an option to turn this off in the Site Publishing Settings page. Then we could insert our version of choice on a page by page basis.


It is going to become needed on more pages in the future. I will look into further changes/enhancements with this for version 1.8.

-------------------------------
Paul
EverWeb Developer
User: Christopher 9 years ago
Hi Paul, if you can fix things so Photoswipe will work once again (the problem is rotating in iOS; even on Roddy's test page), I for one will become a customer again to be eligible again for the new upgrade.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 9 years ago
There's a new version of Photoswipe out. Roddy, any chance you'll be updating your everwebcodebox page to save users like me hours and days trying to figure out how to implement it? :))

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
No, I won't be using this version of PhotoSwipe and you can find out why by having a look at the "Getting Started" section on THIS page.

The main reasons are that PhotoSwipe is no longer a jQuery plugin and EverWeb has committed use to using jQuery on every page, the individual image files need to have their dimensions predefined and the controls are not suitable for use on non-responsive websites.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 9 years ago
Quote: Roddy - 29/12/2014 3:44:54
No, I won't be using this version of PhotoSwipe and you can find out why by having a look at the "Getting Started" section on THIS page.

The main reasons are that PhotoSwipe is no longer a jQuery plugin and EverWeb has committed use to using jQuery on every page, the individual image files need to have their dimensions predefined and the controls are not suitable for use on non-responsive websites.

Sorry can you help me understand this better. I can create new controls. I can define my image dimensions. Is it the conflict with EW's use of JQuery that is the problem?

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
It's not a conflict. There isn't much point in having jQuery load and NOT using a plugin rather than vanilla java script - especially on a site that is going to be downloaded over cell phone networks. It's kind of odd having jQuery download on pages that don't need it. Being as how we are stuck with it we might as well use it.

I tried the demo on the PhotoSwipe website when I first looked at the new version and it screws up just the same as the old one on iPhone. That's the main reason why I didn't look at it too hard.

When I do sliders for smart phones I use no more than 12 images - all of the same size - and display them using a simple captioned swipe slider. I don't see much point in loading a thumbnail grid on such a small screen. All the images should be of the same aspect ratio so that the visitor doesn't keep having to switch between portrait and landscape mode like a contortionist!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 9 years ago
Paul, can you please weigh in here. If I go to the trouble of figuring out how to implement Photoswipe into a mobile page, will it work as expected or will the forced use of JQuery cause it to behave as before – screwing up on rotate? If the latter, will you give us the option to prevent JQuery loading on every page as Roddy is requesting? And soon!

I've tried the latest version of Photoswipe with my iPhone and it works flawlessly. I can rotate all I want without problems. As yet, EW doesn't provide a better solution for a mobile photo gallery in my opinion. You guys should add it to EW. It's awesome.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 9 years ago
Paul... can you please address this.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 9 years ago
Hello Paul. Do I have to submit a ticket to get a response?

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Paul-RAGESW 9 years ago
I will look into this and see what I can come up with.

-------------------------------
Paul
EverWeb Developer
User: Christopher 9 years ago
Yes! I got the test demo to work on my site using its Vanilla JS. It works flawlessly, no problems whatsoever with rotation. So far... Now just to amend and style using my own photos.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
I created a demo with PhotoSwipe 3 and it still appears to have the same problem - in the simulator at least. I really don't like the fact that the image size data is required for each slide. It's a lot of extra work if the images are of different sizes.

Here's a demo with all the krap cut out of the code and just the necessary files....

http://everwebcodebox.com/widgetbox-demo/photoswipe-3/

I also did a demo of Blue Imp which is much simpler...

http://everwebcodebox.com/widgetbox-demo/blueimp-gallery/

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 9 years ago
Works perfectly for me. I'm afraid I'll jinx it by saying that but here's my mobile link. Look at it on your iPhone if you have one. Here's a link for desktop.

The z-index is an issue though which I haven't figured out how to fix yet. I need the nav both on my mobile and desktop to be above the gallery thumbs. But under it when the photos enlarge. The z-index for photoswipe appears to be 1500 (with variations up to 1620).

EDIT: It's true, it's a LOT of work to implement. But it works like a charm on a phone and I like that it has sharing capabilities. And on desktop, you also get fullscreen plus zoom... all in a clean minimalist look.

Last edit 9 years ago

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com


Post Reply
You must login or signup to post.