Topic: SSM thumbnails in Multiple Galleries

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

Re: SSM thumbnails in Multiple Galleries

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.

What you are describing sounds like the Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window).
When the user taps the Splash Page, the gallery is expanded to fill the user's browser window.
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.

You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Alternatively, you can force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').

If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.

Re: SSM thumbnails in Multiple Galleries

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.

Re: SSM thumbnails in Multiple Galleries

Please post the URL to your gallery so that I can take a look and help further.
Thank you.

(Also, please make sure that your gallery does not set screenMode="LARGE" which would force the gallery to be displayed in Large Screen Mode on all devices and in all browsers.)

Re: SSM thumbnails in Multiple Galleries

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

Re: SSM thumbnails in Multiple Galleries

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

Re: SSM thumbnails in Multiple Galleries

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).

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.)

and everything is way too small.

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

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

The 6 Plus has a Full HD screen, way bigger than the SSM 1024x768 threshold, but Juicebox went into SSM.

Juicebox takes into account the device itself as well as the screen size when deciding which Screen Mode to use. It is not possible to change the internal logic which determines the Screen Mode but you can force a certain Screen Mode to be used via the screenMode configuration option (although I understand that you do not want to do this).

What also happened, was that there was no way to hide Safari's own top and bottom bars

Apple removed 'minimal-ui' from iOS 8 (which was used to remove the bars from the screen in previous versions of iOS).
Your web page still includes 'minimal-ui' (in the <meta> 'viewport' tag) which is why the bars still disappear on devices running versions of IOS prior to 8 (but not on the iPhone 6 Plus which I expect is running iOS 8).

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.

This is entirely up to the author of the gallery to decide and might be somewhat dependent on the target audience for your web site. For example, if it is highly likely that visitors to your web site will be viewing your web pages on large desktop monitors (rather than small mobile devices), then you could perhaps get away with not having to provide small images in your galleries.

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.

Re: SSM thumbnails in Multiple Galleries

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.

Re: SSM thumbnails in Multiple Galleries

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.

This is Small Screen Mode. Only Small Screen Mode displays thumbnails and images on different pages.
In fact, Small Screen Mode always displays thumbnails and images of different pages and Large Screen Mode never displays thumbnails and images on different pages.
The thumbnails are small due to the scaling of your web page.
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).

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.

Re: SSM thumbnails in Multiple Galleries

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>

11 (edited by ceege 2015-03-30 19:45:14)

Re: SSM thumbnails in Multiple Galleries

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.

Re: SSM thumbnails in Multiple Galleries

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.

No. The 'full.html' file is not directly related to Small Screen Mode. It is used to display the gallery (whether in Small or Large Screen Mode) when the gallery is expanded in a new page (rather that on top of the embedding page), for example when expandInNewPage="TRUE" or on iOS devices. (Please see here for further details).

The key to your solution is to use the <meta> 'viewport' tag I posted above.

Try the following example.
Create a sample gallery with JuiceboxBuilder-Pro (just use all default values) and use the following code as the gallery's 'index.html' page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="jbcore/juicebox.js"></script>
    <script type="text/javascript">
        var jbGallery;
        function setContainerHeight() {
            var winHeight, headerHeight;
            winHeight = window.innerHeight ? window.innerHeight : $(window).height();
            headerHeight = $('#header').outerHeight();
            var newH = parseInt(winHeight) - parseInt(headerHeight);
            $('#juicebox-content').height(newH);
            return newH;
        }
        function doLayout() {
            if (!jbGallery) {
                setContainerHeight();
                return;
            }
            window.setTimeout(function() {
                var winWidth;
                winWidth = window.innerWidth ? window.innerWidth : $(window).width();
                var newH = setContainerHeight();
                jbGallery.setGallerySize(winWidth, newH);
            }, 200);
        }
        $(document).ready(function () {
            doLayout();
            $(window).resize(doLayout);
            jbGallery = new juicebox({
                containerid : "juicebox-container",
                showSplashPage: "NEVER"
            });
        });
    </script>
    <style type="text/css">
    html, body { 
        height: 100%;
        overflow: hidden;
    }
    body {            
        background-color: #222222;
        color: #666666;
        font-family: sans-serif;
        font-size: 20px;        
        margin: 0px;
        padding: 0px;
    }
    a {    
        color: #cccccc;
    }
    #header {
        background-color: #333333;
        height: 20px;
        padding: 10px 0px;
        text-align: center;
        width: 100%;
    }
    #juicebox-content {
        width: 100%;
    }
    </style>
    <title>Test</title>
</head>
<body>
    <div id="header">
        <a href = "gallery1/index.html">Gallery 1</a> | <a href = "gallery2/index.html">Gallery 2</a>
    </div>
    <div id="juicebox-content">
        <div id="juicebox-container"></div>
    </div>
</body>
</html>

