1 Topic by Sjanssen (edited by Sjanssen 2014-09-05 21:16:13)

  • Registered: 2014-09-05
  • Posts: 8

Topic: Cant make a gallery on my muse website [SOLVED]

Hi
Im using Juicebox Pro and Im trying to make Juicebox gallerys on my website using Muse, i follow all the steps shown here:
http://www.muse-themes.com/blogs/news/6 … adobe-muse
Only my gallery doesnt show op on my website
This is the code i used:
<!--START JUICEBOX EMBED-->
<script src="'http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
baseUrl : 'http://steinjanssen.nl/gallery/',
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1></h1>
<p></p>
<p><img src="images/_DSC0730.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0740.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0774.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0109.jpg" title="Mercy Seat samen met Carolien van Heijst  fotografe Fonsine Janssen" alt="" /><br>Mercy Seat samen met Carolien van Heijst  fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0205.jpg" title="Mercy Seat fotografe Fonsine Janssen" alt="" /><br>Mercy Seat fotografe Fonsine Janssen </p>
<p><img src="images/De Minnaar still 1 30-3-14.jpg" title="De Minnaar  samen met Roos Dros fotografe Fonsine Janssen" alt="" /><br>De Minnaar  samen met Roos Dros fotografe Fonsine Janssen </p>
<p><img src="images/DSC_0125-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/DSC_0154-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/DSC_0246-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/stein.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->

Here is a screenshot to my root folder opend in filezilla: https://plus.google.com/102393133426621 … 73pEdz5urx
But my Gallery doesnt show up, what m i doing wrong?

  • Registered: 2014-09-05
  • Posts: 8

Re: Cant make a gallery on my muse website [SOLVED]

also this http://www.steinjanssen.nl/gallerij.html is the page i want the gallery to be on

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

Re: Cant make a gallery on my muse website [SOLVED]

On your web page, you currently use the following embedding code:

<script src="http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
baseUrl : 'http://steinjanssen.nl/Gallerij.html/',
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>

There are two problems with this.

(1) The 'juicebox.js' file is not located at the location specified in your <script> tag: http://steinjanssen.nl/gallery/jbcore/juicebox.js

(2) The baseUrl should point towards your gallery folder and there is no folder in your root directory named 'Gallerij.html'.

From your screenshot, it looks like some (but not all) of your gallery folder's contents have been uploaded to your root directory. If using the baseUrl method of embedding, you should upload the entire gallery folder (not just the contents) to your web server.

Try the following.
If your gallery folder is named 'gallery', then upload the entire gallery folder to your root directory (to your 'public_html' directory) and use the following embedding code in your web page:

<script src="'http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "http://steinjanssen.nl/gallery/",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
  • Registered: 2014-09-05
  • Posts: 8

Re: Cant make a gallery on my muse website [SOLVED]

Hi Steven
thx for your reply i did as you said
My html code i now:
<script src="'http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "http://steinjanssen.nl/gallery/",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1></h1>
<p></p>
<p><img src="images/_DSC0730.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0740.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0774.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0109.jpg" title="Mercy Seat samen met Carolien van Heijst  fotografe Fonsine Janssen" alt="" /><br>Mercy Seat samen met Carolien van Heijst  fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0205.jpg" title="Mercy Seat fotografe Fonsine Janssen" alt="" /><br>Mercy Seat fotografe Fonsine Janssen </p>
<p><img src="images/De Minnaar still 1 30-3-14.jpg" title="De Minnaar  samen met Roos Dros fotografe Fonsine Janssen" alt="" /><br>De Minnaar  samen met Roos Dros fotografe Fonsine Janssen </p>
<p><img src="images/DSC_0125-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/DSC_0154-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/DSC_0246-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/stein.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->

And here you can see i switched teh folder to public_html: https://plus.google.com/102401287433638 … RAZ7q47zgt
i edited the Gallerij.html and uploaded it but as you can see http://www.steinjanssen.nl/gallerij.html its still not there

  • Registered: 2014-09-05
  • Posts: 8

