1,951 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

When you first view your gallery on a mobile device, what you are seeing is 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) and may may too small to be usable.
When the user clicks or taps the Splash Page, the gallery is expanded to fill the user's browser window (giving the images more space to be displayed).
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.

By default, the Splash Page uses the first image in the gallery and the image is resized to fill the Splash Page (cropping may occur).
As the Splash Page image can be though of as representing the gallery as a whole, you could create and use an image specifically for the Splash Page (it does not need to be used in the gallery itself). You can set an image for the Splash Page using the splashImageUrl configuration option.
As your gallery is responsive (its size will depend on the size of the user's browser window) and the Splash Page image is cropped to fill the gallery area, you might like to choose an image which would work well when dynamically cropped to different sizes.

Go to forum: Juicebox-Pro Support

1,952 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Lite Support)

That's really strange. I don't think I've ever heard of anyone being able to use the Open Gallery button but not the New Gallery button. I'm really not sure what could be causing your problem.
Maybe there is an issue with the functionality of just the button on your system. Try going to 'Gallery -> New...' from the drop down menu at the top or use the keyboard shortcut 'Ctrl+N'. These are alternate ways to start generating a new gallery.

... can you send me a file or folder to click on that will allow me to customize it?

If the Open Button seems to be working, then you should hopefully be able to open the sample 'web' gallery from the Juicebox-Pro zip file.

The 'web' gallery is a sample gallery with all default settings that you can hopefully use as a template to start creating your own gallery. (Just delete the two sample images and add your own on the 'Images' tab, customize the gallery with the available configuration options on the 'Customize' tab and save the gallery on the 'Publish' tab.)

Unzip the 'juicebox_pro_1.5.0.zip' file and you will find the 'web' gallery in the 'juicebox_pro_1.5.0/web/' location.
This is the folder that you should navigate to and select after clicking the Open Gallery button.

Go to forum: Juicebox-Lite Support

1,953 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

The solution expandInNewPage="TRUE" would be ok for me, but the gallery did not open in full screen.

This will expand the gallery to fill the browser window rather than the entire screen but because the gallery is expanded on a page of its own, it will not be affected by any custom CSS and should, therefore, display correctly.

Where can I get the older version 1.4.4.2? I have deleted this version on my laptop, perhaps I got it still on my PC.

Unfortunately, older versions of Juicebox-Pro are not available. Download links always point towards the current version.

Your problem is almost certainly due to either HTML errors on your web page or custom CSS which the gallery might be inheriting.

Please try the following:

(1) Make sure that your web page has a valid Doctyle Declaration at the very top of your web page (with nothing, not even any whitespace, above it). Currently, there are a <head> and a <link> tag above your Doctype Declaration (<!DOCTYPE html>). Without a valid Doctype Declaraion in the correct place, browsers will not know what set of standards the code on your web page should conform to and this can cause unpredictable results.

(2) With a valid Doctype Declaration in place, check your web page for any other HTML errors using the W3C Markup Validation Service and fix any errors reported.

(3) Check your web page's CSS for any rules which apply to all instances of certain HTML tags (such as <div>, <img> or <p>) to be sure that your gallery is not inheriting any of your custom CSS. If you find any such generalized CSS rules, target only those elements on your web page which require them using CSS id or class selectors.

(4) Also, I notice that you are embedding your gallery into a container with an id of '1'.
The HTML 4 specifications state that an id should begin with a letter (a-z or A-Z) rather than a digit.
The HTML 5 specifications are more relaxed but as you do not currently have a Doctype Declaration at the very top of your web page (you have a <head> and a <link> tag above it), browsers may not know what set of standards the code on your web page should conform to and using a single digit as an id might be causing a problem. Try embedding your gallery into a container named 'juicebox-container' instead.
Change:

containerId: "1",

.. and:

<div id="1">

... to:

containerId: "juicebox-container",

... and:

<div id="juicebox-container">

