Highslide on iPhone

[torstein.honsi]

I have my own iPhone now so I can study it live. In the example file, the thumbs make sense as you can click on each image.

To have a play button, try pasting this code in mobile.js together with the navigation arrows:

Code: Select all

        hs.registerOverlay({
            position: 'bottom center',
            width: '20%',
            html: '<div class="navbutton" style="text-align: right" onclick="hs.getExpander().slideshow.play()">ÔÇ║</div>',
            hideOnMouseOut: false
        });

Alternatively, a regular controlbar can be used, but it must be styled so that the buttons are easier to hit.

[mdewyer]

Congrats on getting an iPhone! I'm sure that'll help out a lot. Plus, they're just fun

[piran]

I have my own iPhone now so I can study it live.

That is quite the best news I have received all day;~)

In the example file, the thumbs make sense as you can click on each image.

Yes, I agree... with only three thumbs. I was referring
to the 100(s) of thumbs on top of the gallery image of
my albums which regularly exceed 100 images.
I think you call it the thumbstrip?

To have a play button, try pasting this code in mobile.js together with the navigation arrows:

It didn't work when RoadRash suggested it and it still
doesn't now;~/ The 'button', as it were, sort of appears
but there is definitely no play functionality occurring.
There is still a language problem. Every time you
specify that odd miniature half-chevron character
I see it on screen but my browser shows a diamond
shaped error query character until I substitute it
with some alias that works better. For the moment
I've just used a bullet character of low opacity on
account that it remains dysfunctional.

Alternatively, a regular controlbar can be used, but it must be styled so that the buttons are easier to hit.

How big? On a similar vein, I suggested the
MobiOne emulator... does its emulation accurately
reflect what you see on your iPhone? I've pointed
MobiOne to my attempts at an iPhone-friendly
site and was able to navigate and use everything
tolerably well with what it calls Multi-Touch Mode
activated. This puts a big fuzzy ball onscreen...
seems to work well but I don't know how accurately
it might be representing the average human digit.
For instance it is perfectly capable of using the
given controlbar's icons on a gallery... if your
mobile.js file's disabling line is disabled.
For instance the MobiOne emulator's Multi-Touch
Mode fuzzy ball cursor is easily able to properly
use the control icons shown in the captions of
RoadRash's demo album:
http://roadrash.no/hs-support/example-g ... ption.html
Thoughts?

[piran]

Another MobiOne emulator point: If the disabling line
in mobile.js (for slideshows) is disabled, so as to allow
my normal gallery stuff to show up in an iPhone, then
the controlbar unexpectedly appears when there is a
horizontal/vertical format change in the main image
during a slideshow. The onmouseout stuff works to
hide the now rather big controlbar but unexpectedly
keeps bringing back that controlbar on those format
changes;~/ Does that happen on a real iPhone!?

[PostEdit: Solved? Reduce the margins a little more
to avoid any overlapping over the screen's edges.]

[piran]

Reliable sizing on such a small screen is 'tricky'.
Is there a command line way on the lines of the existing:

Code: Select all

// Add a meta tag to have the iPhone render the page 1:1

to put the iPhone into a fullscreen mode ie
disabling the rendering or screen take-up of...
* the Address Bar,
* the Scrollbars and
* the Button Bar?
If this could be done then we would have at least a
reliably sized target (screen area) for which to aim.

[torstein.honsi]

[quoteadmin wrote:I have my own iPhone now so I can study it live.

That is quite the best news I have received all day;~)[/quote]

Hold back the champagne, I've had an iPhone for over a year and this is the second one:)

I'm sorry for the unresponsiveness on this issue, it's just that I'm swamped with work so I have to focus on one issue at the time and put everything else on hold. Generally, I wanted the mobile.js to be a very clean and simplified version of the gallery. No controlbar, no play/pause, only open the thumbnail, go next or previous and close. If navigation controls should be used, it should be implemented in the same way it is implemented in the native iPhone photo gallery. Also going next and previous by dragging the image would be a useful feature, as it would allow us to hide the arrows.

For advanced functionality perhaps you should try not using the mobile.js at all, just add some bigger buttons to the regular controlbar.

[mdewyer]

I agree. I think the mobile.js should be a simple/clean version of the gallery, made specifically for mobile devices. I think some of the ideas you have piran are good, but probably should be done separately from the mobile.js. The whole goal for mobile stuff is to keep it simple and not a big file size, especially when you're trying to make something that you can distribute to multiple people. I think where Torstein is going with it is right on track. If it wasn't for how the iPhone handles certain things, I think Highslide with the mobile.js file would be just about perfect on the iPhone. Hopefully we'll be able to figure out a way to deal with the odd viewport, and Highslide will be the THE javascript solution for viewing images on the iPhone (and other mobile devices). It's already one of the best solutions out there as it is. (Great job Torstein!)

[torstein.honsi]

Thanks! As soon as I get my head above the water I'll look for a workaround for the viewport issue.

[Moonshine]

This may have some helpful information for you...

http://doctyper.com/archives/200808/fix ... le-safari/

[torstein.honsi]

Thanks!

[Moonshine]

Just another little snippet to share as I had to quickly *hack* together iPhone and iPad support here today. Big warning, I am NOT a javascript coder so this will be painful to some people's eyes.

Code: Select all

hs.Expander.prototype.onInit = function() {
    // Add CSS rules
		var stylesheet = document.getElementsByTagName('style')[0];
		var wintop = window.pageYOffset;
		var winleft = window.pageXOffset;
		var wininnerheight = window.innerHeight;
		var wininnerwidth = window.innerWidth;
		// alert('top:'+ wintop +' left:'+ winleft);
		// alert('wide:'+ wininnerwidth +' height:'+ wininnerheight);
	stylesheet.appendChild(document.createTextNode(
			'.highslide-viewport-size {'+
			'	top: '+ wintop +'px !important;'+
			'	left: '+ winleft +'px !important;'+
			'	height: '+ wininnerheight +'px !important;'+
			'	width: '+ wininnerwidth +'px !important;'+
			'}'
		));  
  }

This, together with a few other hack seems to at least properly locate and size the current viewport for me on an iphone and ipad. Just a thought. I came across these JS properties listed part of some bug fixes for mobile safari back in 2007: http://reviews.cnet.com/8301-19512_7-10115223-233.html

[fruitbatlover]

Hi Guys,

We are implementing a responsive css element to our site: alwaysriding .co . uk and as we use the awesome Highslide, I wanted to ask if any progress had been made, or if anyone in the community had any experience making use of the thumb to slide / swipte inherent nature of the iPhone?

I've seen this done on some other mobile sites, and it does feel the most intuitive way of browsing product images. A simple swipe of the thumb, new image! It's very pleasing, or perhaps i'm just a happy geek.

Cheers,

Pete

[RoadRash]

Hi Pete,

Highslide has no built-in iOS gestures. You need to use the controlbar or onImageClick (onImageClick is demonstrated in this gallery: http://highslide.com/examples/gallery-in-page.html) to go to the next image.