Juicebox v1.5.1 Released!

2016-04-21 21:18:37

The white space you are seeing below your gallery is part of the 'body' tag (rather than the 'juicebox-container' or 'parent' containers).
You'll need to set the background-color for the 'body' tag, too.
Change:

<style type="text/css">
    body {
        margin: 0px;
    }
</style>

... to:

<style type="text/css">
    body {
        background-color: rgba(17,17,17,1);
        margin: 0px;
    }
</style>

Can I asume that Juicebox always uses % unless I specifically change to pixels?

If you do not explicitly set galleryWidth or galleryHeight in your gallery's embedding code, then default values of 100% will be used.
If you set a value without a '%' character such as:

galleryWidth: "100",

... then Juicebox will read this as '100px', the same as using:

galleryWidth: "100px",

2016-04-21 19:23:59

It is not possible to have the shared image's thumbnail displayed in the pop-up Facebook share window due to limitations imposed by Facebook on what data can be passed via their share URL. Only one thumbnail image can be used per web page. (The link will still point towards the correct image within your gallery, though.)

The image used in the pop-up Facebook share window is set using an Open Graph og:image meta tag in the <head> section of your web page, such as the following:

<meta property="og:image" content="http://www.example.com/images/thumbnail.jpg" />

Please see here for more details on the Open Graph protocol.

If you create a gallery with JuiceboxBuilder-Pro, an og:image meta tag will be automatically generated and included in the gallery's 'index.html' file (pointing towards the first image in the gallery). If you are embedding your gallery in an existing web page alongside other content, then you will need to add an og:image meta tag manually.

Although the thumbnail image displayed in the pop-up Facebook share window will always be the same one (specified via the og:image meta tag), the link being shared will still point correctly towards the shared image in the gallery. You should notice that the URL being shared ends with something like #2 or #17 where the number represents the image in the gallery. When a user clicks on a shared link, the corresponding shared image will be opened in the gallery.

2016-04-21 18:27:15

@paul.hunt

I'm glad you've found it.
Thank you for letting me know.

2016-04-21 11:05:19

No problem!

2016-04-21 11:05:10

You're welcome.

2016-04-20 23:34:19

In order to not get the "Juicebox can not display locally in this browser." message, the gallery's web page must be viewed over http:// or https:// (or viewed in Firefox or Safari). If the file:/// protocol is used (as it would be for local use), the gallery will fail to display in any browser other than Firefox and Safari.

The gallery structure and location of the 'config.xml' and 'juicebox.js' files (and images) does not matter for this error message.

I'm guessing your mobile app is not loading the web page containing the gallery's embedding code over http:// or https:// (it sounds like everything is hosted locally within the app) which is probably where the problem originates.

2016-04-20 23:22:01

The backButtonUrl can be:

(1) Absolute, in the form:
backButtonUrl="http://www.example.com/directory/index.html"

(2) Relative to the HTML page containing the gallery's embedding code, e.g:
backButtonUrl="directory/index.html"

(3) Relative to your root directory (using a leading slash in the path to denote your root directory), e.g:
backButtonUrl="/directory/index.html"

If the page you want your Back Button to go to is http://www.yourdomain.com/index.htm and your gallery's web page is located at http://www.yourdomain.com/gallery1/index.html (which I think is correct from what you say), then you could use any one of the following:

backButtonUrl="http://www.yourdomain.com/index.htm"
backButtonUrl="../index.htm"
backButtonUrl="/index.htm"

If you continue to experience difficulties, please post the URL to your gallery and also let me know the actual URL of the page you'd like the Back Button to link to. Thank you.

2016-04-19 09:40:10

No problem.
I'm glad you've got it working. Thank you for letting me know.

2016-04-18 18:55:02

The code I posted above (in my last post) is a modified version of your own code (the code you posted in your last post) so if you substitute your code for mine, it should work OK.

Please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
Thank you.

2016-04-18 09:39:37

