• Registered: 2012-05-23
  • Posts: 3

Topic: 2 issues with embedded gallery

I recently converted an embedded SV gallery to Juicebox Pro and have encountered 2 issues. The first issue is that captions in the overlay are centered in IE only. I've made sure the <!DOCTYPE html> tag is there and added captionHAlign: "left" to the JB embed code. The captions display perfectly in Chrome, Firefox, Opera and Safari as well as on mobile devices.

The 2nd issue is that while everythings looks great on desktop computers, tablets and even my Blackberry, it's not resizing on iPhones despite the fact Screen Mode is set to Auto, Splash page is set to Auto and I included enableTouchZoom: "TRUE",in the embed code. I also made sure the table width is set to a percentage.

Here's the page with the embedded JB gallery: http://justfranceinparis.com/apartments/for_rent.html

Any suggestions?

Thanks in advance.

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

Re: 2 issues with embedded gallery

The first issue is that captions in the overlay are centered in IE only.

Your web page's entire <body> section is encapsulated within <center> tags and it looks like the captions within the gallery are inheriting this. Your page uses the HTML5 Doctype Declaration and the <center> element is obsolete in HTML5 and CSS should be used instead.
Try validating your web page with the W3C Markup Validation Service and fix the HTML errors reported. Once the code on your web page validates correctly against your chosen Doctype Declaration's set of standards, your web page should be rendered with greater predictability and consistency across different browsers.

it's not resizing on iPhones

Try adding the following <meta> tag to the <head> section of your web page:

<meta name="viewport" content="width=device-width, initial-scale=1">

I included enableTouchZoom: "TRUE"

The enableTouchZoom configuration option was removed from Juicebox v1.2.0 (please see the Version History for details) as the gallery navigation gestures can interfere with pinch zooming.

As an alternative to the Splash Page (which will display the gallery in its own page when clicked), you could set either showSplashPage="NEVER" (to initially display the Small Screen Mode gallery) or screenMode="LARGE" (to initially display the Large Screen Mode gallery).

  • Registered: 2012-05-23
  • Posts: 3

Re: 2 issues with embedded gallery

Thanks for providing such a helpful and prompt reply. It's much appreciated.