The best solution to #4 would be to fix #1 (ensure that the HTML 5 Doctype Declaration is the very first line of code on your web page with nothing above it).

Go to forum: Juicebox-Pro Support

1,954 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

You've welcome!
I've glad you've been able to resolve your problem.

Go to forum: Juicebox-Pro Support

1,955 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

There are no configuration options available to change the font size of image titles and captions.

However, you can style individual image titles and captions using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

Otherwise, you can change the size of all image titles and/or captions at once using CSS such as:

/* IMAGE TITLE */
.jb-caption .jb-caption-title {
    font-size: 20px !important;
}

/* IMAGE CAPTION */
.jb-caption .jb-caption-desc {
    font-size: 18px !important;
}

/* IMAGE NUMBER */
.jb-cap-frame .jbac-number {
    font-size: 12px !important;
}

You could add this CSS to the end of your gallery's 'jbcore/classic/theme.css' file or wrap it in <style type="text/css"> ... </style> tags and add it to the end of your gallery web page's <head> section.

Go to forum: Juicebox-Pro Support

1,956 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

First of all, try fixing the HTML errors on your web page. HTML errors can cause problems when web pages are rendered and some browsers can be more tolerant towards errors than others.
Your web page starts with the following code:

<head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><!DOCTYPE html>
<!-- jsn_boot_pro 3.0.2 -->
<html lang="de-de" dir="ltr">
<head>

The Doctype Declaration (<!DOCTYPE html>) should be at the very top of the document (before anything else) and there should be only one opening <head> tag.
Try changing the code above for:

<!DOCTYPE html>
<html lang="de-de" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Next, check your web page for any other HTML errors using the W3C Markup Validation Service and fix any errors reported.
Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.

Hopefully this will help. If not, then the problem may be due to custom CSS on your page conflicting with the gallery's own CSS. If this is the case, then it might help to expand the gallery on a page of its own (where it will not be affected by any custom CSS) by setting expandInNewPage="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

Go to forum: Juicebox-Pro Support

1,957 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

The code above just took a minute to come up with as an alternative to my previous suggestion.
As long as you've been able to resolve your problem with a solution that you're happy with, that's great.

Unfortunately, the glitch with JuiceboxBuilder (whereby an error can be generated if the resize image dimensions are too large) has not yet been fixed but it has been logged as a bug and should be addressed by the developers in due course.
In the meantime, if you need to have large images in your gallery and find that JuiceboxBuilder is unable to resize them as required, then you could perhaps manually resize your images in an imaging program such as Adobe Photoshop before feeding them to JuiceboxBuilder and deselect the 'Resize Images' checkbox on the 'Images' tab (so that JuiceboxBuilder simply copies the images across to the output gallery folder).

Go to forum: Juicebox-Pro Support

1,958 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Is there a way to have two different juicebox layouts on the same website?

Yes. Please see the Embedding Multiple Galleries support section for details on embedding multiple galleries on separate HTML pages or on one HTML page. (Each gallery can have a unique layout.)

Is there a way to add the juicebox gallery in to a CSS background div?

You would just need to embed a gallery into a web page as normal (following the instructions here) and overlay whatever content you like on top of the gallery using CSS (to position the custom content and stack it on top of the gallery using a high enough z-index).
Please note that Juicebox was not designed with this in mind so you might run into problems that need to be tackled as you encounter them.
However, something like the following might work. To see it in action, create a sample gallery with JuiceboxBuilder-Pro (just add a few images, don't worry about the configuration options) and use the following as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #wrap {
        position: relative;
    }
    #juicebox-container {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 600px;
        height: 400px;
        z-index: 9999;
        color: #ff0000;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '600',
        galleryHeight: '400',
        autoPlayOnLoad: 'TRUE',
        buttonBarPosition: 'NONE',
        enableLooping: 'TRUE',
        screenMode: 'LARGE',
        showAutoPlayStatus: 'FALSE',
        showImageNav: 'NEVER',
        showImageOverlay: 'NEVER',
        showThumbsOnLoad: 'FALSE'
    });
    </script>
    <div id="wrap">
        <div id="juicebox-container"></div>
        <div id="overlay">Custom content goes here.</div>
    </div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

