Steven wrote:

The inactivityTimeout (default value of four seconds) seems to work fine in the demo gallery you quoted (http://www.juicebox.net/demos/lite/full/) in IE 11 on my own PC (all default settings).

Try resetting your Internet Explorer settings: http://windows.microsoft.com/en-gb/inte … s#ie=ie-11
... and also try temporarily disabling any extensions that you have installed ('Options -> Manage add-ons') which might somehow be interfering with the gallery's functionality.

Now I have to answer no, no, no, no and no. :) The first four nos are for resetting IE. I tried it in four different ways. "Delete personal settings", both YES and NO. After restart: "Use recommended settings", both YES and NO. And yessiree, I also disabled all Extensions. A sixth no can be added from testing it on my old PC, which has IE 10.

The ONLY way to get the Captions off the screen in any of my IEs, is to drag the mouse off the gallery, and then the Caption disappears rightaway. If I leave the the mouse anywhere on the gallery, it remains there. This I tested with both yours, and mine galleries.
Sump'n ain't right here... :|

Just heard from my Chrome using friend, and yess, she hadn't been patient 'nuff. After a few seconds the Captions had disappeared in both screen modes.
I went through, and loosened most of the security settings in my IE 11, but no, I couldn't get it to hide the Captions.
Any hints what to check?

Steven wrote:

It seems to work fine in Chrome 42 and IE 11 on my PC in my own test galleries.
Please let me know which of your galleries you are referring to and I will take a look to see if I can see the problem for myself.

I haven't got an answer from my friend with the Chrome browser yet, but I did some testing with IE 11 on my Win7/64. The trouble with the inactivityTimeout does not seem to be caused by any of my own test-galleries, because your http://www.juicebox.net/demos/lite/full/ behaved just the same. If I leave the mouse cursor smack dab in the middle of the picture, no countdown ever starts. The Overlay Info does not disappear by itself, as it does in Firefox 37. In Firefox, it works okay both in Expanded, and in normal mode.

Steven wrote:

I notice that your 3x gallery sets useFullScreenExpand="TRUE". When the gallery is expanded, it will occupy the entire screen (rather than just the browser window) so there is no area outside the gallery that the user can move the mouse into.

Yes, I chose to make it "true" on purpose, because otherwise it doesn't do nothing else than hide my header with the clickable links. Are you sure you can't make a "South of the border" zone below the screen? I've used some programs that do so.

Steven wrote:

