• Registered: 2013-06-12
  • Posts: 8

Topic: embedding on a website with a side navigation

hi,

i would like to embed 5 juicebox galleries on a new website with a side navigation.
the website is defined with a minimum width of 1024 px, with an area of 180 x 700 px for the navigation.

but when i try to embed the galleries they start underneath those 700 px,
even with trying to use a margin of 180 px.

you can see the test version with test galleries in the first two sections here :

http://www.juicebox.luther-photography.de


i used this :

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
</script><div id="juicebox-container" style="margin: 180px;"></div>
<!--END JUICEBOX EMBED-->


did i "just" embed those incorrectly or do i need jquery for embedding those galleries ?

thanks and regards

martin

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

Re: embedding on a website with a side navigation

Try changing:

<div id="juicebox-container" style="margin: 180px;"></div>

.. to:

<div id="juicebox-container" style="float: right; margin: 180px;"></div>

If you are looking to have a resizable gallery with a side menu, there is an online example here.
You can view the source of the sample web page in your browser and copy/modify it to suit your needs.

  • Registered: 2013-06-12
  • Posts: 8

Re: embedding on a website with a side navigation

Hi Steven,

and thanks for your fast answer, i will test it tomorrow.

Regards Martin

  • Registered: 2013-06-12
  • Posts: 8

Re: embedding on a website with a side navigation

Hi Steven,

and thanks again for your help.
Your code didn't match it exactly, but i think i solved it with this line,
which works fine at the moment :

<div id="juicebox-container" style="position:absolute; top:50px; left:180px;"></div>


One more question, and i know this has probably nothing to do with juicebox...
But when i use a header at the top with a horizontal navigation, the gallery is resizable,
but not when the header is on the left hand side with the vertical navigation.

Is it "just" because of the way the header area is positioned/implemented ?

You can see the differences in the 2 portfolio sections here :

http://www.juicebox.luther-photography.de

Thanks Martin

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

Re: embedding on a website with a side navigation

Your gallery does not resize in Portfolio 2 because your gallery is embedded in two parent divs (.positionca95887172e34b94 and wrapper17986066c0979564), each with fixed widths of 1024px (set via CSS in your 'global_style.css' page).
Even though your gallery was a width of 100%, this means that it will be 100% of its parent container, ie. 100% x 1024px = 1024px. Therefore, the gallery's width will always be 1024px regardless of the size of the user's browser window.

If you want to use a side menu with a resizable gallery, please take a look at the View Resizable Gallery with Side Menu Example in the Resizable Gallery support section.