major upgrade lightbox and usergallery plugins

Creating and modifying plugins.
bernd_d
Regular
Posts: 466
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by bernd_d » Wed Oct 29, 2014 8:18 pm

I tried iPhone6/Safari today with Magnific: Awesome!

But what i found: Within some entries, ColorBox/Magnific/pretty does not work, for example https://bernd.distler.ws/archives/1476- ... reise.html

Lightbox2 works, as it should.

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu » Wed Oct 29, 2014 8:41 pm

Firefox says:
TypeError: a.browser is undefined 2k11.min.js:1
which halts the load of follow up scripts to process. I can't say if that is related to livecomments or commentspice, or whatever, but it seems some script (FitVids 1.0.3 in 2k11.min.js) wants to access the jquery browser var, which was lastly defined in jQuery versions beneath 1.9.?. But you have the S9y-2.0 version, which is 1.11.1. The mentioned lightboxes don't use the browser var as far as I can see and should work after this halt is fixed.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
Dergln
Regular
Posts: 54
Joined: Thu Jun 23, 2011 8:18 pm
Location: Hessen
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by Dergln » Wed Oct 29, 2014 8:54 pm

Timbalu wrote:
Dergln wrote:edit: For me, nothing except lightbox works.
Apart from the upcoming update for magnific, could you please specify more precise what you exactly mean by this?
I mean that nothing happens. I would gladly say more, but all I notice is that nothing happens when I click the image. No error visible, no error in the console. Just a plain request for the full file :roll:

(Installed the update.)

User avatar
yellowled
Regular
Posts: 6959
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled » Wed Oct 29, 2014 9:03 pm

Timbalu wrote:I can't say if that is related to livecomments or commentspice, or whatever
Should be easy to test by temporarily disabling livecomments and commentspice.
Timbalu wrote:but it seems some script (FitVids 1.0.3 in 2k11.min.js) wants to access the jquery browser var, which is lastely defined in jQuery versions beneath 1.9.?.
I think it's the stupid details polyfill (which would explain why firefox emits an error, since it actually needs the details polyfill). The 2k11 frontend still uses a different details polyfill than the backend (the new one does not use browser), so we should switch that.

I'll see what I can do to fix this soon. Might take me until the weekend, unfortunately.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 6959
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled » Wed Oct 29, 2014 9:30 pm

yellowled wrote:I'll see what I can do to fix this soon. Might take me until the weekend, unfortunately.
Look, the weekend came early. LOL.

2k11 in 2.0 now has the better polyfill by Mathias Bynens (the one we use in the backend as well). Bernd, if you don't want to update to a recent GitHub snapshot, you should be able to just update the two files in that commit. If that does not fix it, it's probably not 2k11's JS.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu » Thu Oct 30, 2014 2:07 pm

Dergln wrote:I mean that nothing happens. I would gladly say more, but all I notice is that nothing happens when I click the image. No error visible, no error in the console. Just a plain request for the full file :roll:
Ok. Could you give us a live link, to see this happen?
If that is not related to the browser thing we found at bernds environment, I guess it might be the mysterious Chrome issue.

There is a Chrome issue out there for around some time, which does not error or output anything useful, but denies lightbox popups on certain image links. I have 2 entries where this happens too. This does not happen with the lightbox2-jquery script, but does with magnific, prettyphoto and colorbox. Firefox just fires all lightboxes without any problems. I haven't really figured out what kind of difference there is to other working entries image links, to get the issue tracked down. But you may google for "Chrome lightbox issues" and you will find some related issue reports, without helping any further. At least for my case. And it is Chrome only.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

bernd_d
Regular
Posts: 466
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by bernd_d » Thu Oct 30, 2014 9:34 pm

yellowled wrote:2k11 in 2.0 now has the better polyfill by Mathias Bynens (the one we use in the backend as well). Bernd, if you don't want to update to a recent GitHub snapshot, you should be able to just update the two files in that commit. If that does not fix it, it's probably not 2k11's JS.
Updated to todays git-build, but still not working for me within Safari and Chrome on OS X 10.10.

