Topic: Juicebox newbie 'basics' embed questions. [SOLVED]

Hi All,
Just purchased Juicebox Pro. Trying to figure it all out.
Let me start by saying, I am NOT a code-guy. I have created my own website, by using combo of Photoshop CS6, Webbsy, and  Dreamweaver CS6, and am now trying to get my galleries online too. In the past I used Sitegrinder to create the code from PSCS6, and it would designate a 'media-box container' for the gallery to drop into. I had used SimpleViewer before, but am trying to eliminate Flash from site.
So I have created a new gallery background page in PSCS6 and converted it to code using Webbsy. I am now trying to get my test version of a gallery (with a clear BG) to lay on top of that page, centered in the main viewing box. Using DWCS6 I have tried the "embed this code" as per the Jukebox instructions, into the HTML page 'body;' section. But the gallery ends up at the top of the page, pushing the entire previously created html page below it. So they are stacked vertical. Any thoughts as to what I'm missing here?
Again, I am not a code-guy, so I apologize now for any future headache I create here going forward. :-)

One more thing, the Juicebox 'Embed' support page states to "Embed the Entire Contents of the Jukebox Gallery folder into your HTML page". Well you can't include the Juicebox created "index.html" file due to the existing "index.html" file that's already a part of your page, correct? Are you supposed to combine them or something?

Thanks in Advance.
- Sol

Re: Juicebox newbie 'basics' embed questions. [SOLVED]

A Juicebox gallery is essentially just a <div> container, and it will appear on your web page at the dimensions you give (via the galleryWidth and galleryHeight options in the embedding code) and wherever you put the <div id="juicebox-container"></div> in your web page's code.

It sounds like you might be trying to embed a gallery into a page with a complex layout and the gallery dimensions you are currently using might not be suitable for your page layout.
If you are not already doing so, try using a galleryWidth of 100% (so that the gallery fills its parent container's width) and a fixed galleryHeight such as 600px. (When using a percentage height, you would need to make sure that the gallery's parent container has a height set via CSS, otherwise Juicebox may not be able to determine what its actual height should be a percentage of.)

If this does not help, then please post back with the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further. (It sounds like you may need to either move your <div id="juicebox-container"></div> container to a different location in your web page or change your gallery's dimensions.)

Well you can't include the Juicebox created "index.html" file due to the existing "index.html" file that's already a part of your page, correct?

If you already have a file named 'index.html', then you'll need to take care not to overwrite it with the gallery's own 'index.html' file.
There are 3 options:
(1) Rename the gallery's 'index.html' file before you upload it to your web server (to ensure there are no duplicate filename collisions).
(2) Delete the gallery's 'index.html' file. This file is required only if you want to display the gallery on a web page of its own. If you are embedding your gallery into an existing web page alongside other content, then the gallery's own 'index.html' file is redundant and can safely be deleted.
(3) Use the baseUrl method of embedding documented here. This allows you to upload the entire gallery folder (not just the contents) to your web server so there will be no chance that the gallery's 'index.html' file will overwrite any similarly named files that already exist on your server.

Re: Juicebox newbie 'basics' embed questions. [SOLVED]

Hey Steven, Thanks for getting back to me on this.
Unfortunately, as I said before, I'm mot a 'code-guy'. I depend on Dreamweaver's 'Design View' and Webbsy, to get me to my end games here. So your <div> talk went somewhat over my head. Using DW design view, clicking on stuff and seeing what gets highlighted in the DW 'Code View' allows me to figure stuff out. Now I have had a 20-page site up for years using this approach, so I do usually get there. :-)
All that being said, I messed around with it further after I submitted my OP yesterday (I was unavailable last night), and I did get it into a better position in the page. So I'm close, I think. If you can look at it I would appreciate. Hopefully you can see a simple adjustment to what I'm doing. :-)
Here' the link to the page on my site:
http://solarviewstudios.com/ss_main/sen … index.html

Re: Juicebox newbie 'basics' embed questions. [SOLVED]

Thank you for posting the URL to your gallery's web page.
It's always easier to troubleshoot a problem when I can see the gallery for myself.

A <div> is just a generic container for content on a web page. (Please see here for more technical details if you like.)
A <div> can be thought of as being just a rectangular block of content on a web page (the content might be text, an image or, in your case, a Juicebox gallery). The gallery container (a <div>) is really just a rectangle on your web page which just needs to be sized and positioned correctly. (It might help to think of the gallery like this instead of the complex image viewer that it is.)

