Topic: Juicebox doesn't show up [SOLVED]

Hey guys,

So I made my gallery with the juiceboxbuilder-pro. I placed the embed code on my page but it doesn't exactly show what it should. Instead of seeing the gallery I get the whole embed code on my page.

What am i doing wrong?

Thanks!

Re: Juicebox doesn't show up [SOLVED]

Whatever software package you use to create your web page, make sure that you enter the embedding code as raw HTML code and not as plain text.
For example, if using Dreamweaver, please check your input mode. You should enter the embedding code in 'View -> Code' mode rather than 'View -> Design' mode.

Re: Juicebox doesn't show up [SOLVED]

Thanks Steven for the reply.

I'm using wordpress with the avada theme. However, when I put it in as the raw HTML code it doesn't show anything.
Is there something wrong with the HTML code? I don't get it what i am doing wrong.


<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "900",
galleryHeight: "750",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>Shop</h1>
<p></p>
<p><img src="images/DSC_0513-bewerkt.jpg" title="The misty mountains" alt="" /><br>The misty mountains </p>
<p><img src="images/DSC_1490-bewerkt.jpg" title="Canvas" alt="" /><br>Canvas </p>
<p><img src="images/DSC_1965-bewerkt.jpg" title="Winter's beaty" alt="" /><br>Winter's beaty </p>
<p><img src="images/DSC_2157-bewerkt.jpg" title="Blue magic" alt="" /><br>Blue magic </p>
<p><img src="images/DSC_0620-3.jpg" title="The wild" alt="" /><br>The wild </p>
<p><img src="images/DSC_4652-bewerkt-bewerkt-bewerkt-bewerkt-bewerkt-bewerkt.jpg" title="Butterfly" alt="" /><br>Butterfly </p>
<p><img src="images/DSC_4090-bewerkt-22.jpg" title="Follow the sun" alt="" /><br>Follow the sun </p>
<p><img src="images/DSC_6344-bewerkt-bewerkt-bewerkt.jpg" title="The road less traveled" alt="test tes test" /><br>The road less traveled test tes test</p>
<p><img src="images/DSC_0051.jpg" title="The shadow of the moon" alt="" /><br>The shadow of the moon </p>
<p><img src="images/DSC_0206.jpg" title="Mystery" alt="test test test" /><br>Mystery test test test</p>
<p><img src="images/DSC_0039.jpg" title="Facing the ocean" alt="" /><br>Facing the ocean </p>
<p><img src="images/DSC_1064-bewerkt-2.jpg" title="The silence of the mountains" alt="" /><br>The silence of the mountains </p>
<p><img src="images/DSC_2365.jpg" title="Frozen" alt="" /><br>Frozen </p>
<p><img src="images/DSC_0191.jpg" title="The untold story" alt="" /><br>The untold story </p>
<p><img src="images/DSC_0727-bewerkt-2.jpg" title="Fading" alt="" /><br>Fading </p>
<p><img src="images/DSC_0075.jpg" title="Ruling the sky" alt="" /><br>Ruling the sky </p>
<p><img src="images/DSC_4046-bewerkt-2.jpg" title="The shouting tree" alt="" /><br>The shouting tree </p>
<p><img src="images/DSC_1121-bewerkt.jpg" title="The forest fairy" alt="" /><br>The forest fairy </p>
<p><img src="images/DSC_1462-bewerkt.jpg" title="Ghost town" alt="" /><br>Ghost town </p>
<p><img src="images/DSC_0211.jpg" title="Mirror" alt="" /><br>Mirror </p>
<p><img src="images/DSC_1978-bewerkt.jpg" title="Calm strenght" alt="" /><br>Calm strenght </p>
<p><img src="images/DSC_4172-bewerkt-bewerkt-2-bewerkt-bewerkt.jpg" title="Calm before the storm" alt="" /><br>Calm before the storm </p>
<p><img src="images/DSC_6790-bewerkt-bewerkt-bewerkt.jpg" title="Adventure" alt="" /><br>Adventure </p>
<p><img src="images/DSC_0202-bewerkt-bewerkt-bewerkt-2.jpg" title="Driving down to heaven" alt="" /><br>Driving down to heaven </p>
<p><img src="images/DSC_0580-bewerkt-bewerkt-2.jpg" title="Into the mountains" alt="" /><br>Into the mountains </p>
<p><img src="images/DSC_1240-bewerkt-2.jpg" title="Art under the falling sun" alt="" /><br>Art under the falling sun </p>
<p><img src="images/DSC_0152.jpg" title="Dawn of the world" alt="" /><br>Dawn of the world </p>
<p><img src="images/DSC_0084.jpg" title="The last light" alt="" /><br>The last light </p>
<p><img src="images/DSC_6377-bewerkt-bewerkt-bewerkt.jpg" title="The white lines of healing" alt="" /><br>The white lines of healing </p>
<p><img src="images/Goed.jpg" title="The world behind the window" alt="" /><br>The world behind the window </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->

Re: Juicebox doesn't show up [SOLVED]

I currently have it working through the wp plugin. Can't say it was that easy though..
Would still like an answer on how to make it work through the embed code.
Now I ran into another problem. It looks quiet fine on my 1280x800 screen. But when I go to my other computer 1920x1080 and go to the gallery it is only showing up half of the images.. 

Something that I should change in the configuration options? or something I should change on flickr?

Thanks.

Re: Juicebox doesn't show up [SOLVED]

Another problem i ran into; the shopping car is gone on the mobile version.

Re: Juicebox doesn't show up [SOLVED]

If you enter embedding code directly into the body of a WordPress page or post, make sure that the method of entry is 'Text' (which respects HTML code) and not 'Visual' (otherwise you will just see the code that you enter on the screen instead of the gallery).

Also, if you use the embedding code you posted above, you would need to upload the contents of your gallery folder to the same directory as the HTML page which contains the embedding code. This might be difficult to determine in a WordPress environment and I would recommend using the baseUrl method as described here.

Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress post (ensuring that the method of entry is 'Text' rather than 'Visual'). 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, pointing towards the gallery folder) are correct.

Another problem i ran into; the shopping car is gone on the mobile version.

Shopping Cart functionality is disabled in Small Screen Mode as most mobile device screens are not large enough to accommodate the size of the Fotomoto pop-up window. This is noted in the 'Additional notes' section of the Shopping Cart support page.

Re: Juicebox doesn't show up [SOLVED]

Cool thanks Steven!