Topic: I'm missing something here

I used SiteSpinner Pro to create a couple websites. Now I'd like to add galleries. I can create a gallery with Juicebox Builder and it previews well, but I must be missing something in the "publish" step. I assume I need to do more than embed the script that copied to the clipboard. Will the accompanying folders (images, etc) be gathered and uploaded when I publish my page, or do I need to do that manually? (I realize this may be a SiteSpinner question, but it's always gathered all necessary components on my projects.)

I've read and re-read the basic info, but can't figure it it. I know next to nothing about html, so I hope there's an explanation "in English".

thanks

Re: I'm missing something here

If you follow the regular Embedding in a HTML Page instructions, you'll need to:

2. Copy the entire contents of your Juicebox gallery folder into the folder that contains your HTML page.

This means that you need to upload the gallery files to your web server, usually using a dedicated FTP program such as Filezilla.
Please check with SiteSpinner to make sure that they allow FTP access to the web space that they provide to you and, if so, to get the credentials that you'll need to log in via FTP (host, username, password).

If SiteSpinner does not allow FTP access on your hosting account, then you'll need to find an alternative host for your Juicebox gallery and you can then follow the Embedding in a Web Template Site instructions.

There are many web hosts that offer free web space which would be suitable for hosting Juicebox galleries. (Juicebox galleries do not require any special web server requirements, with the exception of Password Protection and the Download Button which require PHP 5.2.0 or later. Please see the System Requirements support section for details.)
Try a web search with terms such as 'free web hosting' but please bear in mind that with a free hosting account, you may get little or no support, less reliability (more server down-time) and fewer features.
A few free web hosts that you might like to take a look at are 000webhost, hostinger and x10hosting.
Please note that we are not affiliated with any of these web hosts at all. They are merely suggestions (and not recommendations).

I hope these notes help to clarify things.
Please let me know if you have any further queries and I'll do my best to answer them for you.

Re: I'm missing something here

Thanks. I thought that might be the step I missed, but I had been unable to find the Juicebox gallery folder. I have since found it. I don't use Sitespinner to host, only to build; I have a GoDaddy account, and Sitespinner is configured to upload accordingly.

Since only the script for the Juicebox gallery will be on a Sitespinner page, I assume the content will need to be uploaded directly. I think I've done this in the past, but will have to rediscover how to do it. Thanks again.

Re: I'm missing something here

... I had been unable to find the Juicebox gallery folder. I have since found it.

When you create a gallery with JuiceboxBuilder-Lite, you can choose exactly where to save the gallery on the 'Publish' tab.
You can save a gallery to anywhere you like but I usually recommend a new empty folder on the desktop. Saving the gallery to a folder on the desktop is just convenient to quickly find it (at least for myself) and saving the gallery to a new empty folder of its own means that you can be sure that the only files inside the folder are the gallery files themselves.

I have a GoDaddy account...
I think I've done this in the past, but will have to rediscover how to do it.

If you have trouble uploading your gallery files to your web space, your web host (GoDaddy) should be able to help you further.
Here's the GoDaddy help page regarding "FTP: Upload my files to cPanel hosting" which might help.

Re: I'm missing something here

Thanks for your help. I've upgraded to JB-Pro, in part due to your prompt assistance as I learn the program.

I have moved hosting to GoDaddy, and I (think) I have updated the DNS info. I end up on the Plesk page, however, not the CPanel -- does that make a difference how I upload gallery components.

In my file manager, I find folders for named "App_Data", "geometry" and "image". There are files for the pages I've created, but not folders. I'm not sure where to put the JB folder because your info said "copy entire contecnts of the JB gallery folder into the folder that contains my HTML page.

I've attached a screen grab that shows the files SiteSpinner created for the three website I have. DaveBreen.com may not be available yet, so maybe you can't answer my question until it is. Thanks

Post's attachments

GoDaddy FTP.doc 74 kb, 1 downloads since 2018-05-03 

You don't have the permssions to download the attachments of this post.

Re: I'm missing something here

You are unlikely to be able to upload an entire Juicebox gallery (retaining its folder structure) using a browser-based file manager. (Online file managers usually allow you to upload only individual files, not folders.)
You'll need FTP access to the web space that GoDaddy provides to you and you can then use a dedicated FTP program (such as Filezilla) to upload your Juicebox gallery to your web space with a single drag and drop action.