A workaround might be to set useFullscreenExpand="FALSE" so that the gallery expands only within the browser window. There will always be an area outside the gallery (the browser's address bar) where the user can move the mouse to have the overlay disappear.

I set it to "false" on 03, but it really doesn't do a lot.

Steven wrote:

Alternatively, inactivityTimeout still works fine in fullscreen expanded mode (where the overlay will disappear after a certain time of mouse inactivity). You might like to try setting inactivityTimout to a value smaller that its default of 4 seconds.

Now we got to the point. It turned out, that the person who informed me about this matter uses a Chrome browser. I, have used IE11 just for the gallery testing, and I've set it to check for newer version every time I visit a webpage. It's very convenient. However, it seems that this inactivityTimeout function doesn't work on Chrome or IE. On Firefox, which is my default browser it works as it should.
Is here something, that you could do in some other way in the next update, to make this function work more universally?

I just got a reply from a friend about the functions of my test galleries. She had found, that if the Expand button is pressed, the functionality of dragging the mouse cursor out of the gallery to hide the Information, stops working.

I put the [Info] button into the toolbar on Gall 03c, but then of course this mouse function stops working completely, no matter what screen is on. So this is no good either.

Why does this "Hide Info" mouse function not work in Expanded mode?

Steven wrote:

I should note that if you choose to include SEO code (via 'Add SEO Content' in JuiceboxBuilder-Pro's 'Sharing' section), then if you add images to a gallery, the index page will change (to add the SEO code corresponding to the new images).

Good! :D I have intentionally chosen to set addSEOContent="false", because my galleries are for family and friends with whom I share my links. Not for making money or advertising.

Yep, I just tested that if I change a 115 lines long *.php index file (which includes the codes for iPhone SSM that you sent) to *.htm, and make sure that the same name is in the config.xml file, JPB will save the new file with only 37 lines, without all pretty SSM and jQuery codes.

But OTOH, if I open the gallery in JPB just to add new pics, my old *.php index file doesn't really need any changes. The old one works as is. As you wrote, I just need to make a copy of it, and reuse it. All changes will be in the config.xml file with the new ~10 lines of code for each new image. I will of course need to upload all new images too into their respective folders.

Here, FileZilla has many options for the "File exists action". By choosing "Overwrite file if source file newer", it does not transfer any files that hasn't changed. This works both ways, both up- and download. Avoids bit jam.

Just for the sake of testing :D, I tried to change my Gallery 3's config file's indexPageName="gall03.psp" entry to indexPageName="gall03.htm" (although there is no such file), and both works equally well, on the web. Not in JPB, as mentioned above.

Steven, I do not write these findings of *mine* to you, because you know 'em all, but hopefully they may be useful for other readers here.

Thanks again!

Steven wrote:

You can use HTML tags in image titles and captions so you can insert HTML line breaks ('<br>') to separate an image title or caption into different lines. Please see this FAQ for details:
How do I add HTML formatting to image captions and titles?

Great info again. Thanks.

Steven wrote:

If you want an easy way to keep track of multiple galleries, then you could keep each gallery in its own separate folder (giving each gallery folder a unique name). This would avoid the need to rename any files within the gallery folders.
You could then upload the complete gallery folders (rather than just the contents) to your web server and embed the galleries in your web pages using the baseUrl method of embedding as documented here.

That baseUrl method seems unnecessarily complicated for me. I do have my test galleries on the web within a "gals" top-folder with complete "gall01", "gall02"... sub-folders.  But when I see many equally named files (from different folders) opened side by side in tabs in FileZilla, it's challenging, but I can live with that. ;)

But,,, I spent several hours last evening figuring out why I could NOT reopen some galleries in the Juicebox Pro Builder, while they opened just fine in Firefox. I found out, eventually,  that the reason was that I can NOT give an Index Page Name that ends with anything else than *.htm/html. All my files ending with *.php did not show any pictures when reopened in Juicebox Pro Builder, just the thumbnails.

Why is that? Couldn't JPB be configured to open any ASCII file in the indexPageName="index.*" config setting? Now, I have to edit this entry in the config.xml to *.html, and rename the index.* file too, before I can open the gallery in JPB.

The only scenario where I might need to re-edit a gallery in JPB, is when I add new pics. Then JPB will create all needed picture formats automagically. Most other things are easier to change manually via FileZilla & EditPadLite (which BTW is a VERY good and free ASCII editor).

Hello! Here I'm back, a few weeks later while testing every configurable option in Juicebox, and seven more...
One thing *I* haven't happened to see, is that it's easy to make line breaks in the Title and/or Caption. I fooled around with this on some pics in my 03c. I built up a new 03x from Juicebox, (not by copying end modding the files) and saved a new Preset file for future use. If I've understood correctly, the settings in a Preset file end up in the config.xml file?

As for this config.xml, is there any way to rename it/them? Sometimes I may have opened the config.xlm files from all my seven galleries in EditPadLite, and it's a major PITA to figure out "who is who", after many hours of work. Because I hav named my "index.html" files to "GalleryName.php", those are easy to keep track of. The reason for the "*.php" is of course that a php can be made to call for my password script.

Well, I see that I haven't even got to my actual point yet, but I'll make a new post for it. Otherwise the posts stretch out toooooooo much.

Thx again for your valuable help, Steven.

Just tested galleries 03c and 03d on iPhones 4, 5, and 6 (all in a row on the same table) and they work fine. In landscape mode the top and bottom bars disappear completely, but not in portrait mode. Not that it matters, but why is that?

Steven wrote:

This web page show you how to add jQuery to your web pages: http://www.w3schools.com/jquery/jquery_get_started.asp

Thanks, Steven. Looks graspable.

Steven wrote:

Just change the line:

headerHeight = $('#header').outerHeight();

... to:

headerHeight = $('#header').length ? $('#header').outerHeight() : 0;

I did this to galleries 03c and 03d, and now they work properly on iPhone 4S. Have to check with models 5S and 6 Plus too.

Also, try running the doLayout() function to resize the gallery after the header has been removed by using the following code:

if (jbGallery.getScreenMode() === 'SMALL') {
    $('#header').remove();

    doLayout();
}

The three red lines were there already thanks to your previous posting. I now placed that doLayout(); into just gall03d, but I could not (yet) find any difference between 03c and d. What should I look for?

Thanks again Steven. You're the Birkhoff of Juicebox! ;)

OOPS,

After some testing I realized that if I put the iPhone (4S) in landscape position, the images disappear and they won't come back even if I turn the phone back to portrait position again. It seems that the main pics disappear totally from the screen, beacuse the caption risez up to the top.

I hope this ain't a bad problem after it started so nice with your new code, Steven. There's now totally four gall03* pages, where 03c and 03d contain the new code you sent.

Steven wrote:

Please note that my suggestion above uses jQuery. Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).

FINALLY!!!
Thanks a lot Steven. I made a new Gallery 3c where I put your code, and modified it a little. And with that jQuery patch, it now jumps directly into SSM Thumbs View on iPhone. Just what I wanted! No unnecessary clicking/tapping, and no headers eating up real estate from the tiny screen.

As for your quote above. I have no idea if my any of my web pages uses any jQuery code at all. I hadn't even heard about jQuery before I started to use Juicebox, so I guess I use it only on my Gallery pages?

If you remove some jQuery functionality from Juicebox in the future, what do I have to do then?

Thanks again, long session, stubborn customer. ;)
Ceege