I am having a problem understanding how to deal with the example of wrapping the gallery in a parent container.
Do I incorporate that into the index.html file juicebox creates?

Yes, you'll need to edit the 'index.html' file that JuiceboxBuilder-Pro creates in a plain text editor.
Put the entire 'juicebox-container' <div> inside another <div>.
In your case, change the embedding code portion of the code you posted to the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
    <div id="juicebox-container">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
            <h1>Current Work</h1>
            <p>Corrent Work</p>
            <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
            <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
            <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
        </noscript>
    </div>
</div>
<!--END JUICEBOX EMBED-->

10% of the screen width (to the right-hand side of your gallery) will be empty space (the same color as your gallery's background).
Change the gallery's width from 90% to change the amount of space to the right-hand side of your gallery.

If you wanted to horizontally center the gallery in the parent container (so that there is 5% of the screen width empty at both sides of the gallery), then you could use the following embedding code (adding style="margin: 0 auto;" as an attribute to the 'juicebox-container' <div>).

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
    <div id="juicebox-container" style="margin: 0 auto;">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
            <h1>Current Work</h1>
            <p>Corrent Work</p>
            <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
            <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
            <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
        </noscript>
    </div>
</div>
<!--END JUICEBOX EMBED-->

2016-04-17 08:54:56

Unfortunately, if you encounter the "Juicebox can not display locally in this browser." error, then there is little that you can do.
Certain browsers contain a security restriction that disables loading local files. Please see this FAQ for details:
When I view my gallery locally, I see the message "Juicebox can not display locally in this browser". Why?

Safari is one of the browsers which allows the loading of local files and this might explain why your mobile app works on iOS devices but not on Android devices.
If files are being loaded locally (ie. the web page into which the galley is embedded is not being served over http:// or https://) and one of the browsers known to disallow the loading of local files is detected, then Juicebox will display this error message.

2016-04-17 08:54:05

I am trying to get a handle on just what the presets are.

The presets are just different combinations of configuration options and JuiceboxBuilder settings (such as gallery and image dimensions).
They are essentially quick ways of replicating some of the demo galleries found here.
You could achieve any preset by starting off with all default settings and changing values in JuiceboxBuilder's interface.

Can you tell me just what Max caption height does?

There is a short description of maxCaptionHeight in the Caption section of the Config Options page.

maxCaptionHeight
The height of the caption area. When captionPosition is set to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, the area uses this value. For OVERLAY captions this value determines the maximum possible height of a caption.

So when captionPosition is set to BELOW_IMAGE, BELOW_THUMBS or BOTTOM, the value of maxCaptionHeight is always used as the actual caption height. When captionPosition is set to OVERLAY or OVERLAY_IMAGE, the value of maxCaptionHeight is used as the maximum caption height (the actual caption height might be smaller if the maximum is not required to display the caption in full).

Is it possible to get more space?

It is not possible to increase the space just at the right-hand side of a gallery (at least not by using the available configuration options) but you could increase the space surrounding all gallery elements by increasing the value of the stagePadding configuration option (in JuiceboxBuilder-Pro's 'Customize -> General section'.

Alternatively, if you just want to add some space to the right-hand side of your gallery, you could wrap the gallery in a parent container, reduce the gallery's width (to perhaps 90%) and make the parent container's background color the same as the gallery.
Here is an example.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        backgroundColor: 'acc2e3',
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        maxThumbColumns: '3',
        maxThumbRows: '3',
        thumbsPosition: 'RIGHT'
    });
</script>
<div id="parent" style="background-color: #acc2e3; width: 800px;">
    <div id="juicebox-container"></div>
</div>
<!--END JUICEBOX EMBED-->

Is there any adjustments that would center the page?

If you want to horizontally center the gallery container within a parent container, then replace:

<div id="juicebox-container"></div>

... with:

<div id="juicebox-container" style="margin: 0 auto;"></div>

2016-04-13 08:56:04

Thanks once again.

You're welcome!

I have purchased the pro license and will play around with it. I am sure to have more questions but will open a new topic if needed in the pro forum

No problem.

2016-04-11 20:30:33

Is it possible to make adjustments to these galleries?

Yes, absolutely.
The demo galleries are just examples of what can be achieved. They are not the only layouts that can be used.
You can use any or all of the available Configuration Options to customize your gallery as you like.

For example the pro top has the thumbs on the right and on my screen uses only the left half of the screen not centred or using full screen.

That's just because the gallery has fixed dimensions of 1000px x 1000px. You can choose the width and height for your own gallery using either fixed pixel values or percentages (of the gallery's parent container) and choose where to position the gallery on your own web page.