Go to forum: Juicebox-Pro Support

1,959 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

My solution works OK but it is not as efficient as it could be.
As you've noticed, on a retina display, both images are loaded (and the the high resolution image can be seen to load after the low resolution image).

If would be more efficient to always load only one image (depending on the device pixel ratio) and from a visual standpoint, you would not see one image being loaded on top of another.
You could initially set backButtonText="" and use something like the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        backButtonPosition: 'TOP',
        backButtonText: '',
        backButtonURL: 'http://www.example.com/index.html'
    });
    jb.onInitComplete = function() {
        var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
        $('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Just a small tweak to make things a little more streamlined.

Go to forum: Juicebox-Pro Support

1,960 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Lite Support)

Please try the following:

(1) Uninstall JuiceboxBuilder-Lite.
(Delete the 'JuiceboxBuilder-Lite' file from the Applications folder and empty your Trash.)

(2) Manually delete the following folder from your hard drive:
/Users/your_username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Lite

(3) Search your hard drive for the term 'JuiceboxBuilder-Lite' and delete all entries found.

(4) Reinstall JuiceboxBuilder-Lite following the instructions here.

I know you said that you have already uninstalled and reinstalled the application and deleted files from the Library but I do not know if you have deleted the 'ELS' folder noted in Step #2 above (and manually removing this folder has been known to help certain users who have experienced similar issues).

Hopefully this will help.

Go to forum: Juicebox-Lite Support

1,961 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

I'm glad you've been able to implement my suggestions and that they're working well for you.

The embedding code I provided as a solution for #2 (see this forum post) can actually just be copied and pasted directly into your gallery's HTML web page (replacing any existing embedding code). You'd just need to supply a second, higher-resolution image (and change the gallery dimensions and background color if necessary).

...if it doesn't matter than I'll happily leave it be.

Not only does it not matter, it actually needs to be like this.
All configuration option values are enclosed in double-quotes. If a value actually contains a double quote itself, then this double-quote needs to be escaped (as &quot;) so that it is not confused with the closing double-quote at the end of the value.
Likewise, any < characters within configuration option values need to be escaped as &lt; so that they are not seen as opening tags (which would break the XML syntax).
I hope that makes sense.

Escaping XML entities is mentioned in the following FAQ (with a link to an online XML escape tool if you every need to edit your XML file manually).
How do I add HTML formatting to the Gallery Title or Back Button?

Go to forum: Juicebox-Pro Support

1,962 Reply by Steven @ Juicebox

(496 replies, posted in Juicebox-Pro Support)

@TonyHall

Excellent! Your first simple solution works perfectly - thank you.

That's great to hear!

I assume the only downside to doing this is the inflated logo image size that must be downloaded (in my case 23 KB, so not too onerous)?

There are a couple of downsides but, depending on your point of view, they may not be big problems and are things you might easily be able to live with.
(1) Every user's browser will be downloading a larger image (whether they have a retina display or not).
(2) On a non-retina display, the image will be downsampled by the browser which might not always look as good as having the image displayed at its actual size.

#1 is a compromise I'd be happy to accept in your case (23KB is not a huge overhead that I'd worry about).
#2 can easily be checked on a non-retina display to see if it looks OK. If it does not look OK, then my second suggestion above tackles this problem.

I'd like to thank you for your excellent support on this forum, and the helpful and patient guidance you give to all the HTML, CSS & JavaScript neophytes like myself.

You're welcome! I'm always happy to help if I can.

The only other trivial niggle I have is that the top of the Back Button image doesn't quite align with the top of the Button Bar, despite both being set to "Top" position - but this is somewhat inconsequential and probably something no one would notice or care about!

I've just checked to make sure that the top of the default Back Button icon lines up with the top of the Button Bar icons (and it does).
It looks like the alignment problem might happen only when you use a custom image for the Back Button.
Try adding a negative top margin of 5px to your Back Button image (via inline CSS). For example, try using something like the following for your backButtonText.

<img src="logo.jpg" width="100" height="75" style="margin-top: -5px;" />

Hopefully this will help.

Go to forum: Juicebox-Pro Support

1,963 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

You're welcome!

Go to forum: Juicebox-Pro Support

1,964 Reply by Steven @ Juicebox

(496 replies, posted in Juicebox-Pro Support)

@TonyHall

The easiest way would be to ensure that your source image is large enough and have the browser downsample it by half in both dimensions.
If your logo image is 200px x 150px, for example, then you could use something like the following for your backButtonText.

<img src="logo.jpg" width="100" height="75" />

This should hopefully work OK and be a suitable solution for you.

To avoid browser downsampling on non-retina displays, you'd need to provide two separate images (one for regular displays and another for retina displays, use the smaller of the two images for the backButtonText, wait until the gallery has loaded (using the Juicebox-Pro API's onInitComplete() function), detect the pixel density of the user's display and, if necessary, replace the smaller image with the larger one using JavaScript (to apply custom HTML code to the CSS class that Juicebox-Pro uses for the Back Button).
If you had two images, a small one at 100px x 75px ('small.jpg') and a large one at 200px x 150px ('large.jpg'), then you could use the following as your backButtonText:

<img src="small.jpg" width="100" height="75" />

... and use the following embedding code:

<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222'
    });
    jb.onInitComplete = function() {
        if (window.devicePixelRatio >= 2) {
            $('.jb-go-back-text').html('<img src="large.jpg" width="100" height="75" />');
        }
    };
</script>

Go to forum: Juicebox-Pro Support

1,965 Reply by Steven @ Juicebox

(496 replies, posted in Juicebox-Pro Support)

@erikarand

Try the following.
Open your gallery's 'jbcore/classic/theme.css' file in a plain text editor and scroll down to the following section on line 742:

div.jb-status-loading {
    background: url('img/spinner.gif') no-repeat center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center
}

Add a background-size entry to this section of CSS, limiting the size of the 'spinner.gif' image to a quarter of its actual area.
For example, if your 'spinner.gif' image is 200px by 150px, then use values of half the width and half the height as follows:

background-size: 100px 75px;

If, after doing this, your 'spinner.gif' looks too small, create a larger source image and try the procedure above with the new image.
I hope this helps.

Please note that the line number above refers to the current version of Juicebox-Pro (v1.5.0).

Go to forum: Juicebox-Pro Support

1,966 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

I'm sorry to hear that the problem has returned.

If reloading the page (by pressing Cmd+R (Mac), Ctrl+R (Windows) or by selecting 'Web -> Reload' from the drop-down menu at the top) clears the problem when it occurs, then maybe it is something that you can live with.

Otherwise, you might like to disable the auto-update functionality (check out this forum post) and refresh the live preview window manually when required.

It is certainly a problem that appears to manifest itself only on certain systems. As I mentioned, I have never seen the problem myself on my own PC using the current version of the plugin (v1.5.0) with the current version of Lightroom (v6.6.1).

Thanks for keeping me updated.

Go to forum: Juicebox-Pro Support

1,967 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

I notice that the Button Bar works as expected when you view the gallery on its own web page (at '/photos/galleries/2014-11-16 garage/index.html').
On your main page, it looks like the hit areas for the Button Bar buttons are being offset (and not lining up correctly with the icons) because of the following code in your 'thomasblom.css' file.

a {
    padding-left: 20px;
    padding-right: 20px;
}

This code affects all <a> tags on your page, including those within the gallery.
There is no way to protect a Juicebox gallery (or any other HTML element) from such global CSS and the Juicebox gallery has no option but to inherit this CSS.
Perhaps the best solution would be to use CSS Selectors (classes and ids) to apply your custom CSS rules to only those elements on your web page that require them.
I hope this helps.

Go to forum: Juicebox-Pro Support