The code is based on the View Resizable Gallery with Top Menu Example sample gallery from the Resizable Gallery support section (but with the external CSS integrated into the page, the footer removed and the <meta> 'viewport' tag from above in place).
This should display the header and gallery without any vertical (or horizontal) scroll bars. The header will be a fixed height and the gallery will occupy the remainder of the browser window. The gallery will initially display the thumbnail page (as showSplashPage="NEVER" is set in the gallery's embedding code) with the thumbnails scaled large due to the <meta> 'viewport' tag.
You could use this page as a template for each of your gallery pages if you like.

If you do not want the header to be displayed on your gallery pages (and just want to use the Back Buttons within the gallery), then you can link directly to gallery 'index.html' files (exactly as they were created by JuiceboxBuilder-Pro) from your 'Go ahead, click one...' page.

If you want the header to be displayed on your gallery pages only in Large Screen Mode (when the gallery is viewed on desktop browsers) but not in Small Screen Mode (on mobile devices), then you could use the Juicebox-Pro API getScreenMode() method to determine which Screen Mode is being used and then use JavaScript (specifically jQuery in the example below) to remove the 'header' <div> from the Document Object Model. In the code above, add the following:

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

... immediately after:

jbGallery = new juicebox({
    containerid : "juicebox-container",
    showSplashPage: "NEVER"
});

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).

13 (edited by ceege 2015-03-31 16:02:52)

Re: SSM thumbnails in Multiple Galleries

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

Re: SSM thumbnails in Multiple Galleries

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.

Re: SSM thumbnails in Multiple Galleries

I have no idea if my any of my web pages uses any jQuery code at all.

If you do not know if you are using jQuery (and you create your web pages manually), then you'll not be using it.

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

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

With regard to your landscape orientation problem, after the 'header' <div> has been removed from the DOM, the JavaScript code in the setContainerHeight() function can no longer check the height of the 'header' so it is necessary to check whether the 'header' exists before checking its height (or assigning a value of zero if it does not exist).
Just change the line:

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

... to:

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

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();
}

Hopefully this will solve your problem.

Re: SSM thumbnails in Multiple Galleries

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! ;)

Re: SSM thumbnails in Multiple Galleries

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?

Re: SSM thumbnails in Multiple Galleries

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?

With the extra doLayout() in place, the gallery should take up all of the browser window. Previously, even though the header was removed from the page, the header's height was still being subtracted from the total height (the initial drawing of the gallery was done before the header was removed) resulting in the gallery not filling the total height available (and there would be an area beneath the gallery equal to the header's height). It might not have been noticeable, especially if the header and gallery background colors were similar.

In landscape mode the top and bottom bars disappear completely, but not in portrait mode. Not that it matters, but why is that?

I think that's just the way that Apple designed Mobile Safari with an easy way to go fullscreen but only in landscape mode (via the arrow icon button in the lower right corner of the bottom toolbar).

Re: SSM thumbnails in Multiple Galleries

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.

Re: SSM thumbnails in Multiple Galleries

One thing *I* haven't happened to see, is that it's easy to make line breaks in the Title and/or Caption.

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. For example:

Line #1<br>Line #2<br>Line #3

Please see this FAQ for details:
How do I add HTML formatting to image captions and titles?

If I've understood correctly, the settings in a Preset file end up in the config.xml file?

That is correct. Loading a 'Preset' is a quick and easy way to set a combination of different configuration options at once.
When you load a 'Preset' the configuration options listed in the preset file are applied to the gallery and when you save the gallery on the 'Publish' tab, all the configuration options currently set (including those applied to the gallery via the 'Preset') will be included in the gallery's 'config.xml' file.

As for this config.xml, is there any way to rename it/them?

It is not possible to rename the XML file from within JuiceboxBuilder-Pro.
You could certainly rename the 'config.xml' file after the gallery has been created and then use a configUrl configuration option within your gallery's embedding code to point towards the new filename.
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        configUrl: 'custom.xml',
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Please note that if you rename a gallery's XML file, the gallery will no longer be able to be opened by JuiceboxBuilder-Pro.

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.

Re: SSM thumbnails in Multiple Galleries

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).

Re: SSM thumbnails in Multiple Galleries

All my files ending with *.php did not show any pictures when reopened in Juicebox Pro Builder, just the thumbnails.

If you have renamed your gallery index page with a .php file extension, then this suggests that you have modified the file (by adding custom PHP code), otherwise you could have just used .htm or .html, both of which work fine within JuiceboxBuilder's internal browser.

If you make any modifications to a gallery's index page and then open the gallery (to edit it) in JuiceboxBuilder and resave the gallery on the 'Publish' tab, then the file will be overwritten and any modifications that you have made (including any custom PHP code that you have added) will be lost.

A gallery's index page is designed to display the gallery on a page of its own, no more, no less. If you need further functionality, then I would recommend that you copy the index page and modify the copy. That way, JuiceboxBuilder will be free to overwrite the original index page without your modifications being lost.

If you embed your galleries in other web pages (and do not need or want to display the galleries on pages of their own), then there is no need to use the gallery index pages at all and you can simply ignore them (leaving their file extensions as .htm or .html).

Re: SSM thumbnails in Multiple Galleries

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!

Re: SSM thumbnails in Multiple Galleries

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.

No problem. I appreciate you taking the time to share your experiences.

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.

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).
If you have copied the index page to make customizations to it and want to include SEO code, you will need to copy and paste it from the index page updated by JuiceboxBuilder-Pro to your modified copy.

Also, if you want to make the same modifications to all index pages created by JuiceboxBuilder-Pro, then you could edit the template file that JuiceboxBuilder-Pro uses to generate the index pages:
C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html

Re: SSM thumbnails in Multiple Galleries

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.