IPAD, gallery and text controls

[leopardus2]

I can see the same as you on my iPhone 4: the dimmed background is placed top left.
I actually can’t tell you why this happens – we need to study this closer. I suspect it might have something to do with the 1:1 render of the page set in this part of the mobile.js:

Code: Select all

      // Add a meta tag to have the iPhone render the page 1:1
      hs.createElement('meta', {
         name: 'viewport',
         content: 'width=device-width; initial-scale=1.0; maximum-scale=1.0;'

Maybe you should turn off the dimming for mobile devices. Add this to mobile.js right after the hs.allowHeightReduction line:

Code: Select all

hs.dimmingOpacity = 0;

If I turn the dimming off I cannot see the caption anymore... it's white and not very visibile on the yellow background of the page.
Do you have a workaround for that? Maybe putting the caption inside the image?

Thanks
Rick

[RoadRash]

In your mobile.js file – replace this

Code: Select all

hs.marginBottom = 0;

with this to make room for the caption below the image

Code: Select all

hs.marginBottom = 32;

Add this to make the caption the same width as the image

Code: Select all

hs.captionOverlay.width = '100%';

Add this to your highslide.css file to add background color and for changing font color. I’ve set the background color to the same as your page background color. You can change it if you want to use another color.

Code: Select all

.mobile .highslide-caption {
    background: #FFFCE3 !important;
    color: black !important;
    font-weight: normal;
    padding: 0 0  3px 0;
}

You can also move the close button so it isn’t partly outside the image on mobile devices. Add this to your highslide.css file:

Code: Select all

.mobile .closebutton {
   top: 0;
   left: 0;
}

[leopardus2]

In your mobile.js file – replace this

Code: Select all

hs.marginBottom = 0;

with this to make room for the caption below the image

Code: Select all

hs.marginBottom = 32;

Add this to make the caption the same width as the image

Code: Select all

hs.captionOverlay.width = '100%';

Add this to your highslide.css file to add background color and for changing font color. I’ve set the background color to the same as your page background color. You can change it if you want to use another color.

Code: Select all

.mobile .highslide-caption {
    background: #FFFCE3 !important;
    color: black !important;
    font-weight: normal;
    padding: 0 0  3px 0;
}

You can also move the close button so it isn’t partly outside the image on mobile devices. Add this to your highslide.css file:

Code: Select all

.mobile .closebutton {
   top: 0;
   left: 0;
}

Thank you! Now it works just fine on the Iphone.
On the IPAD, however, I still have the dimmed background in the wrong place and the misplaced controls.
I have tried reloading several times and it still does what I describe.
Any clues?

Thanks
Rick

[RoadRash]

I can see now why it doesn’t work on the iPad; iPad is missing from the if statement in mobile.js – add it like this (highlighted):

Code: Select all

if (/(Android|BlackBerry|iPhone|iPad|iPod|Palm|Symbian)/.test(navigator.userAgent)) {

[leopardus2]

I can see now why it doesn’t work on the iPad; iPad is missing from the if statement in mobile.js – add it like this (highlighted):

Code: Select all

if (/(Android|BlackBerry|iPhone|iPad|iPod|Palm|Symbian)/.test(navigator.userAgent)) {

Thanks, I feel stupid I did not check the code about that possibility
Now it works properly.
Only thing left is, the caption on IPAD and Iphone is not limited to the viewport of the image, I mean the caption is longer than the
image width, is there a way to fix that so that the caption has same width of image?

Thanks again,
Rick

[RoadRash]

This should take care of the caption width:

Add this to make the caption the same width as the image

Code: Select all

hs.captionOverlay.width = '100%';

But it seems like your live page isn’t updated with the latest changes? I can’t see iPad in the if statement….

[leopardus2]

This should take care of the caption width:

Add this to make the caption the same width as the image

Code: Select all

hs.captionOverlay.width = '100%';

But it seems like your live page isn’t updated with the latest changes? I can’t see iPad in the if statement….

I already have that in the code but does not seem to work...
the changes are there, I have a caching system in front of my webserver
so you should reload the page to see them, have you tried that?

Thanks
Rick

[leopardus2]

I still am not sure if the mobile.js has to be BEFORE or AFTER the config.js... I have seen that there are some variables
(eg: dimmingOpacity) that are in both files...

Thanks
Rick

[RoadRash]

I have cache turned off in my browser, so that’s not the problem. Anyway – the updated file suddenly turned up and I can see the caption with correct width on my iPhone. You should see the same on iPhone/iPad.

The mobile.js file can be placed either before or after the config file. It works fine where it is placed now.

[leopardus2]

I have cache turned off in my browser, so that’s not the problem. Anyway – the updated file suddenly turned up and I can see the caption with correct width on my iPhone. You should see the same on iPhone/iPad.

The mobile.js file can be placed either before or after the config file. It works fine where it is placed now.

I have a front-end cache that does caching nonetheless, disregarding what settings you use on your browser
I changed the name of the mobile.js file and called it mob.js that's probably why you see it OK now.

Found out that I was not using the doctype when I tried on the IPAD.... using the doctyped version the captions works as expected

Any idea why the loop (repeat) doesn't work with mobile devices? When I click next on the last image I would like the
gallery to go back to first image. That works on normal browser but doesn't seem to work on mobile... it just closes the slideshow...

Thanks again for your help

Rick

[RoadRash]

You can’t use the repeat function (loop) on mobile devices. This is why:
At the bottom of your file http://www.collezionistidiflipper.it/hs/mobile.js (which still is named mobile.js… ) you will find this:

Code: Select all

// Remove any slideshows with too small controls
hs.slideshows = [];
      
// Create custom previous and next overlays
hs.registerOverlay({
   position: 'middle left',
   width: '20%',
   html: '<div class="navbutton"  onclick="hs.previous()"  title="'+
      hs.lang.previousTitle +'">&lsaquo;</div>',
   hideOnMouseOut: false
});
hs.registerOverlay({
   position: 'middle right',
   width: '20%',
   html: '<div class="navbutton" style="text-align: right" onclick="hs.next()" title="'+
      hs.lang.nextTitle +'">&rsaquo;</div>',
   hideOnMouseOut: false
});

This line:

Code: Select all

hs.slideshows = [];

removes the entire slideshow function, and the next lines adds the previous and next buttons. This is do avoid using the regular gallery buttons on mobile devices because they’re too small. But since the slideshow function is removed you will also loose the ability to use the repeat function.

[leopardus2]

Thank you for the explanation. I can live without the loop function on the mobile devices, no problem.
Thanks again for your support, you're doing a great job here!

Best,

Rick

[luis]

You can’t use the repeat function (loop) on mobile devices. This is why:
At the bottom of your file http://www.collezionistidiflipper.it/hs/mobile.js (which still is named mobile.js… ) you will find this:
...

Hi RoadRash,
Sorry, I'm late to the party...
I tried my highslide page in an IPAD 1 (Safari), and it does not work properly either (it works perfectly on chrome, firefox and IE):

- Transitions are harsh and dimming doesn't work properly... page 'flickers'...
- Sometimes window becomes smaller and smaller (when in portrait mode)
- Fullsize icon dissapears after the first shot

And these are the ones I discovered after just a few minutes.

I tried adding your mobile.js after both highslide-full.js and highslide.config.js, and with mobile.js highslide does not work at all (like if no highslide were installed). Please take a look:

No mobile.js:
http://luis.impa.br/foto/00_aranhas.html

With mobile.js:
http://luis.impa.br/foto/00_aranhas-mobile.html

Any help will be appreciated.

Thanks a lot RoadRash for your great job here!

Cheers,
L.

[RoadRash]

Hi,

I can't find the mobile.js file included in your page (http://luis.impa.br/foto/00_aranhas-mobile.html)

[luis]

Hi,

I can't find the mobile.js file included in your page (http://luis.impa.br/foto/00_aranhas-mobile.html)

Oooops, sorry, I changed back the file.
Try again, please.

Thanks,
L.