Phantom Responsive resizing not working correctly in Suits theme

[Anonymous]

Hi all

This feels kinda weird, but I’m posting both the problem, and its solution:

Problem:
First, this is my setup: WordPress v3.8.1, Gmedia Gallery v0.9.4, Phantom Gallery v1.3. Theme: Suits v1.0, WampServer v2.4.

Here is what happens: I test my site’s responsiveness by constantly resizing my browser window. This allows me to see what the site looks like in different widths.

I have quite a few pages that basically consist of Phantom Thumbnail Galleries (which I love). The thumbsizes are 400 x 266 px. When I tested these pages’ responsiveness, I found that the resizing was incorrect for any viewport width between 658 and 766 pixels.

The attached image “before766.JPG” shows the page when the viewport is just slightly larger than 766 px, and the resizing is still correct.

The attached image “bad.JPG” shows the page when we enter the interval between 658 and 766 px.

As you can see in “bad.JPG”, the thumbnails do not resize correctly, and are cut off.

When I changed my theme to the Reponsive theme, this stopped happening.

I will post the fix as a reply.

[Anonymous]

So: the solution.

I tried to find a bug in my theme, but I could not find anything in particular. I then went back to see how the Phantom gallery handles the responsive resizing. The resizing is mostly handled in the jquery.gmPhantom.js script.
In the function ‘rpResponsive’, the following line can be found:

if($(window).width() <= 640){

This line causes the thumbnail to be resized relative to the size of the window, which seems strange, since it would make more sense to resize the thumbnails relative to the container of all the thumbnails. Thinking this, I changed the code to the following:

if($(Container).width() <= 640){

And voilà! As can be seen in the attached image “good.JPG”, the gallery now resizes correctly at the same viewport width as the attached image(original post) “bad.JPG”.

I tested this fix with some other themes, and it seemed to work fine.
If anyone can anticipate any problems caused by this fix, please let me know.

Regards

[Anonymous]

Yeah, the code came out wrong in my previous post. The ‘<‘ should be a ‘less than’ sign.

[Author]

Posts