Topic: First time user - can't seem to make it work and need help

Spent a lot of time reading forum posts, help files and watching the one video tutorial on youtube. Still can't make it work.


1. Using XARA web designer I designed a website. One of the pages needs a photo gallery on it. I decided to embed a Juicebox gallery.


1. the webpage opens up in browser but it shows empty. No gallery. Probably a path error. Can't figure out which though. or maybe it's something else altogether:


1. I installed Juicebox Builder (very nice by the way!) and created my gallery with a number of photos in it. So far so good.

2. At the "publish stage" I had some unanswered questions: I understand I can save the folder on my hard drive and give it anytime I chose (in my test I named it "karine_photo1")

3. BUT none of your help files mention anything about the next box: INDEX PAGE NAME. It defaults to "index.htm" but gives you the option to change it. I was not sure if I should rename the html file, why I should, and what the consequences would be if I did. In my mind my main web page is already called "index.htm" so I am wondering whether I can have another file named the same thing if it is stored in a subfolder or will it cause a problem with browsers? Bare with me I am not a pro at website building, despite what people think. I understand that if it not stored directly in my www folder it will not overwrite my current website index.html file. But is it not confusing to have two files with same name EVEN if they are not stored in the same folder? So I was tempted to rename it.

4. I therefore renamed the INDEX PAGE NAME to karine-photo1 (same as the folder containing the juicebox album")

5. I copied the html code and pasted it into my XARA webpage.

6. XARA automatically created a placeholder but failed to interpret the size from the code, Gave me a microscopic placeholder the size of 2 pixel LOL.

7. Having read your help files I then edited the code pasted to add the base url, replacing the "my_gallery_folder" with "karine_photo1"

<script src="karine_photo1/jbcore/juicebox.js"></script>
  new juicebox({
    baseUrl : 'karine_photo1/',
    containerId : 'juicebox-container',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
<div id="juicebox-container"></div>

above is what I ended up with (is it correct?)

8. I then stretched the placeholder (just in case) to give it a decent size on the page, then saved the webpage.

9. I opened up Fillezilla and uploaded the entire karine_photo1 folder Juicebox created and put it directly in my www folder on my server. the www folder is where all the website files must be stored.

10. I then published the XARA website, which updated the html file for that photo1.html page where the juicebox gallery was embedded.

11. I then opened up a browser and typed the webpage address to check out my results (or lack thereof LOL), page loaded up just fine but BLANK (aka: no embedded gallery showing up).

Was it my renaming the index.html file to karine-photo1.html that caused the failure to see the gallery? if not, what is the problem and how do I fix it?

Ok this is it, you can see the page here:   please disregard the certificate error (if any show up), Hostway messed up my Digicert certificate last night and they are in the process of reinstalling it. Hopefully by the time someone reads this, it will be fixed, but if not, now you know what is going on.

THANK YOU FOR YOUR HELP and I hope this detailed post might help other rookies like me who will have similar questions / problem.

Re: First time user - can't seem to make it work and need help

I'm sorry to hear that you are having difficulties embedding your Juicebox gallery.
Hopefully my notes below will help.

You can certainly name the gallery folder whatever you like (as long as you use web-safe characters: uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde).

The gallery's 'index.html' file is simply a HTML file into which the gallery is embedded with no other content. Therefore, you can use the file to display the gallery on a page of its own. If you plan to embed the gallery into an existing web page alongside other content, then the gallery's 'index.html' file is actually redundant and you can safely delete it if you like.
If you use the regular embedding code (presented on JuiceboxBuilder's 'Publish' tab), then you'll be uploading the contents of the gallery folder to the directory containing the web page with the embedding code. If you already have a file named 'index.html', then you'll need to rename the gallery's 'index.html' file first (otherwise your own 'index.html' file will be overwritten). You can rename the gallery's 'index.html' file to whatever you like. (There are no references to it from any other gallery files.)
If you use the baseUrl method of embedding, then you'll be uploading the entire gallery folder (not just the contents) to your web server and the gallery's 'index.html' file will not clash with any other files named 'index.html' on your web server, although you could still rename the gallery's 'index.html' file if you like (or delete it if you don't need it).

If you uploaded the entire gallery folder to your root directory, then I should be able to view your gallery's 'config.xml' file here:
However, going directly to that location in a browser results in an error 404.
Please double-check that your gallery folder is named 'karine_photo1' and that it has been uploaded correctly to your root directory.

If the gallery folder is present in the correct location on your web server, then the embedding code you posted should work fine.
However, when viewing the source code of your 'photos1.htm' page, there seems to be no Juicebox embedding code on the page at all (which is probably the root cause for the gallery not displaying).
Please double-check that the embedding code has been inserted correctly into your web page.

Essentially, your embedding code looks fine (as long as your 'karine_photo1' gallery folder is in the same directory as your 'photos1.htm' page).
Just make sure that your entire 'karine_photo1' gallery folder has been uploaded to your root directory and that the embedding code has been inserted into your 'photos1.htm' page.

If you continue to experience difficulties, then try this as a starting step.
Just upload the complete gallery folder (exactly as created by JuiceboxBuilder without renaming, moving or modifying any files) to your web server and open the gallery's 'index.html' page in your browser. You should see the gallery on a page of its own. (Please post the URL to your gallery's 'index.html' page so that I can be sure of the gallery's location on your web server.) This is the first step in embedding your gallery. After the gallery has successfully been uploaded to your web server, then the next step is to insert the embedding code into your web page.

Please let me know how you get on and if you need any further assistance.

Re: First time user - can't seem to make it work and need help

Apologies, I forgot I ended up renaming the folder and html file, so here is the url of the gallery (not embedded in the page) … lery1.html

It actually works fine as a gallery on a page of its own, so that's a good starting point. Now I have to figure out why the code did not embed in XARA. I am new to XARA and still figuring it's quirks out. I'm gonna try to add the code manually:

here is the result: I now can see the gallery :) but it's not at all where I want it.
Are you able to view the page's code and let me know exactly where I should insert your code in it so that it is inserted between the top and bottom black rectangles? Maybe paste the entire page code (after you insert the code in proper place) here so I can copy/paste it into my .html file and test it. THANK YOU!

Re: First time user - can't seem to make it work and need help

I have two more questions, in the event embedding fails and I end up just linking to the gallery html file without embedding it in my page. In this example, clicking on teh PHOTOS link on home page's navigation bar would take you directly to the … lery1.html url and display the gallery:

1. once people are done shuffling through all the photos, how do they return to my home page: will clicking on the BACK browser take them to it directly or will they have to shuffle through all the photos in reverse first.

2. How do i save the current album I just created in Juicebox? I clicked on GALLERY at the top then SAVE but it didn't ask me to name the file or where I wanted to save it on my hard drive. (???) So where does Juicebox save the file, under what name and what is the file extension. Looks to me like the html file (karine_gallery1) stored inside the karine_gallery1 folder on my hard drive is the file that Juicebox creates/saves and later re-opens if I want to reopen that same gallery in Juicebox to work on it some more. Am i correct?

Re: First time user - can't seem to make it work and need help

Your gallery has successfully been embedded in your web page (otherwise the gallery would not display) so the location of your gallery folder on your web server and the embedding code that you use are both fine.
The only problem remaining is the positining of the embedding code within your web page.
At the moment, your gallery's embedding code (inclusing the Juicebox container <div>) has been placed between the <head> and <body> sections of your web page. (There should be nothing between the closing </head> tag and the opening <body> tag. The <script> tags from the embedding code can be placed in the <head> section (if you like) but the Juicebox container <div> must be in the <body> section somewhere (wherever you want the gallery to appear).
Looking at the code on your web page, it looks like your gallery's embedding code should be placed within the following <div> container, either alongside the <span> tag or replacing it. (I can't be sure that this is the correct place for your gallery on your web page but it is the first place I'd try.) You might need to adjust your gallery's dimensions, too. Try a galleryWidth of 100% (so that the gallery spans the entire width of its parent container (and adjust the galleryHeight as necessary).

<div class="xr_strb " style="top: 0px; left: 0px; width: 100%; min-width: 760px; position: absolute;">
 <span class="xr_ar" style=" left: 0px; width: 100%; height: 393px; top: 85px; position: absolute; background:url('index_htm_files/312@2x.jpg') center center no-repeat; background-size: cover;"></span>

1. once people are done shuffling through all the photos, how do they return to my home page: will clicking on the BACK browser take them to it directly or will they have to shuffle through all the photos in reverse first.

Juicebox-Pro features a Back Button which you can use to link durectly to any web page you link.
Check out the Back Button (the 'home' icon at the top-left) in this demo gallery.
For reference, a list of all Back Button configuration options can be found here.
(Please note that the Back Button is a Pro only option which is not supported by Juicebox-Lite, the free version.)

2. How do i save the current album I just created in Juicebox?

The 'Gallery -> Save' option from the drop down menu at the top will be available (i.e. not greyed-out) only if the gallery currently being developed already exists (i.e. has either already been saved on the 'Publish' tab or has been opened for editing). When clicking 'Gallery -> Save', the existing gallery will be overwritten with new files: an updated 'config.xml' file, a new HTML file (named after the existing HTML file) and revised image and thumbnail folders.
If you are creating a fresh gallery from scratch (and have not yet saved the gallery), then you'll notice that the 'Gallery -> Save' option will be greyed out and you'll need to save the gallery first on the 'Publish' tab.
I recommend that you save each gallery to a new empty folder of its own so that they are all separate from each other and there is no confusion over the location of individual galleries.
If each gallery is self-contained in a folder of its own, then there is no chance that 'index.html' files will overwrite each other (they will all be in different folders) so there is no need to rename (or move or otherwise modify) any gallery files.
Just give each gallery folder a unique name.
When opening an existing gallery in JuiceboxBuilder, the gallery's configuration file must be named 'config.xml' and must be in the root of hte gallery folder. If the 'config.xml; file has been renamed or moved, then the gallery will not be able to be opened by JuiceboxBuilder.

I hope these notes help to clarify things.