The CPanel instructions are for Linux Hosting but you mentioned Plesk so it sounds like you have Windows Hosting.
Here is GoDaddy's "FTP: Upload my files to Plesk hosting" support page (the second part of the document you attached to your last post). (They recommend Filezilla, too.)

I hope this points you in the right direction.
If you run into any problems with FTP on your hosting account, then your web host (GoDaddy) should be able to help you out.

Re: I'm missing something here

I understand the "how to" upload (I think). I'm trying to confirm the "where to" upload. I don't seem to have folders for separate pages (as JB instructions indicate), so where do I put them -- App Data, Geometry and/or Images? (I seem not to have a CSS folder for davebreen.com as I do for Atlas and SCCB.)

Again, I'm barely sure what I'm doing. Thanks

Re: I'm missing something here

If you are following the regular embedding instructions (here), then you would normally upload the contents of the gallery folder to the same directory as the web page that you want to embed the gallery into.
However, if all your web pages are in a single folder (such as your root directory), then you would likely run into difficulties if you tried to upload the files for multiple galleries to the same folder (you'd end up with conflicting filenames and subfolders containing files for multiple galleries).

I'd recommend using the baseUrl method of embedding documented here.
It allows you to keep each gallery self-contained in its own folder and you would upload the complete gallery folders (not just the contents) to your web server.
The baseUrl embedding code is essentially the same as the regular embedding code but with a baseUrl entry pointing towards the gallery folder.
It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.
I'd recommend that you upload your gallery folders to your root directory (usually labelled something like 'public_html' or 'htdocs') just for convenience. As long as each gallery folder has a unique name, there will be no trouble with conflicting filenames.

Here's an example of what you could do.

(1) Create a gallery with JuiceboxBuilder-Lite and save it to a new empty folder (in this example, named "my_gallery_folder").
(2) Upload the entire gallery folder to your root directory (usually labelled something like 'public_html' or 'htdocs') with your FTP program (e.g. Filezilla). (If you do not know what your root directory is labelled as, then your web host should be able to let you know.)
(3) You should now be able to view the gallery on its own web page by visiting http://www.example.com/my_gallery_folder/index.html (replacing www.example.com with your own domain name).
(4) Use the following embedding code to embed the gallery into an existing web page alongside other content.

<!--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 so, as long as your gallery folder has been uploaded to your root directory, the embedding code above will work in any web page throughout your website (no matter where it is) without modification.

I hope this helps.

9 (edited by dbphoto 2018-05-08 14:57:07)

Re: I'm missing something here

Sorry to (continue to) be such a pest. Even with the baseUrl approach you suggested, I'm not sure what to put where. I'm trying to resolve this through the SiteSpinner forum, too. I understand I'm to replace some of the script in the example with my file/folder names, but I'm not clear on that, either.

I've added a screenshot of the FileZilla page so you can see what I have to upload and the possible destinations. I don't know if I can/should create folders for pages, or if that would create other problems.Thanks

Post's attachments

FileZilla5718.jpg 418.96 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: I'm missing something here

It looks like you've not attached a screenshot to your post so I'm not able to take a look at your Filezilla window.

At its most basic, all you need to do to have a gallery live on your web server is upload the entire gallery folder to your web server (anywhere will do as long as you know where it is).
You can then view the gallery (on its own web page) by visiting the gallery's 'index.html' file (inside the gallery folder) in your browser.

I'd recommend uploading the gallery to the root directory of your web space for convenience.
The root directory is the directory that you'd upload a file (or folder) to so that it is the first thing in the URL after your domain name.
For example, if you uploaded a file named 'test.html' to your root directory and your domain name is www.example.com, then you would be able to view the 'test.html' file using this URL: http://www.example.com/test.html.
The root directory is usually named something like 'public_html', 'htdocs' or 'www' but if you are unsure what your own root directory is named (or how to navigate to it using an FTP program), then your web host should be able to help you out.

Once you've got the gallery uploaded to your web server, you can then embed the gallery into an existing web page alongside other content (if you want to), by copying and pasting the embedding code I posted above into your web page wherever you want the gallery to appear. (The embedding code assumes that your gallery folder is named "my_gallery_folder" and has been uploaded to your root directory. As long as this is true, then the embedding code can be used exactly as it is without modification.)

I hope this makes sense.
If you continue to experience difficulties, then please let me know how far into the process you get and what seems to be the stumbling block.
Also, please post the screenshot you mentioned so that I can see what you are referring to. It might help me to troubleshoot your problem. Thank you.

Re: I'm missing something here

Thanks. I've added the ftp info to my previous post.

Re: I'm missing something here

Many thanks for providing your Filezilla screenshot.

Your root directory is named 'davebreen.com' and you have successfully uploaded your gallery folder (named 'Kayden') to your root directory.

You can now view your gallery (on its own web page) by visiting [Link removed.].
(I'll delete this link once you've had a chance to check it out.)

If you want to embed the gallery into an existing web page alongside other content, then all you have to do is add the following embedding code into the web page wherever you want the gallery to appear (and you can leave all your gallery files exactly where they are).

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

There should be no need to modify this embedding code at all (no matter where on your web server the embedding page is) but you can change the gallery dimensions and background color if you like.

If you are using a web design package to add the embedding code to a web page, then make sure that you add the embedding code (above) as HTML code and not plain text.

13 (edited by dbphoto 2018-05-08 18:29:35)

Re: I'm missing something here

THANK YOU. I'm making headway, thanks to you folks and LarryD. I'm going into various galleries to tweak settings because there's some variation how images are displaying. If I can't figure out why, I may be back in touch.

You may delete the link now.

Re: I'm missing something here

I'm glad you're making progress. Thank you for letting me know.
I hope you get on OK but if you get stuck with anything, just let me know and I'll do my best to help you out.

Re: I'm missing something here

Thanks. It dawned on me that you would not understand my reference to "LarryD". He's active in the SiteSpinner forums (the program I've used to create the websites). Between your info and his, I'm beginning to get galleries up.