Re: Cant make a gallery on my muse website [SOLVED]

https://plus.google.com/102401287433638 … kv2y6mzvfh this is what is in the folder

  • Registered: 2014-09-05
  • Posts: 8

Re: Cant make a gallery on my muse website [SOLVED]

https://plus.google.com/102401287433638 … yxPFVV85c1 more details

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

Re: Cant make a gallery on my muse website [SOLVED]

You have a stray ' character at the beginning of your <script> tag's 'src' value which is preventing the 'juicebox.js' file from being loaded.
Change:

<script src="'http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>

.. to:

<script src="http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>

  • Registered: 2014-09-05
  • Posts: 8

Re: Cant make a gallery on my muse website [SOLVED]

Thx! my code is now:
<!--START JUICEBOX EMBED-->
<script src="http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "http://steinjanssen.nl/gallery/",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1></h1>
<p></p>
<p><img src="images/_DSC0730.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0740.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0774.jpg" title="Shoot 7-8-2014 fotografe Fonsine Janssen" alt="" /><br>Shoot 7-8-2014 fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0109.jpg" title="Mercy Seat samen met Carolien van Heijst  fotografe Fonsine Janssen" alt="" /><br>Mercy Seat samen met Carolien van Heijst  fotografe Fonsine Janssen </p>
<p><img src="images/_DSC0205.jpg" title="Mercy Seat fotografe Fonsine Janssen" alt="" /><br>Mercy Seat fotografe Fonsine Janssen </p>
<p><img src="images/De Minnaar still 1 30-3-14.jpg" title="De Minnaar  samen met Roos Dros fotografe Fonsine Janssen" alt="" /><br>De Minnaar  samen met Roos Dros fotografe Fonsine Janssen </p>
<p><img src="images/DSC_0125-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/DSC_0154-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/DSC_0246-2.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
<p><img src="images/stein.jpg" title="Shoot 3-3-2014 fotografe: Fonsine Janssen" alt="" /><br>Shoot 3-3-2014 fotografe: Fonsine Janssen </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->

Now it says: ''config xml file not found''  http://www.steinjanssen.nl/gallerij.html
i have altered nothing in the gallery folder as you can see on the screenshots the files are all there...
What do i do now?

9 Reply by Sjanssen (edited by Sjanssen 2014-09-06 14:49:00)

  • Registered: 2014-09-05
  • Posts: 8

Re: Cant make a gallery on my muse website [SOLVED]

when i open the gallery in Juicebox Pro it shows up perfectly but not on the website or locally

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

Re: Cant make a gallery on my muse website [SOLVED]

Your gallery's embedding code uses absolute paths with the steinjanssen.nl domain but the link you provided uses the www.steinjanssen.nl subdomain.
All gallery files must be on the same domain or subdomain as the HTML page containing the JavaScript embedding code due to the same-origin policy.

Use relative paths within your embedding code and your gallery should display on both steinjanssen.nl and www.steinjanssen.nl.

<script src="/gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "/gallery/",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>

The leading slash in the paths above denotes your root directory.

It looks like there may also be a problem with the sizing of the gallery on your web page.
Please check the CSS code used to define the dimensions of the gallery's parent containers on your web page.
Alternatively, you might like to try setting your gallery's own dimensions as fixed pixel values (rather than percentages).
For example:

<script src="/gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "/gallery/",
        galleryWidth: "800",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
  • Registered: 2014-09-05
  • Posts: 8

Re: Cant make a gallery on my muse website [SOLVED]

Steven you are amazing, thank you so much!!!!
It worked as you said i added www to the code line and now i can see my gallery :)
you can now close the topic

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

Re: Cant make a gallery on my muse website [SOLVED]

It worked as you said i added www to the code line and now i can see my gallery :)

I'm glad you've got it working but adding 'www' to the paths in your embedding code will mean that the gallery will now display only on www.steinjanssen.nl and not steinjanssen.nl.
Use the code from my post above (using paths with a leading slash) and your gallery will display on both www.steinjanssen.nl and steinjanssen.nl.