Code: Select all

serendipity.css
Line 161, 210, 212, 214, 216
Invalid CSS property declaration at: *

User avatar
yellowled
Regular
Posts: 6959
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled » Thu Oct 30, 2014 10:00 pm

bernd_d wrote:Updated to todays git-build, but still not working for me within Safari and Chrome on OS X 10.10.
Have you tried to disable the plugins that Ian mentioned above? Have you tried cleaning out templates_c?
bernd_d wrote:

Code: Select all

serendipity.css
Line 161, 210, 212, 214, 216
Invalid CSS property declaration at: *
That's just Firefox lamenting about some browser hacks in the style.css. That's definitely not the reason why the lightbox JS doesn't work.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

bernd_d
Regular
Posts: 466
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by bernd_d » Thu Oct 30, 2014 10:13 pm

yellowled wrote:
bernd_d wrote:Updated to todays git-build, but still not working for me within Safari and Chrome on OS X 10.10.
Have you tried to disable the plugins that Ian mentioned above? Have you tried cleaning out templates_c?
Disabled commentspice and live comment, but still same problem. I don't think that is related to them, because other entries with images from the gallery-function are still working. It only seems not to work, if images are included as singe one.

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu » Thu Oct 30, 2014 11:14 pm

After one or two hard reloads of the page with these 4 images it now does work well with Firefox with the magnific Lightbox.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
Dergln
Regular
Posts: 54
Joined: Thu Jun 23, 2011 8:18 pm
Location: Hessen
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by Dergln » Fri Oct 31, 2014 12:13 am

Timbalu wrote:Ok. Could you give us a live link, to see this happen?
Sure. http://dark-world.eu/s9y/archives/1-tes ... box-2.html

I don't use chrome though -> Firefox.
Problem persists even with all addons off (safe mode).

Currently I have "magnific" set, and no fancy options like load optimization.

edit: Tested with FF 33 portable, so it can't be Aurora's fault (FF35) too :)

edit2: Sent you a PM for phpinfo.

bernd_d
Regular
Posts: 466
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by bernd_d » Fri Oct 31, 2014 9:27 am

Timbalu wrote:After one or two hard reloads of the page with these 4 images it now does work well with Firefox with the magnific Lightbox.
You are right, Firefox on OS X 10.10 is working. Safari and Chrome still not. :|

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu » Fri Oct 31, 2014 11:21 am

Dergln wrote:
Timbalu wrote:Ok. Could you give us a live link, to see this happen?
Sure. http://dark-world.eu/s9y/archives/1-tes ... box-2.html
Currently I have "magnific" set, and no fancy options like load optimization.
You have set magnificPopup. but in your entry you have this,

Code: Select all

<p><img alt="" src="/s9y/uploads/paint_madness_prev.png"><a rel="lightbox" href="/s9y/uploads/paint_madness.png" title="random text. dies sollte von lightbox angezeigt werden."></a></p>
which is wrong! It says rel="lightbox" and it is in false order. I assume you have set this entry by hand. This is not how the lightbox plugin works.

First of all it should be like this, saved by your entry form, as a blog entry without lightbox plugin usage (where XXX = id and w/h sizes):

Code: Select all

<p><a class="serendipity_image_link" href="/s9y/uploads/paint_madness.png"><!-- s9ymdb:XXX --><img class="serendipity_image_left" width="XXX" height="XXX" src="/s9y/uploads/paint_madnes.serendipityThumb.png" alt="" /></a></p>
Saved and created by CKEditor it looks a little different...

Code: Select all

<p><a class="serendipity_image_link" href="/s9y/uploads/paint_madness.png"><!-- s9ymdb:XXX --><img class="serendipity_image_left" src="/s9y/uploads/paint_madnes.serendipityThumb.png" alt="" style="width:XXX;" /></a></p>
Now with activated lightbox the first should return to be

