Image popup behaviour on smartphones/tablets

[caldoverde]

I'm just in the process of converting a fixed site to a responsive one. Previously I was using a WordPress plugin called Highslide Integration on the WordPress part of the fixed site and a separate implementation of Highslide on the static part. However, having made the switch to the fluid layout, the WordPress plugin won't play ball any more for some reason and it's beyond my limited Javascript and php skills to figure out why. So I've switched to using the Highslide implementation on the static part of the site, together with another plugin which simply automatically injects

Code: Select all

class="highslide" onclick="return hs.expand(this)"

into

Code: Select all

<a href="any image file" >

I've got that working all sweetness and light BUT for one thing. With the previous WordPress plugin on a smartphone, images would appear in their popups, sized to fit the viewport (ie. not the full size images) and you could then reverse-pinch them to zoom in. This is ideal for smartphones as the full size images are gargantuan and really only suitable for viewing on a desktop, so its not appropriate to use the expand to full size button on a phone.

Now I've switched Highslide implementations, the smartphone image popups appear as expected, but reverse-pinching no longer has any effect. The images remain static and don't zoom in. Presumably this is down to a difference in one of the settings somewhere in the two different versions of highslide.js? But unfortunately I can't view the plugin's version to compare because it's been gobbledegooked. I've replicated the plugin's default user-modifiable settings, checked all the CSS and been through the API reference on the Highslide site, but I'm really at a loss as to which setting this is likely to be as I don't quite understand all of the settings and what they do.

A sample page with the Highslide implementation is here, though you will have to look at it on a phone to see what I'm talking about.

Can anyone help with this please? Hilde? Mr Neutron?!!

[MisterNeutron]

Wish I could help, but this is out of my league. The sad truth is that there's no support for swipe gestures (or pinching) in Highslide JS, and I haven't the slightest idea how one would add it. Apparently the person who put together the plugin managed to work it out.

[caldoverde]

Hmmm ... well the Highslide Integration plugin is pretty old too and is no longer even listed let alone supported, so this functionality must surely be buried somewhere deep in Highslide's capabilities ...? From what I've read on the author's page it doesn't seem like he added anything extra?

[MisterNeutron]

Well, open highslide-full.js in a text editor and take a look. I think you'll discover that the only inputs it recognizes are standard keyboard inputs and mouse clicks.

Edit: In fact, this all rings a bell. I seem to recall that one of the problems with Highslide JS on a smartphone is precisely the fact that the phone interface allows the visitor to alter the size of the popup image, but the script itself has no idea that it's happening, and has no way to compensate for it in any fashion. Alas, I have no touch-enabled device with which to test it.

[caldoverde]

Of course! It's default behaviour for images, I believe. But somehow it's not working now ...

I read over the plugin readme again as something in the back of my head reminded me that in order to run the plugin the user has to download Highslide separately and install it in the plugin folder. So there's nothing been added by the plugin developer apart from a jQuery routine to inject the inline Highslide code and a php file to insert everything else in the head section. The onclick code in this case is

Code: Select all

onclick="return hs.expand(this, {wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.75, align: 'center'})"

though I'd noticed that the dimmingOpacity wasn't working the last time I checked.

So this issue must be down to something that's been implemented in the new version that wasn't there in the old which is causing the images NOT to behave according to default? I notice that scrolling the page also scrolls the popup out of view. I can't be certain, but I think before the positioning was absolute (or however it works in Javascript) so the image was fixed in the viewport. That would kind of make sense, no? If it's pinned in place then a reverse-pinch would zoom in rather than just scrolling or moving the image about which is what happens now? And it must be something in the default settings because the user-defined ones are all the same.

I ran a file comparison between the packed highslide.js used by the plugin and highslide.packed.js which was included with the Highslide implementation I'm now using and the only difference picked up was the versions. The latter is 4.1.9 (2010-07-05) while the plugin version is 4.1.12 (2011-03-28). I'm going to try using this and see if it makes any difference.

[MisterNeutron]

I notice that scrolling the page also scrolls the popup out of view. I can't be certain, but I think before the positioning was absolute (or however it works in Javascript) so the image was fixed in the viewport.

No, the default behavior is for the popup image to scroll out of view if you scroll down. Putting it in a fixed position requires some code-hacking: http://forum.highcharts.com/viewtopic.php?t=3030

Edit: More complete solution, from Hilde: http://www.highslide.com/studies/position-fixed.html

[caldoverde]

Ha! Sorted it! Amazing what a night's sleep can do ...

It's nothing whatsoever to do with Highslide. It's the html meta tag that flags a page as mobile-friendly. I knew nothing about implementing responsive layouts when I started this process so I just copied the meta tag from a nice little jQuery slide-out menu system I implemented for the mobile/tablet viewport sizes. The meta tag I was using stated

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

I've changed this to

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0, user-scalable=yes">

and all is hunky dory, including the menu system. The images pinch-zoom beautifully. I've also implemented Hilde's code for pinning the popup to the viewport as this makes more intuitive sense to me when viewing them. Thanks very much for that.

Two more minor issues to sort then I'm DONE! (can but hope ...)

[MisterNeutron]

I've also implemented Hilde's code for pinning the popup to the viewport as this makes more intuitive sense to me when viewing them. Thanks very much for that.

Just don't combine that mod with the use of the "full expand" icon. If you do, the visitor will be able to make the image larger than the viewport, but then have no way to scroll up or down to see all of it!

[caldoverde]

Hahaha! Yes ... already discovered that ... and removed it again. Thanks.