• Registered: 2016-06-28
  • Posts: 6

Topic: Multiple galleries on 1 page - issues

Hello,

Having issues properly displaying 2 Juicebox galleries on my site www.nylap4life.com. Site was built using Instapage

I have stored the photos on Google Drive, and referencing as per https://www.juicebox.net/support/embedd … plate-site

I have tried 2 methods, with each producing a different issue.
1) baseURL
Issue: Works well on desktop, but produces 'cannot find config file' error when loading on mobile

Tried not calling the juicebox.js script twice, and also storing each gallery folder in different locations, but to no effect.
Code used:

Gallery 1
<script src=’https://www.googledrive.com/host/0B5VxRCL18uZdb0ZWbGdsYjFfUHM/jbcore/juicebox.js’></script>
<script>
  new juicebox({
    baseUrl : ‘https://googledrive.com/host/0B5VxRCL18uZdb0ZWbGdsYjFfUHM/’,
    containerId : 'juicebox-container',
    galleryWidth : '100%',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>


Gallery 2:
<script>
  new juicebox({
    baseUrl : ‘https://googledrive.com/host/0B5VxRCL18uZdUGh6dGh5NTFwdWM/’,
    containerId : 'juicebox-container-1',
    galleryWidth : '100%',
    galleryHeight : '400',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container-1"></div>

2) iframes
Issue: Works well on mobile. On desktop, first gallery is fine, 2nd gallery cuts the height so main imagine cannot properly be viewed (regardless of galleryheight value).

Note - tried using % value for height, displayed horrible on site.

code used:

Gallery 1:
<iframe src="https://googledrive.com/host/0B5VxRCL18uZdb0ZWbGdsYjFfUHM/index.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>

Gallery 2:
<iframe src="https://googledrive.com/host/0B5VxRCL18uZdUGh6dGh5NTFwdWM/index.html" width="100%" "height="400" frameborder="0" scrolling="no"></iframe>


Thanks for your help! I've spent hours on this with no luck

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple galleries on 1 page - issues

A couple of things I notice about the code you posted.

(1) In the baseUrl code, many of your strings are enclosed in ticks/backticks instead of regular single (or double) quotes.
Change all instances of ’ and ‘ to either ' or ".

(2) In the iframe code, you have a stray double-quote before the height attribute in the second iframe.

Hopefully making these changes will help.

I expect the baseUrl code may not work (due to Google Drive restrictions) but removing the stray double-quote should hopefully resolve your iframe problem.

  • Registered: 2016-06-28
  • Posts: 6

Re: Multiple galleries on 1 page - issues

Have tried both suggested fixes, and the issues persist. What else could be causing the issue?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple galleries on 1 page - issues

As I mentioned, I think the baseUrl method may not work (as Google Drive are not a regular web host) but the iframe method should not crop your galleries.
Set your gallery heights to 100% (to fill the iframes) and set the heights of the iframes as necessary.
The galleries should fill the iframes without cropping.
Please post the URL to your web page so that I can take a look at the problem for myself and hopefully help further.

  • Registered: 2016-06-28
  • Posts: 6

Re: Multiple galleries on 1 page - issues

The URL is www.nylap4life.com - looking to update the 'Press' gallery. Thank you!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple galleries on 1 page - issues

Your second iframe has width="100%" and height="100%".
It's actual dimensions will be dependent on its parent containers. For example, the iframe's height will be 100% of its parent container's height. If the parent container does not have a height specified via CSS then the iframe's height might not be what you expect. Try using a fixed pixel height (like you do in your first iframe).
Also, it looks like the width of your second iframe is being restricted by the parent container #element-1181 which has been given a fixed width of 670px in the CSS in the <head> section of your page (so the iframe's width is 100% x 670px = 670px).

  • Registered: 2016-06-28
  • Posts: 6

Re: Multiple galleries on 1 page - issues

Thank you so much, the fixed pixel height seems to have fixed it!

Looking at the mobile site, the gallery size looks quite large with only 3 pictures in it. Is there a way to show the single picture as a default view for mobile, rather than just seeing thumbnails?

Happy to host the images on something other than google drive (suggestions welcome) if that improves the functionality!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple galleries on 1 page - issues

Is there a way to show the single picture as a default view for mobile, rather than just seeing thumbnails?

If you had Juicebox-Pro, you could set showSmallThumbsOnLoad="FALSE" and the gallery would initially display the first image in the gallery (instead of the thumbnail page) in Small Screen Mode. (Please note that this is a Pro only configuration option which is not supported by Juicebox-Lite, the free version.)

Ordinarily, when a Juicebox galley is embedded in a web page alongside other content, the Splash Page is displayed.
This is a placeholder for the gallery which, when tapped/clicked, expands the gallery fullscreen (to give the images more room on small screen displays).
Please see the Screen Modes support section for more details of the Splash Page.

However, your galleries are actually embedded in the HTML pages on Google Drive (and loaded into your main web page using iframes).

If you look at the actual HTML pages that contain the embedding code, each gallery is 100% x 100%, taking up the entire page (with no other content on the page).
Juicebox sees these as a full page galleries and, therefore, does not display the Splash Page.

Even if you forced the Splash Page to be displayed (via the Pro option showSplashPage="ALWAYS"), it would be displayed in both desktop and mobile browsers (probably not what you want) and, when the Splash Page is tapped/clicked, the galleries would only expand to fill the iframes (not the entire main page).

Happy to host the images on something other than google drive...

The best thing you could do is host the entire galleries (not just the images but the gallery's XML configuration file and the Juicebox core files, too) on your own web server (alongside the other files for your nylap4life.com site) and embed the galleries into your main web page using the regular (or baseUrl) embedding code.
Then your galleries will no longer be affected by the drawbacks of using iframes.

  • Registered: 2016-06-28
  • Posts: 6

Re: Multiple galleries on 1 page - issues

Thank you for the help - sadly the web host (Instapage) doesn't allow image hosting... Is there another, non-Google external location that would work?

Also, is there a way to change the background of galleries using iframe?

Thanks!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple galleries on 1 page - issues

One possible solution would be to use a Flickr account as a source of images for your gallery.
Juicebox has build-in support for Flickr so you could continue to create your galleries with JuiceboxBuilder and upload them to your Instapage site without the need to modify any gallery files at all.
Enter you Flickr account details on JuiceboxBuilder's 'Images' tab (select 'Flickr' as the 'Image Source').

Otherwise, you could sign up for a hosting account with a regular web host (which does not have restrictions on the file types that you can upload to the web space that they provide), upload the images for your gallery there and edit your gallery's 'config.xml' file so that the imageURL and thumbURL entries point towards the images in their new locations.

Many web hosts offer free accounts which might be sufficient for your needs (please check with their own terms of use). Please note, however, that often you get what you pay for with free hosting and with a paid hosting account you will likely receive better support, more features and greater stability.

  • Registered: 2016-06-28
  • Posts: 6

Re: Multiple galleries on 1 page - issues

Thank you - I have created a Flickr account, and uploaded my photos there - what i'm not sure of is how do I link my Flickr gallery to my Instapage?

Do I use iframe or BaseURL, and if so, what is the URL of 1) the images, and 2) the config.xml file?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple galleries on 1 page - issues

You initially said "sadly the web host (Instapage) doesn't allow image hosting..." but, on further investigation, it looks like Instapage might be more restrictive that.

If Instapage disallowed only images to be hosted (which, for a web host, sounds like a strange thing to disallow) but still allowed other file types to be uploaded, then you could upload the entire gallery folder to your web space (which would include the Juicebox core files but not your gallery images which would be hosted on Flickr) and embed the gallery using the baseUrl method. There would be no need to worry about the paths to the images. Juicebox would handle that internally. It would find all your Flickr images from your Flickr User Name (in the gallery's configuration options).

However, I'm not sure that Instapage supports FTP access to the web space that they provide (there are no search results for "ftp" in the Instapage help section) so that you could upload your Juicebox gallery folder. Please check with Instapage support.
If they do not support FTP, then I would recommend using a regular web host (with no file type restrictions and FTP access so that you can upload whatever files you like to whatever locations you like).

If you still wanted to keep your Instapage page, it would be possible to host the gallery on a different server and still use the baseUrl embedding code on your Instapage page but there would be the added complication of overcoming the JavaScript same-origin policy. (You would be loading a JavaScript file from a different domain.)
Please see this forum post for a solution to this problem.

It all sounds a little complicated but it is due to the restrictions imposed by Instapage.
If your web page and Juicebox gallery were both hosted by a regular web host on the same web server, there should be no such problems.

However, maybe you can upload your Juicebox gallery to your Instapage site via FTP (you'll need to check with Instapage support). If you can, then just follow the baseUrl instructions and your Flickr-sourced gallery should display file.

There one final problem that you might encounter. There is an image within the Juicebox core files (the preloader spinner) which is temporarily displayed when an image is loading. If Instapage truly does not allow any images to be uploaded, then you will not see the preloader spinner in your gallery.
Again, with a regular web host, this would not be a problem.