1 Topic by John Nolan (edited by John Nolan 2013-11-16 02:07:17)

  • Registered: 2012-10-10
  • Posts: 43

Topic: Problem with gallery in Spry panel (repost) [SOLVED]

I enquired about this earlier, but the post seems to be gone. Perhaps I failed to submit:

This gallery works:
http://www.ragandbone.ca/Pages/h_i_slide/index.html

but when place in a spry panel on this page, it appears very small:
http://www.ragandbone.ca/Pages/holly_and_ivy_new.html

What am I doing wrong?

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

Re: Problem with gallery in Spry panel (repost) [SOLVED]

The problem is likely to be due to your gallery being loaded on your web page as soon as the page is displayed but the container for the gallery not being visible/displayed until the 'Photo Gallery' tab is selected and so Juicebox (when it is loaded) cannot determine what its size should be.

Try changing your gallery's dimensions from percentages to absolute pixel values to see if this makes a difference.
If it works but you would rather keep percentage dimensions, try loading the gallery on demand (rather than when the page is initially displayed).

Change your embedding code to the following:

<!--START JUICEBOX EMBED-->
<script src="h_i_slide/jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId : "juicebox-container",
            baseUrl : 'h_i_slide/',
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(252,242,204,100)"
        });
    }
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... and change line 237 from:

<li class="TabbedPanelsTab" tabindex="0"><a href="#gallery">Photo gallery</a></li>

... to:

<li class="TabbedPanelsTab" tabindex="0"><a href="#gallery" onclick="javascript: loadGallery(); return true;">Photo gallery</a></li>
  • Registered: 2012-10-10
  • Posts: 43

Re: Problem with gallery in Spry panel (repost) [SOLVED]

Thanks for the reply. Sadly, my site is down right now, so I can't try your suggestions. When my ISP gets things going again, I'll get back to you.

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

Re: Problem with gallery in Spry panel (repost) [SOLVED]

OK, no problem.
Thanks for letting me know.
(It should work fine, though. I've tested it myself.)

  • Registered: 2012-10-10
  • Posts: 43

Re: Problem with gallery in Spry panel (repost) [SOLVED]

Nice! Thanks a great deal.

  • Registered: 2012-10-10
  • Posts: 43

Re: Problem with gallery in Spry panel (repost) [SOLVED]

Resurrecting this old post: I'm having the same problem on a new page:
http://www.ragandbone.ca/Pages/owl_at_home_slide.html

I've tried the remedy offered here, but the gallery loads "small".

If I re-size the window at all, the gallery displays correctly. What am I missing?

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

Re: Problem with gallery in Spry panel (repost) [SOLVED]

Clicking the 'Photo Gallery' tab calls the loadGallery() function but the gallery's embedding code is not within such a function wrapper on your web page. (Currently, the gallery's embedding code is run as soon as the web page is loaded and when this happens, the gallery's parent container is not visible on screen and has no dimensions.)

Change:

<script>
new juicebox({
containerId: "juicebox-container",
baseUrl : 'owl_slide/',
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(252,242,204,100)"
});
</script>

... to:

<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            baseUrl : 'owl_slide/',
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(252,242,204,100)"
        });
    }
</script>

This should hopefully solve your problem.

  • Registered: 2012-10-10
  • Posts: 43

Re: Problem with gallery in Spry panel (repost) [SOLVED]

Yes, that's got it alright. Thanks so much.

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

Re: Problem with gallery in Spry panel (repost) [SOLVED]

You're welcome.
I'm glad it worked.