Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2016-01-06 01:34:58

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Gallery Large Image Presentation problems

A Happy New Year to all!

Over the Christmas period I worked on upgrading my CE3 website to CE4. Most parts work well, a few are driving me crazy.

There is a cart problem, but that's under a CE4 Cart thread here.

With the CE4 Galleries I tried all four large image display modes. All behave in strange ways - but they work great inside Lightroom.

My test subdomain is currently configured for Highslide. It works, but the "close" button does nothing.

When using "Touch" I get three tiny images on the top left (where I can zoom in and out inside the tiny images), and if I use Magnific Popup, a click on the image doesn't hide the UI. All modules behave in strange ways.

The TTG modules are all up to date, the configuration seem to be correct, but it does not work.

I've created a subdomain for testing: http://ce4test.haraldjoergens.com/

The TTG BE admin username and password are left to their defaults.

I would really appreciate any feedback to why it doesn't work, and how to get it working.

Thanks in advance

Harald


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#2 2016-01-06 01:47:39

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Gallery Large Image Presentation problems

does the gallery work if you disable the Google translate script? I'm wondering about a javascript/jQuery conflict.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#3 2016-01-06 01:54:17

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

rod barbee wrote:

does the gallery work if you disable the Google translate script? I'm wondering about a javascript/jQuery conflict.

Never thought about that, I'm using Google Translate since over two years on my CE3 website, and there are no problems at all.

But you are absolutely RIGHT
! I've commented it out in PHPlugins, and now the cart AND the galleries seem to be working.

G**gle means trouble, as usual. Thanks, Rod!!!

Harald


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#4 2016-01-06 04:36:59

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Gallery Large Image Presentation problems

not sure if this will make a difference or not, but there were some errors showing in the source code when the script was active. It might originate from this line in the <head> tag:

<meta name="google-translate-customization" content="15c144266852ad1d-adb41586d531ab05-ge781bf5b45614554-16"></meta>

the </meta> tag was in red. I don't think you need a closing </meta> tag. The other meta tags on the page don't use a closing tag, they look like this:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

see, no closing tag.
Anyway, something else to try.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#5 2016-01-07 01:33:07

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

rod barbee wrote:

not sure if this will make a difference or not, but there were some errors showing in the source code when the script was active. It might originate from this line in the <head> tag:

<meta name="google-translate-customization" content="15c144266852ad1d-adb41586d531ab05-ge781bf5b45614554-16"></meta>

the </meta> tag was in red. I don't think you need a closing </meta> tag. The other meta tags on the page don't use a closing tag, they look like this:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

see, no closing tag.
Anyway, something else to try.


Hi Rod,

Thanks, yes, I've seen that as well. Unfortunately that's not part of my code, it's within the G**gle code, so I don't think I could even try if it made a difference.

Unless I find another translation plugin, I guess I have to do without. It is a CE4 specific issue, I'm using exactly the same code in my CE3 website for two years, without any problems.

Thanks!

Harald


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#6 2016-01-12 01:41:20

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

Hi Rod,

After a bit more investigation I found that the problem may well be down to Google using  JQuery version that doesn't work with TTG.

I tried adding another bit of code I found that did exactly what I wanted it to do, but it caused exactly the same problems.

It used jquery-1.6.1.js, and it turns out this version seems to be incompatible with TTG, a simple

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

just on it's own breaks, nicely reproducible, the TTG Cart and galleries.

Now I'm using jquery-1.7.0.min.js, and all seems to be working just fine, including the functionality I was trying to achieve.

Perhaps it's not G**gle's fault that their Translate script breaks TTG, it may be a "wrong" jquery version somewhere.


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#7 2016-01-12 01:51:44

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Gallery Large Image Presentation problems

TTG is using jQuery 1.11.3, so perhaps 1.6.1 had conflicting code.
I'm not sure on the advisability of loading two different versions of jQuery. Maybe Matt will chime in on that.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#8 2016-01-12 02:25:24

SunFoxNC
Member
Registered: 2015-09-04
Posts: 80

Re: Gallery Large Image Presentation problems

JQuery 1.9 deprecated quite a bit and broke more than a few sites (they have a migration plug-in you can use to try to work round the API changes until you can fix your code):

http://jquery.com/upgrade-guide/1.9/

Later versions have diverged even further from 1.6.x so it wouldn't be surprising to see more things break.  JQuery is pretty good about backward compatibility but unless you're in a completely closed system that is never updated, no one will ever be 100% backwardly compatible.

Offline

#9 2016-01-12 09:13:42

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Re: Gallery Large Image Presentation problems

rod barbee wrote:

TTG is using jQuery 1.11.3, so perhaps 1.6.1 had conflicting code.
I'm not sure on the advisability of loading two different versions of jQuery. Maybe Matt will chime in on that.

Loading two different versions would create a conflicting namespace, so not advised. I'd look for an updated version of Google's code, if such exists. If they haven't updated it themselves, then it's entirely possible they might have abandoned or retired the service you're trying to use. Google sheds excess on a fairly regular basis.


Matt

The Turning Gate, http://theturninggate.net

Offline

#10 2016-01-12 18:20:37

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

Matthew wrote:
rod barbee wrote:

TTG is using jQuery 1.11.3, so perhaps 1.6.1 had conflicting code.
I'm not sure on the advisability of loading two different versions of jQuery. Maybe Matt will chime in on that.

