1 (edited by rkguy 2014-06-26 19:31:39)

Topic: Gallery not working on Windows based Chrome, Mac or Mobile

I've been using the Juicebox plug-in for Lightroom 5.5 to create gallery pages on our new site. Works great in Firefox and IE but they do not show up on:

1. Chrome - we're using chrome on a PC windows based system and it says: No plug-in available to display this content.
2. Macs - tested on a Mac and got the same message as above.
3. Tablets/Mobile - tested on ipad and iphone and either receive the same message as above or the gallery page is blank with no message.

The site is:
www.signsvictoria.ca

The gallery pages are under the "Portfolio" menu.

The Juicebox plug is for Lightroom is: v1.4.0.0

Any ideas why this is happening or solutions to make it right?

Thanks
Ryan

Re: Gallery not working on Windows based Chrome, Mac or Mobile

Juicebox galleries are comprised of standard HTML, JavaScript and CSS files (and a few other resource files such as images and fonts) and should display fine in Chrome on their own.
Try viewing one of your own galleries in Chrome outside of your main page: http://www.signsvictoria.ca/dimensional/
This implies that the problem lies somewhere within your embedding page rather than with the gallery itself.

The 'No plug-in available to display this content.' is not an error message generated by Juicebox itself and Juicebox requires no plugins to run (although JavaScript must be enable in the browser).

It looks like you are embedding your galleries within <object> tags and this may be the cause of the problem. (Try a web search with terms such as 'object tag google chrome' and you should find more information.)
Try loading your galleries into an <iframe> instead.

Re: Gallery not working on Windows based Chrome, Mac or Mobile

Thanks Steven

I did a search like you suggested and it turns out one bit of code was wrong

I had:
<!--begin dimensional signs gallery -->       
<li id="dimensional">
                    <div class="main-content2">
<object type="type/html" height="100%" width="100%" data="dimensional/index.html" ></object>
</div></li>
<!--end dimensional gallery -->

and it should be:
<object type="text/html" height="100%" width="100%" data="dimensional/index.html" ></object>

Takes the images a little longer to load than in IE or Firefox but at least they are visible now.

Now the question....does that fix it for Mac's and mobiles? Anyone?

Re: Gallery not working on Windows based Chrome, Mac or Mobile

I can confirm that your galleries display OK on an iPod Touch 4 running iOS 6.1.6 although once you tap your 'Portfolio' drop-down menu, it never retracts and stays visible until you click another one of your menu items. This happens in both Mobile Safari and Chrome.
Check your menu's support to see if this is a known issue. (On desktop browsers, you can hover away from the expanded menu and it disappears. It is not possible to hover away from the menu on a mobile device.)

Re: Gallery not working on Windows based Chrome, Mac or Mobile

Thanks again Steve, that's good to hear. I'll have to do some research on an alternative to the hover command.
Ryan

Re: Gallery not working on Windows based Chrome, Mac or Mobile

Steven

you said: "...it never retracts and stays visible until you click another one of your menu items."

Does it retract when you open one of the portfolio galleries and then flick through some of the images in the gallery?

For example: you tap portfolio and then tap "Displays" (the Displays gallery opens) you then tap or I'm guessing swipe to see view the various images in the Displays gallery...is the Portfolio drop-down still open during all this?

Thanks again
Ryan

Re: Gallery not working on Windows based Chrome, Mac or Mobile

Does it retract when you open one of the portfolio galleries and then flick through some of the images in the gallery?

No. It stays expanded even whilst navigating through the album. It only retracts when you click another one of your menu items (and change the content on the page).
Try a web search with terms such as 'hover mobile devices'. This is the first result which looks like it might be relevant to your scenario: http://www.prowebdesign.ro/how-to-deal- … n-devices/