I have noticed an inconsistency, however. I'm getting a dark area below images in my davebreen.com/scenics gallery, but not in a "hidden gallery" (davebreen.com/page5). I'm still playing with background colors, so I'm not concerned about those differences, but I'd prefer galleries up to the expanded, if possible. If not, I can live with them.

Thanks again.

Re: I'm missing something here

Another question. Is the info for various configuration options included in the embed code? I assume it has to be, but when I make slight changes, the embed code stays the same. I think this may be why the browser preview doesn't match the website.

Re: I'm missing something here

OK, I've found the config document that goes to the webhost. Is it updated if I reopen a gallery in Builder? I would need to send the new one to the host, correct?

Re: I'm missing something here

Well, now I've lost the gallery of scenics. It's still on the list in the FTP program, so I must have changed a name in the baseURL settings.

Re: I'm missing something here

I have noticed an inconsistency, however. I'm getting a dark area below images in my davebreen.com/scenics gallery, but not in a "hidden gallery" (davebreen.com/page5).

This is possibly due to setting captionPosition="BELOW_IMAGE" in your 'scenics' gallery.

When captionPosition is set to OVERLAY or OVERLAY_IMAGE, the height of the caption area is variable (it will increase, if necessary, to accommodate long captions) up to a maximum value set via maxCaptionHeight (default value, 120px).

However, when captionPosition is set to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, the height of the caption area is fixed at the maxCaptionHeight value so, unless you change the value of maxCaptionHeight (or the captionPosition), there will always be a reserved area 120px high below your images.

For reference, short descriptions of all the Caption Options and their possible values can be found here.

OK, I've found the config document that goes to the webhost. Is it updated if I reopen a gallery in Builder? I would need to send the new one to the host, correct?

Just to clarify, the gallery's configuration options are stored in the 'config.xml' file.
If you open and edit a gallery with JuiceboxBuilder-Pro, the 'config.xml' file will be updated (with any new image data and modified configuration options) when the gallery is re-saved on the 'Publish' tab.
You will then need to re-upload the new version of the 'config.xml' file to the gallery folder on your web server (along with any new images and thumbnails you have added to your gallery).

Well, now I've lost the gallery of scenics.