Loading two different versions would create a conflicting namespace, so not advised. I'd look for an updated version of Google's code, if such exists. If they haven't updated it themselves, then it's entirely possible they might have abandoned or retired the service you're trying to use. Google sheds excess on a fairly regular basis.

Hi Matt,

Thanks for looking into it! G**gle Translate is very much alive: http://translate.google.com/manager/website/?hl=en, you have to login to a Google account, specify the website, and you will be given code to add to your website. The latest code I got, about a week ago, is this:


      <script type="text/javascript"> 
      function googleTranslateElementInit() 
      {
         new google.translate.TranslateElement(
         {
            pageLanguage: "en", 
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
            gaTrack: true, 
            gaId: "UA-xxxxxx"
         }, "google_translate_element");
      }
      </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
      </script>

The reason why I now added jQuery 1.7.0 is different - I'm using a jQuery-workaround for browsers that don't support the HTML5 <details> and <summary>.

To avoid conflicts, I've put the code in it's own namespace, similar to this example, using jQuery.noConflict().

Harald


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#11 2016-01-13 09:41:39

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Re: Gallery Large Image Presentation problems

HaraldJ wrote:

The reason why I now added jQuery 1.7.0 is different - I'm using a jQuery-workaround for browsers that don't support the HTML5 <details> and <summary>.

Why do you need those? How are they being used?


Matt

The Turning Gate, http://theturninggate.net

Offline

#12 2016-01-13 17:26:09

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

Matthew wrote:
HaraldJ wrote:

The reason why I now added jQuery 1.7.0 is different - I'm using a jQuery-workaround for browsers that don't support the HTML5 <details> and <summary>.

Why do you need those? How are they being used?

I shoot events, some of them with large numbers of groups taking part. For many events I add information to my TTG photos page copy, the text can be long, and would require the viewer to scroll down on every single page (I don't want the grid above the copy).

The HTML5 details/summary concept works beautifully, it's semantically correct, keeps all the information visible for SEO, and the text is not in the way, but can be revealed with one click.

Have a look here, the two grey lines above the grid are what I'm talking about (the event information is from a completely different event, it's a test/development site).

I've added a bit of PHP in Phplugins, it reads an XML configuration file where it gets the filenames and titles, and then reads the Markdown files specified.

Many browsers, including Firefox, haven't implemented details/summary yet, but the workaround I'm using seems to work very well. Unfortunately not with jQuery 1.11.3.


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#13 2016-01-13 18:35:44

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Re: Gallery Large Image Presentation problems

Your intent is fine, but your execution is all wrong. There's absolutely no reason to use a Javascript polyfill for details/summary support, when you could be using well-supported elements instead. Any sort of CSS-based accordion would do; Google "CSS Accordion" and you'll have a wealth of options from which to choose.

Here's one:
http://www.hongkiat.com/blog/css-content-accordion/


Matt

The Turning Gate, http://theturninggate.net

Offline

#14 2016-01-13 18:43:30

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

Matthew wrote:

Your intent is fine, but your execution is all wrong. There's absolutely no reason to use a Javascript polyfill for details/summary support, when you could be using well-supported elements instead. Any sort of CSS-based accordion would do; Google "CSS Accordion" and you'll have a wealth of options from which to choose.

Here's one:
http://www.hongkiat.com/blog/css-content-accordion/

I've never heard of that before, but it looks interesting, and I'll have a look if I use that, instead of my solution. Thank you!


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#15 2016-01-13 18:48:09

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Re: Gallery Large Image Presentation problems

HaraldJ wrote:

I've never heard of that before, but it looks interesting, and I'll have a look if I use that, instead of my solution. Thank you!

You might not have heard the term, but I'm sure you're well familiar with this type of UI element. Loads of websites have used it for a very long time, and Lightroom's own sidebar panels open and close in accordion fashion. It should handle the task with aplomb.


Matt

The Turning Gate, http://theturninggate.net

Offline

#16 2016-01-14 00:05:21

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

Matthew wrote:
HaraldJ wrote:

I've never heard of that before, but it looks interesting, and I'll have a look if I use that, instead of my solution. Thank you!

You might not have heard the term, but I'm sure you're well familiar with this type of UI element. Loads of websites have used it for a very long time, and Lightroom's own sidebar panels open and close in accordion fashion. It should handle the task with aplomb.

Thanks, Matt, I have replaced the jQuery-based code with a plain CSS accordion, and it seems to be working well. Your input has been most helpful!


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#17 2016-01-14 00:33:16

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Gallery Large Image Presentation problems

That looks really nice. You've really done a wonderful job with your customizations on the site.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#18 2016-02-09 01:08:16

HaraldJ
Member
From: Surrey, United Kingdom
Registered: 2012-10-10
Posts: 77
Website

Re: Gallery Large Image Presentation problems

An update on the site translation issue:

After I had to remove Google Translate because their jQuery clashed with CE4, I have been looking for a suitable alternative.

And I found one that might be better than that of the advertising sales guys from California: Bing Translate.

It's free, very easy to implement, and can automatically translate the website to the viewer's browser language. And it allows changes to their translation, most helpful if you know how to improve the automated translation of the website.

Most importantly: It does work with CE4!


Harald Joergens ARPS
Harald Joergens Photography
Nutfield, Surrey, UK

Offline

#19 2016-02-09 16:58:53

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Re: Gallery Large Image Presentation problems

HaraldJ wrote:

Most importantly: It does work with CE4!

That's always a plus!


Matt

The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB