• Registered: 2014-05-14
  • Posts: 5

Topic: Scrolling up/down through embedded gallery

Hi
Apologies if this is a basic Q but I did a search and couldn't see any others.
I'm just trying out Juicebox Lite and have embedded a gallery into a page... all looks great on my desktop but...
Checking on an iPhone and as I scroll down when I get to the gallery I struggle to scroll vertically to get the gallery into the centre of my screen. Also moving up to other items on the page becomes a problem.
Any thoughts or help appreciated.
Steve

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

Re: Scrolling up/down through embedded gallery

It can be difficult to scroll on top of a gallery as the initial tap may be identified as the start of a swipe gesture to navigate between images. (You should be able to scroll on top of a gallery but you just need to be very careful about it.)
I would recommend using a Splash Page for an embedded gallery (which should always be used in Juicebox-Lite in an embedded gallery anyway).
Please post the URL to your gallery's web page so that I can take a look and perhaps suggest something which may help.

3 Reply by Steve_F (edited by Steve_F 2014-05-15 09:46:37)

  • Registered: 2014-05-14
  • Posts: 5

Re: Scrolling up/down through embedded gallery

I can't see any options for a 'Splash Page'? Here's a link to the page I've created:
Link removed.
Thanks for any help or thoughts.
Steve

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

Re: Scrolling up/down through embedded gallery

I notice that your gallery currently has a height of 100%. When using a percentage height, it is necessary to ensure that all parent container of the gallery (all divs that the gallery is nested within) have heights specified by CSS. Otherwise, Juicebox will not be able to determine what its actual height should be. It looks like this may be the case in your scenario and Juicebox may think that the gallery is simply taking up 100% of the browser window which is why the thumbnails are displayed rather than the Splash Page.

Try giving your gallery a fixed height (perhaps 600px) instead of 100%. You should then see the Splash Page on your main web page and when the Splash Page is tapped, the gallery should open on a page of its own.

For more information about the Splash Page, please see the Screen Modes section of the Gallery Tour support page.

Incidentally, your web page has a few HTML errors which should be fixed.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported.

5 Reply by Steve_F (edited by Steve_F 2014-05-16 10:36:54)

  • Registered: 2014-05-14
  • Posts: 5

Re: Scrolling up/down through embedded gallery

Thanks for your help. I'm afraid html coding is not my area and I'm building with Rapidweaver which is simple blocks that I can just about cope with... I've no idea how to fix html errors. If that's the cause on my problems then I'll seek help elsewhere.

Meantime I've made the height 600px (left the width at 100%):
link removed.
But now the 'expand' doesn't show a large image (is that a simple link gone wrong?)
On an iPhone I do now get the Splash Image, but it's huge(?) and the link to the gallery doesn't work (again link gone wrong?)

Again thanks for any help.
Steve

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

Re: Scrolling up/down through embedded gallery

Your gallery seems to function OK on its own (www.spoken-image.com/clients/7559LL/Gallery1/) so I suspect the problems are related to the other code on your web page.

But now the 'expand' doesn't show a large image (is that a simple link gone wrong?)

When expanding your gallery and navigating between images, the main images seems to be pushed to the very right of the gallery container. This is likely to be caused by global CSS rules on your web page which the gallery has no option but to inherit and which may be interfering with the gallery's own CSS rules.
Your web page loads 12 external CSS files. Try temporarily removing them from your web page and re-introduce them, one-by-one (checking your gallery after each one), until you find the source of the conflict.

the link to the gallery doesn't work (again link gone wrong?)

I think this may be due to one of the HTML errors on your page (an unclosed <script> tag).
Change:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"</script>

... to:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Juicebox searches through the <script> tags on the web page to determine the 'jbcore' directory (in order to know the location of other files) and this broken script tag may be interfering with this process.

With regard to the Splash Page being large, all that can be done to reduce this in side is to reduce the dimensions of your gallery or scale your web page for mobile devices using the <meta> 'viewport' tag .