-
OK, well adapting Slimbox 2 by itself to work on mobile could be quite a lot of work, and even if fairly simple, would be difficult without a device to test on. I have had some luck adapting much simpler code that I wrote, but even that took a lot of back and forth with someone who was testing it for me. I get frustrated because it's not always clear to me what is being seen, and the tester doesn't always follow instructions. So I'm choosing not to take this on at the moment.
My best recommendation would be to find a lightbox type script that works with mobile. Even then it might be tricky tying it in to the PHP Photo Album script.
-
John,
Thank you for the help! I have decided on just disabling Slimbox2 on the mobile phone.
UPDATE:
Ignore the above, I seem to have got it to work!
-
UPDATE:
Okay so, in the script provided here: http://www.dynamicdrive.com/forums/s...nside-Lightbox
the lines
Code:
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
.....
}
Are used to detect if mobile devices are used (woops, didn't notice that).
I commented out the if statement (and its closing bracket) and it seems to be working! A little big for the screen, but nothing CSS cant fix.
Tested on android and iPhone, both working.
-
Yes it's visible and working here now.
-
Oh, right, I knew about that. But in the thread you referred to where I discussed using Slimbox 2 with PHP Photo Album, I thought I instructed that that part be removed. Maybe not.
Anyways, once it is working, you also have to contend with the possibility that the next/previous buttons might not appear. They're :hover pseudo class in css I believe and might not work with touch events. If not though, you could just have them be always visible.
-
May have ran into another issue.
It seems to be working for some of the photos, and not for others. Pops up and disappears for some photos. Could this just be a cache issue? Or is it the order in which I'm loading my scripts?
EDIT: Noticed if I hold down, when I click, for a little longer than just a tap, it seems to work. Could this be something to do with the "touchstart" event we added to ddphpalbum.js?
EDIT 2: Went ahead and removed the following code from ddphpalbum.js and it seems to be working on my iPhone IOS8. I know you said that sometimes the click event on a mobile phone does not always work the way it should. Do you have any other suggestions?
Code:
phpimagealbum.routines.addEvent(albumdiv, function(e){
var e=window.event || e
var target=e.srcElement || e.target
if (target.tagName=="IMG" && target.getAttribute('data-index')){
thisalbum.onphotoclick(target, thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][0], thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][1])
}
}, "touchstart");
-
I wouldn't worry about it unless some mobile doesn't work.
If that happens, you can put back the code you just removed and make it conditional on the browser recognizing touchstart and have the click code conditional upon the browser not recognizing touchstart. If you need to do that later let me know.
-
John,
We truly appreciate all the help you've given us!
We do have one more question though. We're messing with the CSS of slimbox popup, and are wondering how we can do the following:
On Desktop:
- Make the popup show up full sized (images are all sized at 600px width)
On Mobile:
- Have the popup fit 100% to screen width
Basically, on desktop it works great, as it should, but on mobile phones it shows popup&images full size (600px) thus pushing them off the screen of most phones.
The CSS is a little confusing to us when it comes to slimbox. I'm assuming maybe some of the CSS is populated using JS but can't figure it out.
-
Well media queries would be the way to go. I'm just starting to understand these, so anything I advise might need work. Beverley is more experienced with these. Hopefully she will have a look at what I put forth here and add any helpful comments.
The way I see it, for this sort of thing you first have to determine the various styles that will be good for various screen resolutions. It would be nice to be able to use a percentage width for this, but in the one emulator I'm using, that doesn't seem to work well.
Anyways, the div that shows the larger image has an id of lbImage and the way the script works is that the larger image becomes this div's background image.
I found that on an iphone 5 emulation that has a little more than 500px width available with in portrait view, that adding these styles worked well:
Code:
max-width: 500px;
background-size: contain;
As a media query in the stylesheet I think that would look like so:
Code:
@media screen and (min-width:540px) and (max-width:600px){
#lbImage{
max-width: 500px;
background-size: contain;
}
}
For other devices - screen widths really, you would do a similar thing. The min and max on the media line would change to fit the device/screen you are thinking of, while the max-width rule for the #lbImage selector would be set to fall within that range and to fit well. The one thing that would not change is the background-size: contain; rule (it forces the background image to fit inside the div). So for a screen that was - say 320 px wide, something like so could be added to the stylesheet:
Code:
@media screen and (min-width:300px) and (max-width:320px){
#lbImage{
max-width: 250px;
background-size: contain;
}
}
And you would need to make up media query blocks like these for all anticipated ranges of widths that might be encountered.
I think you can see why a percent max-width for lbimage would be so much easier. But in the emulator I tried that in, the lbimage was off kilter to begin and each time you hit next, it got smaller by the same percentage. If - and that's a big if, if that's just an artifact of the emulator, we could set max-width to something convenient like 90% and just let the browsers and the script work the rest out. One rule set of:
Code:
@media screen and (max-width:650px){
#lbImage{
max-width: 90%;
background-size: contain;
}
}
Would then do it. Try that first, you might get lucky. Otherwise, as I say, you will probably have to make up rules for all of the possibilities of screens less than 650px wide.
BTW, again in the emulator I used (Chrome's native device emulator) The iPhone 5 was fine with that page 'as is' if viewed using its landscape mode. Something to think about.
-
John,
Thank you, the @media and fixed widths seem to be working. The percentage max-width however did not work. Does the same thing the chrome device emulator showed.
For now, we setup a couple different device sizes. Thanks again!