We seem to cross-post...

Steven wrote:

As I noted above, try scaling your web page for mobile devices by using the following <meta> 'viewport' tag in the <head> section of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

In your 'Gallery 3', you use 2 different <meta> 'viewport' tags.
Replace your original one with the one above (rather than adding the one above as an additional tag).

Oops! Thanks for that. I seemed to have tested to put the same line there, that I've put on my Password and Pickone pages, without checking the rest of the file. Now with corrected meta, it goes straight into thumbs view, but the clickable header hangs there too. Because of the screen size, I would rather NOT have the clickable header visible on the iPhone. The [<Back] is good enough.

Steven wrote:

Otherwise, set your gallery's width and height to be both 100% (like in your 'Gallery 3b').
This should also trigger the scaling that you are looking for (but only because the gallery's dimensions are not restricted by those of a parent container).  The better option is to use the <meta> 'viewport' tag above.

If I change the galleryHeight from 98% to 100% in Gallery 3 now, with the new meta, the clickable header disappears from LSM on PC, but NOT on SSM on iPhone. This goes completely backwrds. :(
I left it at 100% for now.

Steven wrote:
ceege wrote:

and everything is way too small.

Try scaling your web page for mobile devices by using the following <meta> 'viewport' tag to the <head> section of your page (rather than the one you currently use):

<meta name="viewport" content="width=device-width, initial-scale=1">

I tried that on my Gallery pages, but it didn't help. If I've understood correctly, the layout of the SSM pages comes from the "jbcore/full.html" file, which already contains something looking like that. OTOH, by inserting this code:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
into my Password and Pickone pages, the text size grew so much on iPhone use, that I could delete my
<font size="7">, which had made the text look ridiculously big on PC screens. Big thanks!

Steven wrote:

Incidentally, as you switch between galleries using links in a header, you might like to take a look at the Using a Resizable Gallery with a Header support section.
The View Resizable Gallery with Top Menu Example uses a header with links to different galleries (like your web pages do) and the remainder of the browser window space is used for the galleries without the need for any vertical scroll bars (which your web pages currently use).
You could view the source of the demo web pages in a browser and copy/modify them to suit your own needs.

I checked those JavaScript pages, and they work just like mine, i.e. on the iPhone they don't open directly into thumbnail view. The code that I copied eventually comes from the "Multiple Galleries on Separate HTML Pages" section higher up on the same page. It looks somehow less complicated. ;)

Anyway, I've wrestled with this matter for close to a week now, and it seems that there's no working solution, yet,,, for opening a gallery with clickable links in the header in LSM, straight into thumbs view on SSM. I'm sure that somebody who knows coding way better than I do, could work out a solution.

My best,
Ceege
(BTW, editing answers on this page is a real PITA, as the selected text has a yellow background, just slightly darker than the lighter yellow background on the rest of the text. I have problems to see what's selected, what's not. </rant>

Steven wrote:
ceege wrote:

So, is there any way to achieve what I asked for in the first post. I.e. on the iPhone it would jump directly into SSM without any splashing and directly show the thumbnails, without two additional clicks, or more precisely taps, on the touchscreen.

Gallery #3 seems to do this (going straight to the thumbnail page without a Splash Page).

ceege wrote:

gall03 works like Gall01 on PC (LSM), but on iPhone it locks into LSM,

On my iPod Touch, Gallery #3 displays in Small Screen Mode (not Large Screen Mode). Only Small Screen Mode displays the thumbnails and main images on different pages. (Large Screen Mode would display the thumbnails and images on the same page.)

Although Gallery 3 shows the thumbs without main pics, the style is not SSM, because on iPhone 4 the thumbs are all in one row and incredibly small. I made a new Gallery 3b which can be reached from the 'Go ahead, click one... page, and on iPhone this opens with much larger thumbs laid out in a 2 by 2 pattern. This is how the thumbs should look on a SSM page on iPhone, IMO.
This has a galleryHeight: '100%' and no headers in the <div id="header"> section, so there are of course no headers in LSM on PC.
This becomes so long, that I continue the other issues in another answer.

Hi again,

Just after I posted my previous post, a buddy came by with an iPhone 6 Plus. My Juicebox galleries looked like a disaster...! The 6 Plus has a Full HD screen, way bigger than the SSM 1024x768 threshold, but Juicebox went into SSM. What also happened, was that there was no way to hide Safari's own top and bottom bars, which works well when I turn my iPhone 4S into landscape mode.

If someone out there can test my galleries on iPhone 5 and 6 (no Plus), it would be interesting to hear comments.

Another thing bothers me. Is it necessary to create the small images at all? My iPhone has a 960x640 display, and does not use the small pics for anything. (I put markers the small images)

Ceege

OK, here we go. My Gallery test is here: http://netti.nic.fi/~cjahman/gals/
Click any of the links. The temporary password (required once) is "nope".
Here's the only differences between the configs:

gall01:
showSplashPage="AUTO"
splashImageUrl="../ClickMe.jpg"
captionPosition="BELOW_IMAGE"
-------------------------------------------
gall02:
showSplashPage="ALWAYS"
splashImageUrl=""
captionPosition="BOTTOM"
-------------------------------------------
gall03:
showSplashPage="NEVER"
splashImageUrl="../ClickMe.jpg"
captionPosition="OVERLAY_IMAGE"
-------------------------------------------
gall01 works quite good, both on PC (LSM) and iPhone, where the only tifference to gall02 is that my "CLICK ME" SplashPic is more intuitive to use than the first pic click in gall02.
-------------------------------------------
gall02 with showSplashPage="ALWAYS" makes no sense in LSM on PC. You have to click on the SplashPic to get forward, and then it opens up in Expanded Full Screen mode (both Firefox & IE). The Overlay function does not work at all, and my clickable Header don't show. Only way to get out is to use the [<Back] button.
On iPhone it works so that you have to click the SplashPic to get ahead, and then it works OK, like gall01.
-------------------------------------------
gall03 works like Gall01 on PC (LSM), but on iPhone it locks into LSM, and everything is way too small.
-------------------------------------------
So, is there any way to achieve what I asked for in the first post. I.e. on the iPhone it would jump directly into SSM without any splashing and directly show the thumbnails, without two additional clicks, or more precisely taps, on the touchscreen.

My best,
Ceege

Steven wrote:

You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).

If I set showSplashPage="NEVER" it never goes into SSM on the iPhone.

Hi, noob here,

I searched this forum and tested codes for +10 hrs yesterday, but could not find a solution to my specific case. I have Juicebox Pro v. 1.4.3.

I managed to create a multiple gallery page with clickable links in the header. I included this in the body part of all three index pages:

<div id="header" >
<a href = "../gall01/gall01.htm">Gallery 1</a> | 
<a href = "../gall02/gall02.htm">Gallery 2</a> | 
<a href = "../gall03/gall03.htm">Gallery 3</a>
</div>

I also changed the height to 98%: galleryHeight: '98%',

Now when I enter this gallery with my iPhone 4S, I first land on an LSM page displaying the first pic, and some unreadable small text in the downleft corner. When I click the pic, the gallery opens in SSM. Not until then, I can click the Thumbs button, which then fills the screen wih SSM styled thumbs.

Is there a way to get to the SSM thumbs page directly, without first passing that LSM page? If I change the gallery height to 100%, my clickable links header disappears from the LSM on the PC, and on the iPhone the SSM thumbs display as I wanted, BUT,,, the clickable header row appears on top of the SSM. It looks like a mix of LSM/SSM.

For SSM use, I've put a backButtonUrl="../select.htm" into the config.xml(s) which opens a page with a clickable list with <font size="7">, to make it ready for iPhone use without upsizing the display.

Any hints?
Ceege