1,968 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

You're welcome.
Thanks for the additional info.

Go to forum: Juicebox-Pro Support

1,969 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

I am no longer experiencing this problem...

That's great to hear! Thank you for letting me know.
Just out of interest, are you a Mac OS 10.11 (El Capitan) user with an AMD graphics card (such as 6450M and 6970M)?
If so, then it looks like the problem may have been the known issue from Lightroom CC 2015.5.1 which might now have been fixed in Lightroom CC 2015.6.1.
(Otherwise, I'm not sure what the problem was but I'm still glad that it seems to have been resolved.)

Go to forum: Juicebox-Pro Support

1,970 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

Please see this forum thread which seems to describe the same problem that you are having.
Unfortunately, I still cannot replicate the problem on my own PC with Lightroom 6.6.1/CC 2015.6.1.
As I note in the forum thread, the sliders are generated using standard Lightroom SDK code and their functionality is handled by Lightroom itself (refreshing the live preview window when their values change).
The only workaround I have been able to find is to disable the live update and refresh the gallery manually when required (details in this forum post).

The problem could also be related to a known issue in Lightroom CC 2015.5.1.

Known Issue

Image flickers when moving an adjustment slider.  Note that this only occurs when using certain AMD graphics cards (such as 6450M and 6970M) on Mac OS 10.11 (El Capitan). We are working with our partners to resolve this issue. In the meantime, you can workaround this issue by disabling “Use Graphics Processor” in Lightroom’s preferences.

If you use a Mac with AMD graphics, then you might like to try the troubleshooting suggestion here.

I hope this helps.

Go to forum: Juicebox-Pro Support

1,971 Reply by Steven @ Juicebox

(16 replies, posted in Juicebox-Pro Support)

Is this the same for the Lr plugin?

I would imagine that the resizing procedure used by Lightroom would be much more complex that what is available to JuiceboxBuilder-Pro within the Adobe AIR API.
As a test, I've just created a quick gallery with the Lightroom plugin and embedded copyright data is retained in the images exported for the gallery.

Do I have to make my images the same sizes as the settings in the 'Change Sizes' dialog, or does it make no difference?

I'd recommend that the images for the gallery are slightly larger than the gallery's image area (sometimes difficult to gauge for a responsive gallery) so that Juicebox can dynamically scale them down slightly if necessary. In doing so, the images will always be able to be displayed as large as possible within the gallery's image area. If your images are too small, then Juicebox will not scale them up unless you set imageScaleMode="SCALE" in the Main Image Options section (but scaling up small images will reduce their visual quality so I would not recommend it).
The default image size for JuiceboxBuilder is 1024px x 768px which is usually a good compromise for most web galleries.
However, if your target audience is likely to be viewing your galleries on large monitors, you might like to increase these values appropriately.

Go to forum: Juicebox-Pro Support

1,972 Reply by Steven @ Juicebox

(16 replies, posted in Juicebox-Pro Support)

thanks as ever for the useful reply

You're welcome.

I've dabbled a bit with image filters in Java and basically, the process is concerned with only pixels.
The output image is the result of the source image pixels being run through a kernel (a convolution matrix or mask).
The metadata does not even feature in the equation.

I do not know for sure but it sounds like the same concept is being used within JuiceboxBuilder when an image is resized.
A new image is built up using the source image pixels (and the original metadata is left behind).

Anyway, I appreciate you posting in the Feature Requests forum thread.
It is certainly the best place for all ideas.

Go to forum: Juicebox-Pro Support

1,973 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

We have a video on YouTube entitled How to Build a Web Image Gallery in 5 Minutes which you might find useful.

Also, instructions for embedding a Juicebox gallery in a web page can be found in the Embedding Guide.

If you want to embed multiple galleries throughout your site, then I would recommend using the baseUrl method of embedding documented here.
Essentially, once you have created a gallery with JuiceboxBuilder, you would upload the entire gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into your web page where you want the gallery to appear.
You can upload the gallery folder to anywhere on your web server as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the galley folder) are correct.
Keeping each gallery as a self-contained entity (each gallery in its own folder) should help to keep things organized on your server.

