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?

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!

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!

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

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

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