PrettyPhoto

[KG60]

We are currently building a website and have added PrettyPhoto onto our product pages. It works fine on all browsers except Firefox where it doesn't appear correctly, and it won't work on the iPad. We've got it working fine on other non ProcessWire websites on all browsers and devices so it may be something to do with the way the images are called using PHP.

Can anybody suggest anything to resolve this? The site is currently on the test address http://owltreeweb.solutions/carman/

[kongondo]

Your question is rather generic

• What exactly are we supposed to be looking at at the address you have provided?
• What exactly does "it doesn't appear correctly in Firefox" mean? How is it supposed to appear and what is "it"?
• Show us some code. E.g. How are you calling your images?

[Ivan Gretsky]

Just a wild guess - try putting your main.js file under jquery link or remove it at all.

[horst]

It has nothing to do with PW I believe. PW only gives you the urls where the images resides $image->url. Cannot imagine how that could be get wrong.

I have found the gallery what @KG60 seems to mean. For me it is looking like wrong calculations for div.pp_overlay and (maybe as a result of that) a wrong calculation for div.pp_pic_holder.

And this is not a thing related to FF only. I see it with all my browsers the same (Win7 FF, IE11, IE10)

Some questions came to my mind when seeing this:

• Why is pp_overlay defined by class and not by ID. I think it has to be a single unique div.
• Why is it calculated to cover the document dimensions and not the viewport dimensions.

The first one may be not of interest, but the second one is the point that is wrong here I bet. Or if this is right too, than at least the position calculations for the div.pp_pic_holder are wrong (don't know / remeber if it is derived from overlay or not). It definately generates the right with and height, according to the viewport, but the wrong position. Also if one adjust the srolling a bit, it corrects to the correct position.

Also the overlay goes way way beyond the footer of your document, and when it appears the other divs get scrollbars.

--- FF win7

wrong position!

---- IE 11

In IE it also doesn't correct the position like in FF, and the other content divs only get vertical scrollbars.

[KG60]

Thanks for all the replies. I will try and give a bit more detail although Horst has given a detailed response which I will look into.

On the product sub pages we have up to 3 small images and then a clickable link underneath that opens up a pretty photo gallery. (image-1)

The pretty photo gallery should open in the centre of the browser screen, which it appears to do on all browsers apart from Firefox. (image-2) Horst has pointed out that this is not restricted to Firefox but I have only tested on a Mac & iPad at the moment which could explain why I have not noticed that. On an iPad the PrettyPhoto does not open at all.

The code used on the actual product page (conservatories in the examples ) is shown in image-3.

Image 1

Image-2

Image-3

I hope this explains thing a bit better.

 

 

[KG60]

Thanks for the responses up to now. I have checked out the suggestions made and I have not managed to resolve the issue. The class settings for div.pp_overlay and div.pp_pic_holder mentioned by Horst are standard settings in PrettyPhoto and seem to work fine on other sites we have created. I'm at a loss as to what is causing the issue as we don't appear to have done anything different than usual apart from using PHP rather than standard HTML.

[Joss]

I can't see anyway in which this is being caused by PW.

You might want to check whether where you have inserted the code in the dom is an issue. Also, check whether it is fully compatible with the version of JQuery you are using.

If in doubt, try stripping away everything except the link image to the gallery, and if that then works okay, start adding the other parts of your layout back in and see where it breaks.

Have you asked on the Prettyphoto forums?

[KG60]

Thanks for the reply Joss.

We have used the script on other sites without any issues and it's just this one that we are having issues with. While I agree thats it most likely not an actual problem with ProcessWire I was thinking it could be the way we use the PHP as this is the first time we've used it with PHP rather than standard HTML. I was hoping that maybe somebody had seen this issue before and maybe had tips on how to get round it. I had noticed that other users have mentioned prettyPhoto as being their favourite Lightbox plugin. It seems strange that it just seems to be Firefox on the Mac that's affected, although it has been mentioned that it affects more browsers under Windows.

I'll go down the route of the prettyPhoto forums as that will maybe find somebody who's faced this issue with different CMS's.

[Ivan Gretsky]

I just downloaded and tested Pretty Photo on Windows with Firefox. The example does work smoothly (exept for some problems with flash). On your site it does not.

[Joss]

Hi KG60

PW does not really affect this kind of thing simply because it doesn't output anything much apart from the data - so really, your templates are just a static html website with some dynamic bits shoved in it.

What you can do is to load your page, go to View Source, then copy and paste that into an html file and try and debug it that way. Then you can see exactly what is happening and if you solve it, just make the appropriate changes in your template file.

[Mike Rockett]

KG60

Have you tried using another plugin, like Magnific Popup? If so, does the same thing happen?

[KG60]

I've not heard of Magnific Popup but I'll give it a try if we can't get sorted with PrettyPhoto. The main reason we stick with PrettyPhoto is because we found it easy to use and the popup windows are quite tidy compared to some of the other plugins (the rounded borders and dark backgrounds look quite effective).

It could be useful to test a different plugin anyway to clarify whether it is the php we're using. Thanks for the suggestion.

[Joss]

The look of any lightbox type plugin should be easy to customise to match the website, so I would just worry about making sure it functions well and then make it look how you want.

[Soma]

First off I would have never guessed that there's a gallery link hidden in that picture frame icon. I clicked the images to no success (hm what's supposed to be here?)

