• Registered: 2016-02-29
  • Posts: 3

Topic: Dreamweaver embed problem_mac [SOLVED]

I cant seem to embed my gallery, I copied the script, the folder name is correct, but only shows a completely blank space. Im not sure what I could be doing wrong.
Im using a mac with a trail copy of Dreamweaver CC, which runs out in 6 days. Wondering if Ive put it in the right place, starts after the title ends. Im new to reponsive design.
script looks like this:
                   
                        <!--START JUICEBOX EMBED-->
                        <!DOCTYPE html>
<script src="/People_gallery"></script>
<script>
new juicebox({
containerId: "juicebox-container",
baseUrl : '/People_gallery/index.html'
});
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#f1f1f1"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
                    </div>
I dont have it online yet. thanks

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

Re: Dreamweaver embed problem_mac [SOLVED]

There are a few things wrong with your code.

(1) You will need to load the 'juicebox.js' file into your web page for your gallery to appear (like in the sample embedding code in the Embedding Guide).
Change:

<script src="/People_gallery"></script>

... to:

<script src="/People_gallery/jbcore/juicebox.js"></script>

(2) There should not be a Doctype Declaration within your gallery's embedding code.
Remove:

<!DOCTYPE html>

... and ensure that the embedding code is within the <body> tags in your page.

(3) You have closed off the new juicebox({ section too early.
Remove:

});

... just below the baseUrl entry.

(4) The baseUrl should point towards a gallery folder (not a file inside the folder).

(5) You need a comma after the baseUrl to separate it from the configuration options which follow.
Change:

baseUrl : '/People_gallery/index.html'

... to:

baseUrl : '/People_gallery/',

(5) The code you posted has a stray </div> tag at the end of the code. This can be removed (unless it refers to an opening <div> tag that you did not include in your post).

You should now have embedding code which looks like this:

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

As long as your gallery folder is named 'People_gallery' and is located in your web space's root directory, then it should display fine once the web page is uploaded to your web server.

For reference, the baseUrl method of embedding is documented here.

There is a note for Dreamweaver users here: Embedding Using Dreamweaver.

  • Registered: 2016-02-29
  • Posts: 3

Re: Dreamweaver embed problem_mac [SOLVED]

Thank you so much for your help Steven. I fixed up my sloppy code and even tried in a test page, in case i was putting it in the wrong place, but I stll get the same results..no show for the gallery. Is there suppose to be a separate js file? It didnt see so, but Im pretty new at this,
It looks like this now, its online at http://portraitart.ca/HTML/test.html   I really appreciate your expertise, thanks

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>testPage</title>
</head>
<body
<h1>Test page for gallery</h1>
<!--START JUICEBOX EMBED-->
<script src="/people_gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "/people_gallery/",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#f1f1f1"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>

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

Re: Dreamweaver embed problem_mac [SOLVED]

Your embedding code currently has paths with leading slashes which denote your root directory.
However, your 'people_gallery' folder is not in your root directory. It is in your 'HTML' directory.
The paths need to be relative to the page containing the embedding code (in the 'HTML' directory) or, if using leading slashes, the paths from the root need to be adjusted to take into account the 'HTML' folder.

Either of the following should work fine:

Option #1:

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

Option #2:

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

There is a good reference guide to URLs (absolute vs relative) here.

Incidentally, you have two instances of the <script> tag loading the 'juicebox.js' file.
There should be only one per page. Remove the one between the end </head> tag and the start <body> tag. (There should be no code between these tags at all.)

  • Registered: 2016-02-29
  • Posts: 3

Re: Dreamweaver embed problem_mac [SOLVED]

Thank you!! That was the problem. I had tried that before, but of course it was before the bad code was corrected. Wonderful, the Juicebox gallery looks great. thanks again for all your help.

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

Re: Dreamweaver embed problem_mac [SOLVED]

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