Also, you can have all galleries throughout your site share a single 'jbcore' folder (rather than have each gallery use its own 'jbcore' folder). Please see here for details.
This has the added advantage of being able to upgrade all galleries at once (when a new version of Juicebox is released) by replacing just one 'jbcore' folder on your site.

If you use the baseUrl method of embedding and have all your galleries share a single 'jbcore' folder, then you could paste the baseUrl embedding code into your template.
As long as the path to the 'juicebox.js' file is correct in the embedding code, the only thing that would need to be changed for each gallery is the baseUrl itself (the path to each gallery folder).

If you are looking for an automated solution to creating and listing multiple galleries, then you might be interested in another one of our products - Showkase.

Showkase is a PHP web application which allows you to create a complete portfolio web site (integrating multiple galleries) online.
Showkase has full support for Juicebox-Pro (and SimpleViewer-Pro) galleries and the galleries can be created within the application itself in a web browser interface (or created with JuiceboxBuilder and imported).

You can create Gallery Index pages and have as many galleries listed on each Gallery Index page as you wish.
Each gallery is represented by a thumbnail image with the gallery title displayed below and the gallery is opened when the user clicks on the image.
Demo sites created with Showkase can be found here and a sample Gallery Index page can be found here.

Showkase can also create non-gallery pages (About, Basic and Contact pages) where you can add information about yourself (or any other content you like).
All of this is done automatically within the Showkase interface without the need for any manual coding at all.

Showkase can be purchased as Showkase-Standard (which comes with Juicebox-Lite and SimpleViewer-Standard, the free versions) or Showkase-Pro (which comes with Juicebox-Pro and SimpleViewer-Pro).
The only difference between Showkase-Standard and Showkase-Pro is the bundled viewers.

More information on the differences between Juicebox and Showkase can be found in this forum post.

I hope you find this information useful.

Go to forum: Juicebox-Pro Support

1,974 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

That's great! Thank you for letting me know.

Go to forum: Juicebox-Lite Support

1,975 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

It looks like the problem is that your gallery is loaded as soon as the main web page is loaded but before the gallery's parent container is visible on the page (which happens only when the T-Shirts link is clicked).
Your gallery's dimensions are 100% x 100% (100% of the size of the parent container) and, when the page is initially loaded, the gallery's parent container has zero size (it does not yet exist on the web page) and, consequently, the gallery also has zero size.
You should notice that if you resize your browser window after the gallery has loaded, the gallery elements should snap into place correctly (now that the gallery's parent container exists and Juicebox can work out what its actual size should be 100% of).

Solutions to this problem would be:
(1) Give your gallery fixed pixel dimensions rather than percentages (such as 800px x 600px). This should work but your gallery would become a fixed size and would no longer be responsive.
... or:
(2) Load the gallery only after the T-Shirts link is clicked.
You could put your gallery's embedding code into a JavaScript function and then run the function when the link is clicked (after the gallery's parent container is visible on the page).

For example, you could change:

<!--START JUICEBOX EMBED-->
<script src="juicebox_gallery_tshirt/jbcore/juicebox.js"></script>
<script>
new juicebox({
 baseUrl : 'juicebox_gallery_tshirt/',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%", 
backgroundColor: "rgba(34,34,34,1)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... to:

<!--START JUICEBOX EMBED-->
<script src="juicebox_gallery_tshirt/jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            baseUrl: "juicebox_gallery_tshirt/",
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%", 
            backgroundColor: "rgba(34,34,34,1)"
        });
    }
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... and then add a JavaScript click handler to run the loadGallery() function when the T-Shirt link is clicked.
It looks like this is the link to your T-Shirts modal:

<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">

You could try changing it to:

<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" onclick="loadGallery(); return true;">

Hopefully this will help.

Go to forum: Juicebox-Lite Support