• seb
  • Member
  • Offline
  • Registered: 2014-10-19
  • Posts: 41

Topic: Multiple galleries on same page [SOLVED]

Hi,

I have checked out your code for enabling 2 or more galleries on the same page.

The problem I have is that I would like each gallery to be different heights. I have tried to change the height using the Juicebox interface. As I am embedding the galleries, the height is not effected this way.

The only way I can change the height of the gallery is by altering the gallery height in the embedded html code in the page.

The problem I have is that with your code for embedding 2 or more galleries on the same page, the height for each gallery must be the same. Do you have code so that I can alter the gallery height for each individual gallery on the same page? Or do I alter the height by using CSS?

I'm not a JavaScript coder, so I don't know where to start to alter our code!

Thanks for any help you can offer.

Seb

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

Re: Multiple galleries on same page [SOLVED]

You can set the height for a gallery in the JuiceboxBuilder-Pro interface (in the 'Customize -> Lite' section).
The chosen height will be included in the embedding code presented on the 'Publish' tab (and in the gallery's 'index.html' page after the gallery has been saved) which you can copy and paste into your own web page.

You can certainly have multiple galleries with different heights embedded into a single web page.

Here's sample code for two galleries (with different heights) being embedded into the same page.
The first gallery on the page has a height of 400px whereas the second gallery on the page has a height of 600px.

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

<script>
    new juicebox({
        baseUrl: 'gallery1/',
        containerId: 'juicebox-container-1',
        galleryHeight: '400px',
        galleryWidth: '100%'
    });
</script>
<div id="juicebox-container-1"></div>

<script>
    new juicebox({
        baseUrl: 'gallery2/',
        containerId: 'juicebox-container-2',
        galleryHeight: '600px',
        galleryWidth: '100%'
    });
</script>
<div id="juicebox-container-2"></div>

I hope this helps.

However, if you continue to experience difficulties, please post the URL to your web page so that I can see the problem for myself and hopefully help further.
Thank you.

  • seb
  • Member
  • Offline
  • Registered: 2014-10-19
  • Posts: 41

Re: Multiple galleries on same page [SOLVED]

Hi Steven,

Thanks for your quick reply. Can't put a page up yet - but here's the code I'm using:

in the header:

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

in the body:

  <div id="juicebox-container"></div>

    <script>

    $(document).ready(function() {
        //load gallery 1
        loadGallery('glass3010/');
        //initialize top buttons
        $("#button-1").on("click", function(){loadGallery('glass3010/');});
        $("#button-2").on("click", function(){loadGallery('glass3010Sets/');});
    });

    function loadGallery(base) {
        new juicebox({
            baseUrl : base,
            containerId : 'juicebox-container',
            backgroundColor : 'fff',
            galleryWidth:'100%',
            galleryHeight:''
        });
    }
    </script>

Further down the body:

 <p><span id="button-1" class="link-button" >Reference</span></p>
 <p><span id="button-2" class="link-button" >Sets</span></p>

Using the Juicebox interface,  I have put a height of 465px in the "glass3010" gallery and a height of 800px in the "glass3010Sets" gallery.

However, the gallery defaults to 800px high on both galleries. I'll try to put a test page up tomorrow, but any ideas in the meantime?

Cheers,

Seb

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

Re: Multiple galleries on same page [SOLVED]

Thank you for posting the code you are using.

As you are switching between galleries rather than displaying both at the same time, you will need to pass the height for each gallery as a parameter to your loadGallery() function.

Try using the following code for your <body> section. It gives your 'glass3010' gallery a height of '400px' and your 'glass3010Sets' gallery a height of '600px'. (You can change the heights as required.)

<div id="juicebox-container"></div>

<script>

    $(document).ready(function() {
        //load gallery 1
        loadGallery('glass3010/', '400px');
        //initialize top buttons
        $("#button-1").on("click", function(){loadGallery('glass3010/', '400px');});
        $("#button-2").on("click", function(){loadGallery('glass3010Sets/', '600px');});
    });

    function loadGallery(base, height) {
        new juicebox({
            baseUrl: base,
            containerId: 'juicebox-container',
            backgroundColor: 'fff',
            galleryWidth: '100%',
            galleryHeight: height
        });
    }

</script>
  • seb
  • Member
  • Offline
  • Registered: 2014-10-19
  • Posts: 41

Re: Multiple galleries on same page [SOLVED]

Thank you very much for the new code. I'll give it a go!

Seb

  • seb
  • Member
  • Offline
  • Registered: 2014-10-19
  • Posts: 41

Re: Multiple galleries on same page [SOLVED]

Works a treat! Thanks again!

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

Re: Multiple galleries on same page [SOLVED]

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