• Registered: 2017-11-24
  • Posts: 5

Topic: Embedding

Hi all,

I have installed Juicebox Lite on my PC and need to embed multiple galleries in my html website. I have read and used the embedding guide in juice box's support docs but I am obviously doing something wrong as its not working at all. To be honest I didnt expect it to work due to path issues.

Anyway, I am building my site site using my old copy of Dreamweaver 8 (Pre Adobe if its relevent) Most of the files I upload directly through dreamweave such as pages, images etc. I do have Filezilla installed and set up as well for direct server access. I'm pretty sure my problems stem from where I am putting the files on my server, and also the code juicebox generates to embed in my web page. So I guess the best thing to do would be to tell you exactly what I am doing then hopefully one of you experts can step in and tell me what I am doing wrong ;P

Here goes.........

So I go ahead and create my gallery then copy the generated code from JB. I then paste the code directly into my web page in code view at the point where I want the gallery to show up on my web page. I then open Filezilla and upload the JB folder for that gallery directly to my server into a folder called ht docs, the folder that Fasthosts tells you to place all of your webfiles in. However Im pretty sure that a folder within a folder will not be found by a browser when loading the page?

Thats about it. If I have missed anything out or if I need to give more info please let me know.

Many thanks :)

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

Re: Embedding

If you are using the embedding code generated by JuiceboxBuilder-Pro (and presented on the application's 'Publish' tab), then you should follow the regular embedding instructions here and upload the contents of the gallery folder (not the gallery folder itself) to the directory that contains the HTML web page into which you have inserted the gallery's embedding code.

If you have uploaded a complete gallery folder to your web server, then you should use the baseUrl method of embedding documented here. The baseUrl method of embedding uses similar embedding code to the regular method but with a baseUrl entry pointing towards the gallery folder (so that Juicebox knows where to find the gallery).

For example, if you have a gallery folder named 'my_gallery_folder' and you upload the complete gallery folder to your 'ht_docs' directory, then you can use the following embedding code (changing the gallery dimensions and background color as necessary):

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

The leading slashes in the paths above denote your root directory (in your case, your 'ht_docs' directory) so the embedding code above will work in any web page throughout your website without modification.

I hope this helps.
However, if you continue to experience difficulties, then please let me know and I'll try to help further.

  • Registered: 2017-11-24
  • Posts: 5

Re: Embedding

Hi Steven,

Thats great thanks, worked a treat! And I guess I can add mutiple galleries the same way by simply renaming new gallery folders and altering the code accordingly.

One last question though if you dont mind? The gallery on my web page is set hard to the left of the page and I would like it centered if possible. Heres my code for my first gallery. can you suggest any changes to achieve this please? I tried adding an align="center" to the code but it just messed the code up.

<script type="text/javascript" src="mbjsmb5rhk.js"></script></th>
  </tr>
</table>
<p align="center" class="style3">Scar </p>
<p class="style3"><!--START JUICEBOX EMBED-->
<script src="scar/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : 'scar/',
    containerId : 'juicebox-container',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED--> </p>
<table width="1000" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF">
  <tr>

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

Re: Embedding

Thats great thanks, worked a treat!

You're welcome! I'm glad you've got it working. Thank you for letting me know.

And I guess I can add mutiple galleries the same way by simply renaming new gallery folders and altering the code accordingly.

Yes. You can upload as many gallery folders to your web server as you like (just upload them all to your root directory if you like for convenience) and point towards each gallery folder using a baseUrl in each gallery's embedding code.
If you plan to embed multiple galleries on a single HTML page, here are a couple of tips:
(1) Load the 'juicebox.js' file only once per web page (from inside one gallery's 'jbcore' folder) rather than once per gallery.
(2) Embed each gallery into a <div> container with a unique id.

The gallery on my web page is set hard to the left of the page and I would like it centered if possible.

If you'd like to horizontally center a gallery on a web page, try applying the CSS rule margin: 0 auto; to the gallery's <div> container. This should horizontally center the gallery within its parent container. For example:

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

Incidentally, your gallery's <div> container should not be inside <p> tags. (This is not valid HTML.)