HighSlide & Touch Devices

[CookieMonster]

Replace this code with the code you posted, correct ? Does it matter your code posted shows this.slideshow.pause() as I'm not using a slideshow ? The code you posted will guarantee to work with touch devices ?

Code: Select all

hs.Expander.prototype = {

error : function(e) {

	if (hs.debug) alert ('Line '+ e.lineNumber +': '+ e.message);

	else window.location.href = this.src;

},

Please give us a link to your page, the one that doesn't work.

There's nothing special being done in those barebones examples, and my own pages that use Highslide JS generally work OK on small mobile devices, since "a touch is a click," which is all that Highslide JS is looking for. I'm not doing anything special to accommodate them, though the text controlbar is far preferrable to the default graphic version, since there's no "hover" on a mobile device, and small targets are hard to hit. Setting it for "click for next" also helps:

Code: Select all

hs.Expander.prototype.onImageClick = function() {
	this.slideshow.pause();
	return hs.next();
}

A quick example: http://misterneutron.com/touchDemo/

[MisterNeutron]

To repeat, there's nothing specific to mobile devices here. Highslide JS, without any modification, works reasonably well with mobiles. The code I posted just makes it a little easier for mobile users - if they tap the enlarged image, they get the next image in the gallery instead of having the expander close. Similarly, I would avoid things like a thumbstrip, since those take up too much screen real estate on a mobile device, and present touch targets that might be too small.

I think you're making this much more difficult than it really is. Touch-enabled devices simply substitute a touch for a mouse click. There's nothing more to it than that.

[CookieMonster]

I understand; you never explained why if as we both know touch is simply clicking on a desktop, then why when you tap or touch on a Highslide image in my case it's not working ?

To repeat, there's nothing specific to mobile devices here. Highslide JS, without any modification, works reasonably well with mobiles. The code I posted just makes it a little easier for mobile users - if they tap the enlarged image, they get the next image in the gallery instead of having the expander close. Similarly, I would avoid things like a thumbstrip, since those take up too much screen real estate on a mobile device, and present touch targets that might be too small.

I think you're making this much more difficult than it really is. Touch-enabled devices simply substitute a touch for a mouse click. There's nothing more to it than that.

[MisterNeutron]

Without being able to see what you're doing, I can't even begin to guess. You're not providing any information beyond, "It doesn't work."

[CookieMonster]

Atleast when I click on the paper pile image with a mouse I get the message "loading...", not the case on a touch device like a phone ?
http://www.thecreativesheep.ca/wdp/wip/ ... _WIP_2.htm

Without being able to see what you're doing, I can't even begin to guess. You're not providing any information beyond, "It doesn't work."

[MisterNeutron]

For starters, you're using a very obsolete version of Highslide JS. Get version 4.1.13 before you go any further.

Then get the page working for a regular PC (it's looking for the drop-shadow.png outline file in the graphics/outlines directory, but not finding it). There's no sense trying to debug for mobiles when you haven't even gotten it working in the more typical environment. First things first.

[CookieMonster]

Up to this point, it is not working on mobile, I have to do another test but no positive results.

For starters, you're using a very obsolete version of Highslide JS. Get version 4.1.13 before you go any further.

Then get the page working for a regular PC (it's looking for the drop-shadow.png outline file in the graphics/outlines directory, but not finding it). There's no sense trying to debug for mobiles when you haven't even gotten it working in the more typical environment. First things first.

[MisterNeutron]

OK, well now it's time to engage in Debugging 101.

Here's what we know:

• There's no special coding required to make HS work on a mobile device.
• There's no HS coding option that would make it not work on a mobile device.
• The barebones examples, as well as my simple demo, work on a mobile device.
• HS works on your page on a desktop machine.
• HS doesn't work on your page on a mobile device.

So, what conclusion does that lead us to? Easy - there's something on your page, something that's aimed directly at mobile devices, that somehow cripples HS. So, comment out everything that's targeting mobiles. At that point, I'm guessing that HS will work just fine. Now start adding the mobile-specific stuff back in until you discover which piece of it is causing the problem. It's probably some bit of CSS. Nothing immediately leaps out at me, but you've got several hundred lines of CSS in there.

Another quick thing to try - move the loading of highslide.css so that it's after all of your inline CSS. That might be instructive.

[CookieMonster]

It took a few days, but with help, we were over looking an element that needed to have positioning and a z-index, now it works.