It is currently Fri Oct 31, 2014 6:21 pm Advanced search

IPAD, gallery and text controls

Technical support, bug reports, feature requests and more.

Re: IPAD, gallery and text controls

Postby leopardus2 » Wed Jun 01, 2011 1:38 pm

RoadRash wrote: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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Thu Jun 02, 2011 12:48 pm

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;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Thu Jun 02, 2011 10:18 pm

RoadRash wrote: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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Fri Jun 03, 2011 2:27 am

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|[hilight]iPad|[/hilight]iPod|Palm|Symbian)/.test(navigator.userAgent)) {
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Fri Jun 03, 2011 11:23 am

RoadRash wrote: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|[hilight]iPad|[/hilight]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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Sat Jun 04, 2011 10:10 am

This should take care of the caption width:
RoadRash wrote: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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Sat Jun 04, 2011 8:39 pm

RoadRash wrote:This should take care of the caption width:
RoadRash wrote: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
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby leopardus2 » Sat Jun 04, 2011 8:49 pm

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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Sat Jun 04, 2011 11:02 pm

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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Sun Jun 05, 2011 11:06 am

RoadRash wrote: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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Sun Jun 05, 2011 12:23 pm

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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Sun Jun 05, 2011 6:36 pm

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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby luis » Thu Feb 16, 2012 3:03 am

RoadRash wrote: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.
luis
 
Posts: 16
Joined: Thu Dec 15, 2011 4:52 am

Re: IPAD, gallery and text controls

Postby RoadRash » Mon Feb 20, 2012 9:37 am

Hi,

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

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby luis » Wed Feb 22, 2012 11:29 pm

RoadRash wrote: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.
luis
 
Posts: 16
Joined: Thu Dec 15, 2011 4:52 am

PreviousNext

Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 2 guests