Help required with conflict

[darrin]

Hi,

I wrote some time back as I had a problem with a gallery plugin (PWA+PHP) to display our Picasa albums. The lightbox works fine with single images but the gallery is loading a cached version of the photo and the original in sequence. So effectively doubles the gallery view as it repeats each photo twice.
I tried the option of removing .JPG tag from the settings which worked in the past, but I had to update our wordpress theme recently due to security violations in the old unsupported and outdated theme and this option no longer works.
I have gone through some testing as suggested previously, but having spent several hours on this I am no further forward and exhausted all ideas for now.

Can you suggest any changes I can make to get this working again? I am suspecting theme related (cyberchimps – BloxPro) as I used the Responsive Pro from same people without issue – everything worked okay, but couldn’t get on with the theme.

You mentioned in the last response that the PWA PHP plugin was using its own jquery (1.71) and I noticed in the options I can specify to use WordPress built in (which I have set to) or the plugin version.

Any help would be appreciated.

Site: http://www.suttonrunners.org
example gallery page: http://www.suttonrunners.org/recent-results/photo-gallery/?album=2ndMobMatchSR
example page (single image): http://www.suttonrunners.org/club-info/club-history/

Thanks

Darrin

[RavanH]

Hi Darrin, I answered your question via e-mail a while ago. I hope you were able to make the required changes and your issue was solved.

Another thing I noticed is that the images on your site are all using a .JPG extension in capitals. You’ll need to add .JPG to the Autodetect field on your Settings > Media page.

Please let me know how I can help you further 🙂

[darrin]

Hi

Thanks for the reply.
Yes I do remember the changes you suggested but sadly I had to completely redo our site with a new theme as the previous one was out dated and many security hacks were encountered as its been unsupported for some time.
I placed the extension into the settings as suggested but still hitting the same issue I had originally with the plugin (PWA+PHP) opening up both versions of the photo (down sized and original).
I’m just unsure how to get it working without disabling the photo gallery entirely. The only reason I am keeping PWA+PHP is that there is nothing else I could personally find out there that is as good when its working. It uses Picasa which is were our library is stored (Google)

Thanks

Darrin

[RavanH]

Hi Darrin, no I was talking about a more recent reply via email. It was on the same day, 14 sept. as your original question. But I see now that I replied on an automated forum mail so it got sent to a noreply address and you will not have received it. My mistake.

So here it is:

—

OK, first thing I notice is that the jQuery library is loaded twice. Once all the way at the top of the head section, from https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js and then later the WP one from http://www.suttonrunners.org/wp-includes/js/jquery/jquery.js?ver=4.0 … this is not a problem since all other jQuery extensions are loaded after that but it is redundant. You might want to make sure one of the two is removed.

Second thing I notice is the theme loads Slimbox, which is in fact an alternative for Fancybox. Is slimbow used for anything in particular? If not, is there an option in the theme to exclude it?

Still, this is not the reason for the double images in the gallery.

What is going wrong is this: notice the Save icon on top of each image? That is in fact a link to that same image but via another URL. FancyBox does not know it is meant for downloading and thinks it is just another image that should be included in the gallery.

The solution is to add a class to these download links: class=”nofancybox”. And there are two ways to do this…

Can you edit the theme? I mean, are you comfortable doing this? If so, then you might try to find the code responsible for creating these download link and add class=”nofancybox” to it. And you’ll have to do this on every new theme update.

If you rather not edit the theme then it should be possible to add some script (in a footer widget for instance) that does this on the client side. Something like:

<script type="text/javascript">
jQuery(document).ready( function($) {
    $('div.pwaplusphp_jq_save a').addClass('nofancybox');
} );
</script>

might do the trick…

Hope that helps 🙂

[darrin]

Thank you so much!

I added the first jquery call including a small piece of code I found to get a toggle working (almost) for a FAQ page but its not essential I had that working so I’ve removed it as suggested.

The SlimBox can be disabled from the themes options, but although I turned this “off” I’m guessing it’s not fully disabled.

I’ve added the class to the header.php as I’m using a child theme and it’s working perfect with FireFox, IE11 and Opera but Chrome and Safari is acting up and only partially working. The download links are working but the main pic does not load in fancybox, it just opens the pic in a separate browser window. But guessing that’s a chrome/safari thing. 🙂

Thanks

[RavanH]

Hi Darrin,

I tried your page http://www.suttonrunners.org/recent-results/photo-gallery/?album=2ndMobMatchSR in the Chromium browser (open source version of Chrome) and it seems to work just fine. The lightbox opens the large images, the download works and I see no error in console anymore… Did you clear the browser cache?

The redundant inclusion of slimbox you could report to the Cyberchimps devs. They might find it helpful and fix the issue in the next version.

What is the code you were using for the FAQ’s toggle? I might be able to get it working for you 🙂

[darrin]

Hi Ravan

I cleared the cache (on two separate computers) but still doesn’t work for chrome but not too concerned as I know it’s not a code issue.

As for the FAQ page – http://www.suttonrunners.org/training-advice/club-standards/

This is the code I have used

<!-- toggler for FAQ -->
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(".toggler").click(function(){
    jQuery(this).next().slideToggle("slow");
    return false;
  }).next().hide();
});
</script>

And CSS…

.toggler {  
        text-decoration: underline; 
	cursor: pointer;
	color: #cc335d;	
}

It’s sort of working but would be nice to just have one question open at a time so when you click on a second item it closes the previous one, and so on. Not sure about the underline but that’s aesthetics. I moved the code as I realised my mistake in having to unnecessarily load another jquery version. So thanks for pointing that out.

I will speak to CyberChimps about their slimbox.

Thanks

Darrin 😉

[RavanH]

I cleared the cache (on two separate computers) but still doesn’t work for chrome but not too concerned as I know it’s not a code issue.

It’s very strange. I just revisited in Google Chrome (not chromium) and it works fine…
Maybe a browser plugin you are using on both browsers? Can you try in a anonymous browser window?

For your FAQ’s this snippet should do the trick:

<!-- toggler for FAQ -->
<script type="text/javascript">
jQuery(document).ready(function(){
  var questions = jQuery("p.toggler");
  /* hide answers */
  questions.each(function(){jQuery(this).next().hide();});
  /* stage toggle on click  */
  questions.click(function(){
    if( jQuery(this).next().hasClass('open') ) {
      jQuery(this).next().removeClass('open').slideUp();
    } else {
      jQuery("div.open").each(function(){jQuery(this).removeClass('open').slideUp();});
      jQuery(this).next().addClass('open').slideDown();
    } 
  });
}); 
</script>

[darrin]

I think you’re right – a browser plugin of sorts which I will track down and disable. It works fine in a incognito window.

You are a genius! Thanks so much for the amended code (FAQ), I would have spent hours looking for a solution not being a coder.

Your job is done 🙂

Thanks so much

Darrin

[darrin]

Donation submitted to Status301.net EasyFancyBox. Least I can do.

Thanks

[RavanH]

That’s mighty kind of you Darrin. Thanks!

Glad I could be of service 🙂

[Author]

Posts