Ok just a glance at html 

<!DOCTYPE HTML>
<!-- copyright 2014 OwlTree Web Solutions Ltd -->
<html lang="en">

Not sure but some long year experience says this comment could cause issues. Definately if it would be at top (for IE)

Aand we have a js error $ undefined., which 99.999% is jquery not included/loaded before a jquery script using $.

<script type="text/javascript" src="/carman/site/templates/scripts/main.js"></script>

<!-- Pretty Photo CSS and scripts --> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript" src="/carman/site/templates/scripts/jquery.easing.js"></script>

<script src="/carman/site/templates/scripts/jquery.prettyPhoto.js" type="text/javascript"></script>

<link rel="stylesheet" href="/carman/site/templates/styles/prettyPhoto.css" type="text/css" media="screen" />

Even if main.js seems empty to you there's a $(document) and it's included before jquery core.

Loading jquery core like this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

What do you do if server google isn't available. There should be a fallback like https://github.com/h5bp/html5-boilerplate/blob/master/dist/index.html#L25

Finally this is the gallery markup

<a href='/carman/site/assets/files/1036/con11.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'><img src='/carman/site/templates/images/gallery.png' alt='Conservatories Gallery' /></a>
<a href='/carman/site/assets/files/1036/con12.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con3.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con4.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con5.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con6.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con7.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con8.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con9.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a>
<a href='/carman/site/assets/files/1036/con10.jpg' class='gallery' data-rel='prettyPhoto[pp_gal]'> </a> 

Possibly the use of 'attr' instead of "attr", you'll laugh but I got caught by it once, but don't remember what case it was. I don't think so here is the case. 

 

In my Firefox it loads the gallery but the container is positioned far far down. Only after scrolling some it shows up. Offset is inline calculated from top and seems wrong. I removed you CSS "height: 100%"  from <body> and <html> and it works fine.

[Mike Rockett]

I've not heard of Magnific Popup but I'll give it a try if we can't get sorted with PrettyPhoto. The main reason we stick with PrettyPhoto is because we found it easy to use and the popup windows are quite tidy compared to some of the other plugins (the rounded borders and dark backgrounds look quite effective).

It could be useful to test a different plugin anyway to clarify whether it is the php we're using. Thanks for the suggestion.

You're welcome.

I switched over to Magnific the second FancyBox changed their livense. Works like a dream.

[KG60]

Thanks to everybody for your help. I have now managed to resolve the issues following the comments from Soma. The problem basically came down to 2 things:

1. Bad placement of script tags in the <head> of the site. i had the min.js and analytics.js appearing before jquery had actually loaded but I hadn't spotted it. (strange how some browsers accept it and others don't)
2. The css height: 100% from <body> and <html>

Soma - Thanks for the solutions and your point about jquery fallback, it wasn't something I'd considered but it makes sense. I've now added this into the extra line into the <head> and I'll make sure I do it for all future sites as well. I've also took note of your comment re the picture frame icon. It's a good point and I'll make it more obvious that it is an actual gallery link.

With reference to the use of 'attr' instead of "attr", this is not really an option as PHP see's " as closing the statement so it is necessary to keep it at ' for any attribute. 

​It's now working on all the browsers on Windows, OSx and Linux, as well as iOS and Android, so all is good.  

Mike Anthony - I'll check out Magnific at some point, it's always useful to have alternative options.

[kongondo]

Glad you sorted it!
 
However, RE PHP and the use of double versus single quotes, the below is not true. You can use either quotes with certain caveats.
 

..With reference to the use of 'attr' instead of "attr", this is not really an option as PHP see's " as closing the statement so it is necessary to keep it at ' for any attribute...

More info here:

http://php.net/manual/en/language.types.string.php

http://stackoverflow.com/questions/3446216/what-is-the-difference-between-single-quoted-and-double-quoted-strings-in-php

[KG60]

Thanks for that Kongondo. I'll have a good read through the links.