It looks like you're making progress.
However, your gallery's <div> is nested inside another <div> (<div id="body">) which has been assigned CSS in your 'style.css' file as follows:

#body {
  float: left;
  position: relative;
  width: 279px;
  margin-top: 216px;
  margin-left: -588px;
  z-index: 21;
  min-height: 872px;
}

It's difficult to explain what's going on without referring to the code that is making it all happen but, essentially, the container that the gallery's container is inside has been given a very small width (279px) and all content within this parent container has been told to start very close to the centre of what looks like the 'body content' area of your page (which is why there is currently a lot of blank space to the left of your gallery).

There's a lot of CSS in your 'style.css' file and it might be difficult to try to figure out exactly why each container on your web page has been given the widths and margins that they have (especially as the page layout has been created by a program rather than a human being).
It might be enough to just shift your gallery over to the left (by about 250px) using a negative margin.
Your page already makes extensive use of margins (there are 61 different 'margin' entries in your 'style.css' file which is why trying to figure out where everything should be just by looking at the code is not easy) so adding another margin for the gallery's <div> might be a suitable solution.

In your gallery's embedding code, try changing the line:

<div id="juicebox-container">

... to:

<div id="juicebox-container" style="margin-left: -250px;">

The alternative would be to adjust the #body <div>'s CSS to accommodate the gallery and this would require knowledge of CSS and a better understanding of the layout of your web page (or, at the very least, some trial and error).

Even if you don't follow everything in this post, just try making the change to the <div id="juicebox-container"> line and hopefully your gallery will appear in the correct position on your web page.

I hope this helps.

Re: Juicebox newbie 'basics' embed questions. [SOLVED]

Hey Steven,
Thanks for the link. I'll check that out see if it makes sense to me at all. :-)
I have included here for you the zip file for that page. So you can see it all there.
I get that the 'container' is exactly that, as in it holds the gallery elements to a contained space on the page. And I played around with the location within DWCS6 and have it where I want it in relation to the vertical space. It's now the horizontal that's kicking my a**. The problem is likely in my lack of actually knowing what the coding does. In that Webbsy created this code layout based on my set up in photoshop with various 'hints' (as they call them), on the layers. But now that it's within Dreamweaver, I don't have the technical prowess to tell the gallery to move to the left and center on the page as it should. I assumed it was maybe a setting in Jukebox such as gallery padding or something like that. But I only see image and thumbs padding adjustments, not for the whole gallery container. Again, I know this is simply my ignorance to the process, sorry. :-)
...So any suggestions/corrections would be appreciated.

My email is sol@solarviewstudios.com if you want to contact me directly.

Thanks, again.
- Sol

Re: Juicebox newbie 'basics' embed questions. [SOLVED]

I assumed it was maybe a setting in Jukebox such as gallery padding or something like that.

The gallery cannot be positioned on your web page using controls within the gallery itself. The position of the gallery is dependent on where you place the gallery's container within your page's code (in relation to all other containers on your page) and what CSS positioning rules have been applied to the elements on your page.

It's now the horizontal...

The suggestion in my post above should solve this problem.
When you originally entered your gallery's embedding code into your web page, you entered the line:

<div id="juicebox-container">

Change this manually to:

<div id="juicebox-container" style="margin-left: -250px;">

... and your gallery should shift over to the left (by 250px) to where you want it to be.

Alternatively, add the following to the foot of your 'style.css' file (it will do the same thing: shift your gallery over to the left by 250px).

#juicebox-container {
    margin-left: -250px;
}

Re: Juicebox newbie 'basics' embed questions. [SOLVED]

Hey Steven.
Thanks for the feedback.
I did your suggestion and with a little tweaking that worked. But I was concerned how it wold play over multiple devices. I contacted my support guy for the Webbsy software and help me sort it out on that end. He looked at the code and saw what you did with the couple of weird margins that were going on, so we re-did a few items on the page to make everything play together a little more neatly. Essentially just created a new place-holder on the front end, and then , in the DWCS6, I replaced that element's code line with the Jukebox 'Embed Code'. Worked perfectly.
Thanks for all your efforts and help. Much appreciated. A+ Support!  :-)
- Sol

Re: Juicebox newbie 'basics' embed questions. [SOLVED]

You're welcome!
I'm really glad to hear that you've got it working.
Many thanks for posting back with the update to let me know. It's most appreciated.