When I go to '/scenics/index.html', I get an error 404 (file not found).
It looks like the gallery's 'index.html' file (inside the 'scenics' folder is missing). You'll need it to display the gallery on its own web page.
However, as long as all the other gallery files are present and correct, you can still embed the 'scenics' gallery into another web page by using the following embedding code:

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

20 (edited by dbphoto 2018-05-10 15:38:47)

Re: I'm missing something here

Ugh. I'm remaking some of the galleries, and in two of them I'm getting just a SLICE of an image (the extreme left edge, but it displays extreme right). I don't think I changed any config that would account for this. The preview is correct when I click "save." It is happening in davebreen.com/scenics and /haircut (so far).

also...

Should the "index page name" always be "index/html" (since I'm embedding galleries using baseURL), or should it include the page name I've given the page of my site? I don't find this covered anywhere.

Please advise.

Re: I'm missing something here

It is happening in davebreen.com/scenics and /haircut (so far).

I see the problem you describe in your 'scenics.html' web page.
The problem is caused by the custom CSS on your web page (which seems a little confusing) rather than any gallery configuration options.
Your gallery has a width and height of 100% so it should fill its parent container.
However, the gallery's parent container (<div id="Gcode21" class="dfltc">) does not have any dimensions set via CSS so Juicebox will be unable to determine what the gallery's actual size should be (i.e. 100% of what).
To add to this, the <div id="Gcode21" class="dfltc"> container is nested inside the <div id="Oobj25"> container which has been assigned a width of 50.00em and a height of 30.80em and the <div id="Oobj25"> container is further nested inside the <div id="centered"> container which has been assigned different dimensions (a width of 432px and a height of 100%).

Here are a few tips which might help.

(1) Try to simplify your web page's layout (use only as many containers as you actually need). At the moment, your gallery is nested within 3 separate containers, each with different (or no) dimensions.

(2) If using a percentage height for your gallery, then make sure that all parent containers of the gallery have heights set via CSS (up to and including the body tag). Please also see the note regarding Using Percentage Heights.

(3) Try not to mix em, px and % for container heights. Stick to px and % to see if this helps.

(4) You also have some custom CSS (below) which will be applied to all <img> tags on your web page, including those in your gallery. The gallery will have no option but to inherit such generalized CSS code. Apply your custom CSS rules to only those elements on your web page that require them using CSS id and class selectors (rather than element type selectors).

img {
  border-width: 0;
  vertical-align: top;
}

With all that in mind, I think a quick fix might be to just give your gallery a fixed height of, say, 600px (in the gallery's embedding code), e.g.:

galleryHeight: "600px",

Incidentally, when I try to view your /scenics/ gallery (on its own 'index.html' page), I currently get an error 403 (forbidden) error which suggests that the 'index.html' file might be in place but with permissions that are too restrictive. Default file permissions of 644 should be fine. You should be able to check and change file and folder permissions via your web hosting account's online file manager or FTP program.

Should the "index page name" always be "index/html" (since I'm embedding galleries using baseURL), or should it include the page name I've given the page of my site? I don't find this covered anywhere.

You can name the gallery's HTML page anything you like. As you are using the baseUrl method of embedding, all gallery files will be contained within the gallery folder so there is no chance that files will clash with conflicting filenames so you can safely leave the name for each gallery's HTML page 'index.html' (although you can change this for each gallery if you want). If you plan to embed your galleries in existing web pages and do not want to display the galleries on pages of their own, then the gallery HTML pages are actually redundant and can be deleted from the gallery folders if you like.

Re: I'm missing something here

I'm afraid I don't understand much of what you're explaining, but will experiment with some different settings to see if I can make it work. I'm not aware of changing anything that would affect the sizes, and at one point yesterday, these two galleries worked. thanks

Re: I'm missing something here

Essentially, the problem is with the custom CSS on your embedding page (conflicting with the gallery's own CSS) rather than with the gallery itself.
As I mentioned above, a quick fix might be to just give your gallery a fixed height (of perhaps 600px) instead of a height of 100%.

galleryHeight: "600px",

I hope this helps.

Re: I'm missing something here

Thank you, thank you. I've used 1000px as height and width, and I'm creating galleries with little/no problems now. I appreciate your time and patience.

Re: I'm missing something here

... I'm creating galleries with little/no problems now.

That's really great to hear! Thank you for letting me know.