Code: Select all

<p><a rel="magnificPopup[]" class="serendipity_image_link" href="/s9y/uploads/paint_madness.png"><!-- s9ymdb:XXX --><img class="serendipity_image_left" width="XXX" height="XXX" src="/s9y/uploads/paint_madnes.serendipityThumb.png" alt="" /></a></p>
In case of lightbox option gallery for page the rel would be rel="magnificPopup[]".
In case of lightbox option gallery per entry the rel would be rel="magnificPopup[id]", eg [6].
In case of lightbox option as single image, the rel would be rel="onemagnificPopup".

In short: As described in the plugin, set you entry images like "let my thumbnail link to the larger picture" if you want to have the lightbox plugin parse your content, to add these specific lightbox rel(s). (*)

Do you see the difference to your try?

(*) This will also work for "I want to use the larger image in my entry" and "I want to display it as a link to this url".
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu » Fri Oct 31, 2014 12:17 pm

bernd_d wrote:
Timbalu wrote:After one or two hard reloads of the page with these 4 images it now does work well with Firefox with the magnific Lightbox.
You are right, Firefox on OS X 10.10 is working. Safari and Chrome still not. :|
Yes and I found the reason why it does not work for Chrome (which is here https://bernd.distler.ws/archives/1476- ... reise.html, but does work here https://bernd.distler.ws/archives/1465- ... -2014.html. I didn't know that Safari seems to behave the same, since I can't test that here.

It is the class attribute in the image tag,

Code: Select all

<img class="serendipity_image_left" src="/uploads/2014/05/14/2014-05-1423.38.25iPhone5.serendipityThumb.jpg" title="Sonnenaufgang" alt="" height="200" width="150">
I don't know why Chrome hesitates to lightbox an image like this, but if you remove the images class attribute in your entry, Chrome should work. I have tried to work around this mysterious Chrome issue, by removing the image class attribute by javascript DOM manipulations, but this sadly has no effect. But now, I think, I have found the real reason for this behaviour.

Currently I just add a css fix for Chrome when using the lightbox plugin, which is:

Code: Select all

/* on Safari and Chrome  */
@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    .serendipity_image_left,
    .serendipity_image_right,
    .serendipity_image_center {
        display: inherit;
        float: inherit;
    }
}
This fixes the issue for my testcases. Could you try that? It must be in the user.css for you to test this, since we need to have it underneath serendipity.css and before the lightbox things.
If that happens to be ok, I'll update the lightbox plugin with an extra fix for this.

It is not the most ideal fix, since it removes entry image floats, but this is the only way I found it working for lightboxes with Chrome.

Bernd, after you have checked this, can you also give the landscape colorbox suggestion (see some upper posts) a try?
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
Dergln
Regular
Posts: 54
Joined: Thu Jun 23, 2011 8:18 pm
Location: Hessen
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by Dergln » Fri Oct 31, 2014 1:39 pm

I know that I mustn't set this manually. Why would I even use a plugin then ;)
Original code in editor is attached, Unbenannt.PNG.

As a hint: While I altered the code (I am on spartacus version atm of course !) for shadowbox usage I noticed that my additional statements in the code weren't resulting in rel=shadowbox being present in the end. To be honest I didn't care very much since shadowbox works with rel=lightbox either way.

But...that made me go into the DB itself now, which was a good thing.
See screenshot Unbenannt2.PNG...rebuilding cache fixed it.

edit: So maybe adding a big fat "CLEAR THE CACHE AFTER SWITCHING PLUGINS" would be helpful here.
Attachments
Unbenannt2.PNG
Unbenannt2.PNG (15.98 KiB) Viewed 5714 times
Unbenannt.PNG
Unbenannt.PNG (4.29 KiB) Viewed 5714 times

Post Reply