Viewing Photoswipe for Mobile devices
Photoswipe for Mobile devices
|
User: Roddy 9 years ago
|
|
|
PhotoSwipe always worked on iPad and on iPad in the simulator. It has never worked using the simulator using any of the iPhone devices. I don't know if this is a bug in iOS or just in the simulator. The simulator has changed a lot. Like all things Apple, the more complicated they make it - the less useful it becomes. I doubt if you will be able to resolve the z-index thing due to the way in which EverWeb encloses everything in a parent div. If you added some intro text to the gallery it would force users to scroll down the page until the nav icon is out of sight. Then it won't appear in the Lightbox. Another option is to use a nav icon - without the drop down - as a link back to the Home page where visitors can use the nav on it. My version uses percentage widths for the thumbs and the container so that it can easily be used for different thumb sizes. I also optimised all the code and got rid of the the files that aren't necessary. I'll email you a copy as it will make it easier for you to work with. ------------------------------- 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: Roddy 9 years ago
|
|
|
OK, I figured out how to fix the z-index problem. The answer is so simple I wonder why I didn't think of it earlier! I have emailed you a new HTML file with instructions in comments about what code to put where. Just drag it into the folder I sent you to replace the file that is there. When you open the index.html in your code editor, all will be revealed. My problem is that I very rarely thing about what I'm doing. I'm usually thinking about the next thing I'm going to do. The answer came to me when I was away from the computer and sitting at the mixer doing some audio production. If I've screwed up the recording I'll tell the client it was your fault! ------------------------------- 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
|
|
|
I sincerely hope you didn't screw up the audio recording and especially blame it on me! I now have Photoswipe working perfectly on mobile, overlapping the nav menu. But on desktop, the EW nav menu directory titles are still set at a higher z-index. It's the only thing overlapping my images. On a 27" display, it looks fine as the nav menu is generally above the photos. But on my laptop, they're a bit of a nuisance. If I have to live with it, it's not really that big of a deal. All things considered... If others are interested in using Photoswipe and come here looking for help/tips, here's a couple notes in addition to everything above: 1) I amended this line in the Head CSS (where bolded) for desktop. It defaults at 420px. .pswp__caption__center {font:14px Verdana;color:#CCC;text-align:center;max-width: 600px; } </style> 2) IMPORTANT. If dimensions of the thumbnails don't match the dimensions of the large image, you have to add 'showHideOpacity:true' in the photoswipeInit.js script. This adds a fade dissolve during the outgoing transition that makes things appear smoother. I simply amended the file, amended its title and saved it alongside the other script. Then depending on my gallery, I can call up either one. Add the line here (bolded): // define options (if needed) options = { showHideOpacity:true, index: index, 3) For reference, here's one of my mobile galleries... here's the same gallery on desktop. On mobile, you can swipe, double-tap, and share via Facebook, Twitter, Pinterest, or Download the file. On desktop, in addition to sharing, you can zoom in, scroll around the image, go Full Screen, and navigate using the buttons or with the keyboard arrows. You can also add captions and alt text. In short, it's pretty awesome. And it's free! ------------------------------- 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
|
|
|
If you use percentage width and auto height like I did in my example you don't have to worry about the size/aspect ration of the thumbs. Try increasing the z-index of the .pswp container to bring it in front of the navigation in the main website. Your navigation z-index is 10009 so use something a little higher... .pswp {z-index:10100} The z-index navigation bug has never been fixed which is why we need to use such a high value. ------------------------------- 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 - 19/01/2015 12:04:51 If you use percentage width and auto height like I did in my example you don't have to worry about the size/aspect ration of the thumbs. Try increasing the z-index of the .pswp container to bring it in front of the navigation in the main website. Your navigation z-index is 10009 so use something a little higher... .pswp {z-index:10100} The z-index navigation bug has never been fixed which is why we need to use such a high value. First point, I know. But since I have to copy and paste all the other code, it's no big deal to just add the thumb dimensions too. Second point, if I increase the z-index for the .pswp container, won't that prevent the navigation menu dropdown from falling on top of the thumbs? Or is that index specific to the slideshow (when photos are enlarged)? Will I then have to increase all the other z-index's (there were about 5 or 6: buttons, sharing feature, etc..)? ------------------------------- 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
|
|
|
The .pswp container is separate from the div with the thumbnails and is the one that holds the enlarged images, controls etc.
------------------------------- 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
|
|
|
Perfect. Thanks. Everything is just... perfect.
------------------------------- 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. |