1 Topic by joshpho (edited by joshpho 2013-06-28 00:32:23)

  • Registered: 2013-06-28
  • Posts: 2

Topic: Embedding multiple galleries with html pages are in the same folder?

Hi,

I was viewing this guide (http://www.juicebox.net/support/embeddi … -galleries) for embedding multiple galleries, but noticed that it recommended to keep the html pages themselves in the same, separate folders of the Juicebox galleries.

This isn't an option for me, however, as my site depends on having all of my html pages on the same level (at least, I'd rather keep them that way.) Does anyone have more specific instructions on how I'd link to separate Juicebox galleries without having the html pages in their folder? i.e. what path would I use?

Also, does anyone have a good guide to embedding resizing galleries? My site (https://dl.dropboxusercontent.com/u/330 … /Home.html) has responsive div's so I'd like the galleries to match. I saw this bit on the instructions page:

Using a Resizable Gallery with a Header

Sometimes it is useful to have a HTML header or footer and have Juicebox resize to fill the remaining browser window. In this case we can use JavaScript to dynamically resize the gallery when the browser is resized. In the examples below we use the jQuery JavaScript library to do this.


... But I'm a bit new to juicebox/jQuery and wasn't able to follow from the example pages alone. Could I add something to the embed code alone to make them automatically resize with the window?

Thanks for any help!
J

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

Re: Embedding multiple galleries with html pages are in the same folder?

You can embed multiple galleries using the baseUrl method as documented here.
You can keep each gallery as a self-contained entity in its own folder and upload the complete gallery folders to your web server but all the HTML pages into which the galleries are embedded can be anywhere on your web server (all in the same folder if you wish).

A Juicebox gallery will resize dynamically with the size of the user's browser window only if the dimensions of the gallery itself and those of all parent containers are expressed as percentages. If there is an absolute pixel value anywhere up the chain, the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).

The example you quoted has a header of a fixed height and then uses jQuery to assign new fixed height (not a percentage) to the gallery each time the user's browser window is resized.
You can view the source of the sample web pages in a browser and copy/modify them to suit your needs.

As an example, if you wanted a web page with a fixed height header and a gallery which takes up the remainder of the available space in the user's browser window, take a look at this forum post.

3 Reply by joshpho (edited by joshpho 2013-07-05 02:04:28)

  • Registered: 2013-06-28
  • Posts: 2

Re: Embedding multiple galleries with html pages are in the same folder?

Steven wrote:

You can embed multiple galleries using the baseUrl method as documented here.
You can keep each gallery as a self-contained entity in its own folder and upload the complete gallery folders to your web server but all the HTML pages into which the galleries are embedded can be anywhere on your web server (all in the same folder if you wish).

I'm trying the baseURL method, but it doesn't seem to be working. Could you help?

I have my regular juicebox folders put in their own "zukan_gallery" folder...

http://i.imgur.com/ukcmcGz.png

http://i.imgur.com/i2qUyua.png

And then on the page I want it embedded on, I have the following put for the src and baseURL:

                <div class="col span_1_of_2">
                        <!--START JUICEBOX EMBED-->
<script src="zukan_gallery/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : 'zukan_gallery/',
    containerId : 'juicebox-container',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

            </div>

But on the page itself (http://bokenyu.site44.com/zukan.html), nothing is embedding. What is going wrong?

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

Re: Embedding multiple galleries with html pages are in the same folder?

Your baseUrl embedding code looks fine and the paths within it are correct (for your current folder structure) but the embedding code is not present in your 'zukan.html' file.
Make sure that you have uploaded a copy of your 'zukan.html' file to your web server which contains the embedding code and if you are in any doubt as to whether the old version of the file is being overwritten, try deleting it from your web server first before uploading the new version in its place.

(When deleting any files from your web server, please be sure to make backup copies first in case anything goes wrong and you have to reinstate them.)