Can the thumbs be on the left...

Yes. Set thumbsPosition="LEFT". You can then also set maxThumbColumns and maxThumbRows.
A complete list of all Thumbnail Options can be found here.

... and can the gallery comprise the whole screen?

Yes. You just set your galleryWidth and galleryHeight to both be 100% (and make sure that there is no other content on your web page).

The simple gallery leaves a lot of space between the thumbs and the main image which seems small, again are these spaces and size adjustable?

The Simple demo actually uses quite small images (the first image is only 640px x 415px) and the default value of imageScaleMode="SCALE_DOWN", which scales donw large images (if necessary) but does not scale up small images.
If you were creating a gallery of your own, you could use larger images or set imageScaleMode="SCALE" to reduce the space between the thumbnails and the main images.
Depending on gallery dimensions and page layouts, Juicebox galleries are usually responsive and the gallery elements are positioned automatically depending on the size and shape of the gallery (which can often be determined by the size and shape of the user's browser window). For this reason, it is not possible to specify exact dimensions for gaps between gallery elements.

2016-04-11 20:29:59

The image used for the Splash Page can be set via the splashImageUrl configuration option.
If a splashImageUrl is not explicity set, then Juicebox will use the first image in the gallery.
This is by design. The # identifier and firstImageIndex option have no effect on the Splash Page image.

If you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked. Thank you.

You could use JavaScript to fetch the image corresponding to a # identifier or query string variable from the gallery's XML file and set the splashImageUrl dynamically.
Here's an example using the # identifier. (You could use a query string variable instead if you like.)

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

    var hash = 1;

    if (window.location.hash) {
        hash = window.location.hash.substring(1);
    }

    var splash = '';

    $.get('config.xml', function(data) {

        splash = $.trim($(data).find('juiceboxgallery').find('image').eq(hash - 1).attr('imageURL'));

    }).done(function() {

        new juicebox({
            containerId: 'juicebox-container',
            splashImageURL : splash
        });

    }).fail(function() {

        alert('Cannot fetch image for Splash Page.');

    });

</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

2016-04-11 09:45:07

Is there a Wordpress plugin that works with juicebox-lite, so that it makes a sitemap image xml?

Unfortunately, not that I know of.
If a sitemap generator scans an HTML page containing a Juicebox gallery, there may be no indication that there is a list of images stored in a separate XML file elsewhere on your server. Only the 'juicebox.js' JavaScript file has knowledge of this.
Even if a configUrl is used (to explicitly specify a path to the XML file), it is likely that a sitemap generator would not know that the configUrl value was a path (it is just a configuration option in the gallery's embedding code rather than an HTML <a> tag or <img> tag that the sitemap generator would recognise).

The best I can suggest is that you create your gallery with JuiceboxBuilder-Pro and select 'Add SEO Content' checkbox in the 'Customize -> Sharing' section. The embedding code will then include all the gallery images as <img> tags and your sitemap generator should find and index them.
Please see the Search Engine Optimization (SEO) support section for further information.

Please note the following:
(1) 'Add SEO Content' is a feature of JuiceboxBuilder-Pro (not JuiceboxBuilder-Lite, the free version).
(2) You would need to create your gallery with JuiceboxBuilder-Pro rather than using WP-Juicebox (the dedicated Juicebox plugin for WordPress) as WP-Juicebox does not generate SEO content.
(3) You would need to embed your gallery into your web page manually following the instructions in the Juicebox Embedding Guide. Depending on where you locate your gallery on your web server, you might need to manually adjust the paths in the SEO content to ensure that they are correct.

2016-04-10 08:33:32

@rj74

Although, historically, we have released hotfix versions before, I think we are probably too far down the path with regard to preparation for the next version to release a hotfix version to fix only this problem at this point in time.

2016-04-09 08:42:19

Safari behaves different when embedded in the FB app.
Now we are far away from juicebox :) Any idea?

Unfortunately not. Maybe someone else can help to shed some light on this for you.

Do you have an example how to set the firstImageIndex configuration option via JS?

You could try the following (which should hopefully work when expanding the gallery from the Slash Page).
Sample URL for code below: http://www.example.com/gallery/index.html#5

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

var hash = 1;

if (window.location.hash) {
    hash = window.location.hash.substring(1);
}

new juicebox({
    containerId: 'juicebox-container',
    firstImageIndex: hash
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

You could do something similar if you wanted to use a query string instead of a hash.
Sample URL for code below: http://www.example.com/gallery/index.html?id=5

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

var value = 1;

if (window.location.search) {
    var queryString = unescape(window.location.search);
    var queryArray = {};
    var re = new RegExp("([^?=&]+)(?:=([^&]*))?", "g");
    var queryComponent = null;
    while (queryComponent = re.exec(queryString)) {
        queryArray[queryComponent[1]] = queryComponent[2];
    }
    value = queryArray["id"];
}

new juicebox({
    containerId: 'juicebox-container',
    firstImageIndex: value
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Incidentally, I have notified the developers to let them know that a # in URL is currently ignored when expanding a gallery from a Splash Page. Hopefully the # can be respected in this scenario in a future version.

2016-04-08 22:20:18

As you are aware, Facebook uses the data from Open Graph meta tags to populate the share window.
The thumbnail image displayed in the Facebook share window is determined by the og:image tag and this image is used no matter what image is displayed in the gallery. (You can think of this image as representing the gallery as a whole.)
The og:image tag cannot be modified client-side using JavaScript when a new image is selected (at least not so that it will be picked up by Facebook) so your server-side solution to dynamically create a web page with an appropriate og:image entry is certainly a suitable workaround.

When entering a url on iOS http://abc..../gallery/#5 always the first image is shown but not the 5th.

If using #5 in a URL (for example), then the 5th image in the gallery should initially be displayed in Mobile Safari on iOS devices (and on all other mobile browsers) as long as:
(1) The Splash Page is not used.
(2) Thumbnails are not set to display on load.
You would need to set both showSplashPage="NEVER" and showSmallThumbsOnLoad="FALSE" in order for the # to work in Small Screen Mode.

The problem with that is that the jukebox code is obfuscated and I don't have any idea which variable I could modify to achieve this behavior. Any idea about that?

Unfortunately, modifying the source code is not supported. Please see this FAQ:
Does Juicebox-Pro include the source code?

Just a thought but maybe you could use JavaScript to grab the # value from the URL and then internally set the firstImageIndex configuration option within your gallery's embedding code. This might work better for you.

2016-04-08 09:21:29

It is likely that your bootstrap CSS file is assigning rules to all HTML tags which is affecting the layout of your Juicebox gallery.
It is not possible to isolate a Juicebox gallery (or any other HTML element) from global CSS and the gallery will have no option but to inherit such rules.

There may be only one or two rules which are affecting your gallery and it might be easy to fix.
Please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.

2016-04-08 09:21:25

I assume from this that after I instal ShowKase something may again need to be reset but then the program should work fine. I assume the actual website files when created should run fine.

Without knowing what the errors were, I cannot be sure what might (or might not) need to be changed.
If the Showkase Server Compatibility Test passes OK at the moment, then it is likely that Showkase will run fine with your current settings (but it sounds like your web hosts will help you change anything if necessary).

Can the program be used to also run a separate site on the same server or are you only allowed one installation?

Please see these FAQs:
How many websites can I use Showkase on?
Does a single domain license cover multiple subdomains?
With a single license, you can have as many separate Showkase sites as you like on a single domain (and all associated subdomains). Just install each Showkase site into a unique folder and each site will be self-contained in its own folder.

How does the program deal with security? Once Showcase is installed is there a password system to ensure someone else cannot access the program, make changes and publish?

Each Showkase site requires a username and password to log in to the admin section (to create or edit pages).
See the Live Demo Admin login page as an example.
Once installed, you can change the username and password in the 'System -> Change Log-in' section.

2016-04-07 19:51:02

For example the demo sites shown such as the Sarah Lee site on ShowKase seem to be all made using Juicebox-pro and created from a browser linking to the website.

The Sarah Lee demo site was created with Showkase. The Juicebox galleries within the site were all created within the Showkase interface. Juicebox accounts for just the galleries within the site, nothing more, nothing less. The rest of the web site (the header, footer, navigation menu, About page and Contact page) are all unique to Showkase and cannot be created with Juicebox (Lite or Pro).

Can Sarah lee template be created on local PC for upload using Juicebox-pro.

No. Showkase is a PHP web application and can be installed and used only on a web server. It cannot be used locally on a computer to create a web site (to be uploaded to a web server at a later date).

Does using Juicebox-pro give more flexibilty in designing a website than ShowKase which is limited to 3 themes.

The Showkase themes are completely independent of Juicebox-Pro. They set the look and feel of the web pages.
If you create a Juicebox-Pro gallery within Showkase, then you have access to all the Juicebox-Pro configuration options within the Showkase interface.
The Juicebox-Pro configuration options are the same whether the Juicebox-Pro gallery is part of a Showkase site or not.

On the Paul Bica template the listing of links to galleries etc. is on the left.

Yes. The Paul Bica demo uses the Boma theme (which uses a side menu).

It shows four. I assume the list could contain more, is the number limited to what would look okay on the page?

There is no limit to the number of galleries that you can list on each Gallery Index Page. If you have many, you might just need to scroll down the page to see them all listed in the menu, although you can choose to have the top-level menu entries collapsible (for example gallery pages names only visible when a Gallery Index Page is selected) if you like. (The menu in the Paul Bica demo just happens to not be collapsible.)

Are the fonts that are used on the Showkase theme builds interchangeable? Can you upload special fonts that the program will use?

Each theme has its own selection of fonts which you can choose from ('Site -> Custom Theme -> Fonts') but you can use a custom font by following the Adding Custom Styles and Fonts instructions.

If I decide to completely change the theme from say Kosel to Boma can that be done.

Yes. You can change your site's theme in just a couple of clicks ('Site -> Change Theme -> Select (link) -> Publish (button)').
You can swap themes quickly and easily (as many times as you like) to see how your site looks under each theme.

Is there any ability using Showkase to alter the visual theme.

Yes. Please see the Basic Customization and Creating Themes support sections for further details.

For example on the index home page and other pages can the name be placed by an image or is the Sarah lee only changeable by font?

All three themes support using an image logo as an addition to (or an alternative to) a text heading.
You can upload an image to the Showkase Library and then select the image in the 'Site -> Customize Theme -> Logo' section.

Will the Showkase program work on any hosted site?

Please see the Showkase System Requirements for details. There is a Showkase Server Compatibility Test that you can download and run on your web server to check that it has all the features Showkase needs.

Lastly if I started by purchasing Juicebox-pro and then decided I wanted the simplicity of Showkase do I just pay for the standard license and use my Juicebox-pro license with it?

Yes. If you were an existing Juicebox-Pro user, then you could purchase Showkase-Standard and use your Juicebox-Pro files by following the Installing a Pro Viewer instructions.
The only difference between Showkase-Standard and Showkase-Pro is that Showkase-Standard comes bundled with Juicebox-Lite and SimpleViewer-Standard (the free versions of the image viewers) whereas Showkase-Pro comes bundled with Juicebox-Pro and SimpleViewer-Pro.

2016-04-06 11:04:43

Opening a Juicebox gallery in a lightbox is certainly possible but might not be easy to implement in a Drupal environment.
First of all, you'd need to include the lightbox script (whichever one you choose to use) in your web page and ensure that the lightbox resource files are in a suitable location on your web server.
If you'd like to see how a Juicebox gallery can be opened in a SimpleModal lightbox, then please see this forum thread.
However, trying to integrate this into a Drupal page might be quite a complex and time-consuming task.

2016-04-06 10:47:47

Thank you for posting the URL to your web site.

while this DIV
...
doesn't work

There should really be no need to modify any of the code generated dynamically by the 'juicebox.js' JavaScript file (for example, removing a class name from a gallery container) and I'm not sure why doing so should work. (I would have expected that it would cause more problems than it would solve.)

In fact, I viewed the gallery on your home page before you removed it (I was planning on taking another look at it later) on a couple of different iOS devices (in Mobile Safari and Mobile Chrome under iOS 6.1.6 and in Mobile Safari, Mobile Chrome and Mobile Firefox under iOS 9.3.1) and the gallery seemed to display and function fine in all browsers on both devices. The gallery expanded from the Splash Page as expected, the images displayed OK and the gallery could be closed to return to the original embedding page.

it doesn't work (i tried also with my smartphone)

Could you please explain what you mean by "it doesn't work". What exactly happens (or doesn't happen) when you try to view the gallery?
Also, what smartphone are you using (make and model) and what browser (and version number) do you see the problem in?
(Using a browser extension to emulate a mobile device may not give 100% accurate results.)

As it seemed to work OK on my own devices, maybe clearing your own browser's cache before reloading your web page will help.

2016-04-06 10:41:20

The files used to create the multiple gallery demo pages are not available as a download package. (They are there as an example of what can be achieved rather than a ready-to-use template that users can download and use.)
You would need to view the web page in your browser and go to 'File -> Save Page As...' (in your browser's menu) to save the HTML page.
You would also need to make sure that you downloaded the 'jb.vertical.template.css' CSS resource file that the example uses.
You could then swap the sample galleries for your own and modify the header and footer content if necessary.

Here is an alternative, automated one-page solution that you could try.
First of all, create a few (two or three) sample galleries with JuiceboxBuilder-Lite.
Save them in gallery folders named 'gallery1', 'gallery2', etc.
Now use the code below to create an HTML file (in a plain text editor), name the file whatever you like, place it in the same directory as the gallery folders and open it in a browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                background-color: #222222;
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                padding: 10px 0px;
                text-align: center;
                width: 100%;
            }
            #page {
                font-size: 30px;
            }
            #menu {
                padding: 10px 40px 0px 40px;
            }
            #footer {
                background-color: #222222;
                bottom: 0px;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                left: 0px;
                position: relative;
                text-align: center;
                width: 100%;
            }
            #wrap {
                margin: 0 auto;
                width: 80%;
            }
            .gallery {
                cursor: pointer;
            }
            a.gallery:hover {
                color: #888888;
            }
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">

            // Initialize Juicebox object variable name
            var jb;

            // Function to process all galleries
            function doProcess(counter) {
                $.get('gallery' + counter + '/config.xml', function(data) {

                    // Build gallery folder name
                    var name = 'gallery' + counter;

                    // Create space between links
                    if (counter > 1) {
                        $('#menu').append($('<span />').html('&nbsp;&nbsp;&nbsp;'));
                    }

                    // Fetch Gallery Title from gallery XML file
                    var title = $.trim($(data).find('juiceboxgallery').attr('galleryTitle')) || 'Untitled';

                    // Fetch Gallery Description from gallery XML file
                    var description = $.trim($(data).find('juiceboxgallery').attr('galleryDescription')) || '';

                    // Add link to Document Object Model and register click handler to run loadGallery and doLayout functions when link is clicked
                    $('#menu').append($('<a />').attr('id', name).addClass('gallery').html(title).click(function() {
                        loadGallery(name, description);
                        doLayout();
                    }));

                    // Initially load first gallery
                    if (counter === 1) {
                        loadGallery(name, description);
                    }
                }).done(function() {

                    // Process next gallery
                    doProcess(++counter);
                }).fail(function() {

                    // Display message if no galleries found
                    if (counter === 1) {
                        $('#menu').append($('<span />').text('No galleries found.'));
                    }

                    // Show header and footer when all galleries have been processed
                    $('#header, #footer').css('visibility', 'visible');

                    // Layout page and resize gallery
                    doLayout();
                });
            }

            // Function to layout page and resize gallery
            function doLayout() {
                var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height());
                var headerHeight = parseInt($('#header').outerHeight(true));
                var footerHeight = parseInt($('#footer').outerHeight(true));
                var galleryHeight = windowHeight - headerHeight - footerHeight;
                $('#wrap').height(galleryHeight);
                if (jb) {
                    var galleryWidth = parseInt($('#wrap').innerWidth());
                    jb.setGallerySize(galleryWidth, galleryHeight);
                }
            }

            // Function to load gallery, underline selected link and display Gallery Description in page footer
            function loadGallery(base, desc) {

                // Load gallery
                jb = new juicebox({
                    backgroundColor: "#222222",
                    baseUrl: base + "/",
                    containerId: "juicebox-container",
                    galleryHeight: "100%",
                    galleryWidth: "100%"
                });

                // Underline selected link
                $('.gallery').css('text-decoration', 'none');
                $('#' + base).css('text-decoration', 'underline');

                // Display Gallery Description in page footer
                $('#description').css('padding', desc ? '10px 40px' : '0px').html(desc);
            }

            // Run following when Document Object Model is complete
            $(document).ready(function() {

                // Enter Page Title here
                var page = "Multiple Galleries";

                // Display Page Title in browser tab
                document.title = page;

                // Display Page Title in page header
                $('#page').html(page);

                // Hide header and footer until all galleries have been processed
                $('#header, #footer').css('visibility', 'hidden');

                // Process all galleries
                doProcess(1);

                // Register resize handler to run doLayout function when browser window is resized
                $(window).resize(doLayout);
            });
        </script>
        <title></title>
    </head>
    <body>
        <div id="header">
            <div id="page"></div>
            <div id="menu"></div>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
        <div id="footer">
            <div id="description"></div>
        </div>
    </body>
</html>

The links to each of the galleries are the gallery titles and the gallery description (Pro only) is displayed below the selected gallery.

(With Showkase, multiple galleries can be listed on Gallery Index Pages without any manual coding at all.)

Juicebox v1.5.1 Released!

Search options (Page 87 of 234)

Posts found: 2,151 to 2,175 of 5,848

2,151 Reply by Steven @ Juicebox 2016-04-21 21:18:37

Re: Presets, Gallery position [SOLVED] (11 replies, posted in Juicebox-Pro Support)

2,152 Reply by Steven @ Juicebox 2016-04-21 19:23:59

Re: Jucibox-Pro Facebook (3 replies, posted in Juicebox-Pro Support)

2,153 Reply by Steven @ Juicebox 2016-04-21 18:27:15

Re: Hide image name in juicebox pro [SOLVED] (4 replies, posted in Juicebox-Pro Support)

2,154 Reply by Steven @ Juicebox 2016-04-21 11:05:19

Re: Phonegap - Juicebox can't display locally in this browser (5 replies, posted in Juicebox-Pro Support)

2,155 Reply by Steven @ Juicebox 2016-04-21 11:05:10

Re: backbutton Url and other links (3 replies, posted in Juicebox-Pro Support)

2,156 Reply by Steven @ Juicebox 2016-04-20 23:34:19

Re: Phonegap - Juicebox can't display locally in this browser (5 replies, posted in Juicebox-Pro Support)

2,157 Reply by Steven @ Juicebox 2016-04-20 23:22:01

Re: backbutton Url and other links (3 replies, posted in Juicebox-Pro Support)

2,158 Reply by Steven @ Juicebox 2016-04-19 09:40:10

Re: Presets, Gallery position [SOLVED] (11 replies, posted in Juicebox-Pro Support)

2,159 Reply by Steven @ Juicebox 2016-04-18 18:55:02

Re: Presets, Gallery position [SOLVED] (11 replies, posted in Juicebox-Pro Support)

2,160 Reply by Steven @ Juicebox 2016-04-18 09:39:37

Re: Presets, Gallery position [SOLVED] (11 replies, posted in Juicebox-Pro Support)

2,161 Reply by Steven @ Juicebox 2016-04-17 08:54:56

Re: Phonegap - Juicebox can't display locally in this browser (5 replies, posted in Juicebox-Pro Support)

2,162 Reply by Steven @ Juicebox 2016-04-17 08:54:05

Re: Presets, Gallery position [SOLVED] (11 replies, posted in Juicebox-Pro Support)

2,163 Reply by Steven @ Juicebox 2016-04-13 08:56:04

Re: Visual Artist web site [SOLVED] (13 replies, posted in Juicebox-Lite Support)

2,164 Reply by Steven @ Juicebox 2016-04-11 20:30:33

Re: Visual Artist web site [SOLVED] (13 replies, posted in Juicebox-Lite Support)

2,165 Reply by Steven @ Juicebox 2016-04-11 20:29:59

Re: Direct Image URL with Identifer (9 replies, posted in Juicebox-Pro Support)

2,166 Reply by Steven @ Juicebox 2016-04-11 09:45:07

Re: WP-plugin to make a sitemap image xml (1 replies, posted in Juicebox-Lite Support)

2,167 Reply by Steven @ Juicebox 2016-04-10 08:33:32

Re: iPad Pro landscape cropping [SOLVED] (17 replies, posted in Juicebox-Pro Support)

2,168 Reply by Steven @ Juicebox 2016-04-09 08:42:19

Re: Direct Image URL with Identifer (9 replies, posted in Juicebox-Pro Support)

2,169 Reply by Steven @ Juicebox 2016-04-08 22:20:18

Re: Direct Image URL with Identifer (9 replies, posted in Juicebox-Pro Support)

2,170 Reply by Steven @ Juicebox 2016-04-08 09:21:29

Re: Juicebox Design issues while integrating with bootstrap (1 replies, posted in Juicebox-Lite Support)

2,171 Reply by Steven @ Juicebox 2016-04-08 09:21:25

Re: Visual Artist web site [SOLVED] (13 replies, posted in Juicebox-Lite Support)

2,172 Reply by Steven @ Juicebox 2016-04-07 19:51:02

Re: Visual Artist web site [SOLVED] (13 replies, posted in Juicebox-Lite Support)

2,173 Reply by Steven @ Juicebox 2016-04-06 11:04:43

Re: Image Limits - Drupal (15 replies, posted in Juicebox-Pro Support)

2,174 Reply by Steven @ Juicebox 2016-04-06 10:47:47

Re: Juicebox not working in mobile (4 replies, posted in Juicebox-Lite Support)

2,175 Reply by Steven @ Juicebox 2016-04-06 10:41:20

Re: Visual Artist web site [SOLVED] (13 replies, posted in Juicebox-Lite Support)

Posts found: 2,151 to 2,175 of 5,848