major upgrade lightbox and usergallery plugins

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

Re: major upgrade lightbox and usergallery plugins

Post by bernd_d »

Timbalu wrote: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.
Fix is working for Safari and Chrome on OS X 10.10 and Safari on iOS 8 (portrait and landscape).
Timbalu wrote: 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.
Could this have any negativ consequences for users? Didn't see any differences in my case, but who knows.
Timbalu wrote:Bernd, after you have checked this, can you also give the landscape colorbox suggestion (see some upper posts) a try?
I have set it to color box and value to "false". But this is not an good idea, because now every image is larger than my display, because the browser doesn't fit it into display size. resize should be true by default. Maybe we should life with it, that color box has problems in this special case.
bernd_d
Regular
Posts: 468
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by bernd_d »

bernd_d wrote:
Timbalu wrote: 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.
Could this have any negativ consequences for users? Didn't see any differences in my case, but who knows.
OK, i have seen what you mean. Floating right for example doesn't work anymore. That's not so nice. We should find another way to make lightbox working.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled »

Timbalu wrote: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;
    }
}
If I remove those styles in Chrome devtools on Bernd's blog, the lightbox still works, so I'm not too sure that's actually it.

That being said, I still haven't tested this any other than in Bernd's blog using Chrome devtools, so I might be completely wrong. Even if so, this is extremely weird.

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

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu »

yellowled wrote:If I remove those styles in Chrome devtools on Bernd's blog, the lightbox still works, so I'm not too sure that's actually it.
That is the same problem like the DOM replacement. The lightbox seems to fire earlier, so that DOM manipulating does not work for this request. All my tests were positive on this.

But as we already stated here, this is not the best solution, since it breaks the image floats. I imagine the only other way to make this run, is to tweak the lightbox js files inside, since the lightbox2 script must have that solved too (inside!) somehow. But this would need a real expert, I assume.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled »

Timbalu wrote:But as we already stated here, this is not the best solution, since it breaks the image floats. I imagine the only other way to make this run, is to tweak the lightbox js files inside, since the lightbox2 script must have that solved too (inside!) somehow.
I assume that it would be easier if we had different markup and styles for including images from the media db, especially for galleries (we actually don't have true support for image galleries as it is, they're just a bunch of images next to each other; also users may have to add a container div manually to clear their floats, depending on the theme).

For example, floated images currently are img elements with a class, potentially surrounded by a link – unless the image has a caption. In that case, they're included in some div soup. The image is floated, the a element is not. If there's a caption, the container div is floated as well (also to make it possible to center images).

All that is very weird and probably prone to error at some point. Also, HTML5 now offers way better markup for images with captions – using figure and figcaption.

It isn't a short-term solution for the issue at hand, but it is worth keeping in mind for 2.1 or something.

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

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu »

yellowled wrote:I assume that it would be easier if we had different markup and styles for including images from the media db, especially for galleries [...]
All that is very weird and probably prone to error at some point.
Yeah, true. But having better markup would not help either on older entries.

I now do this, which fixes most of the issues with chrome, leaving the right or left floated images not appended to the lightbox for webkit engines.

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: inline-block;
    }
}
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled »

Timbalu wrote:I now do this, which fixes most of the issues with chrome, leaving the right or left floated images not appended to the lightbox for webkit engines.
I think you wouldn't even need the “webkit hack” for that. Could probably just be applied to all the images without any harm in all browsers (well, except for those who don't support inline-block, but eh, those are long gone anyway).

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

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu »

Well, don't touch working scenarios, thats why I would stick to webkit engines ...

But I fiddled another bit and found this

Code: Select all

/* on Safari and Chrome  */
@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    /* allows floated images to display in lightbox without need to disable the float */
    .serendipity_image_link:before {
        content: '';
        display: inline-block;
    }
    /* same for centered images */
    .serendipity_image_center {
        display: block;
    }
}
helping me for my testcase

Code: Select all

<p><a class="serendipity_image_link" href="/uploads/test/animal.jpg"><!-- s9ymdb:209 --><img alt="" class="serendipity_image_center" src="/uploads/test/animal.serendipityThumb.jpg" style="width:400px" /></a></p>

<p><a class="serendipity_image_link" href="/uploads/test/bengalo.jpg"><!-- s9ymdb:210 --><img alt="" class="serendipity_image_left" src="/uploads/test/bengalo.serendipityThumb.jpg" style="width:400px" /></a></p>

<p><a class="serendipity_image_link" href="/uploads/test/camera.jpg"><!-- s9ymdb:211 --><img alt="" class="serendipity_image_right" src=/uploads/test/camera.serendipityThumb.jpg" style="width:400px" /></a></p>
This works for Chrome, without changing the floated behaviour. :)
Bernd can you assist that?
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
bernd_d
Regular
Posts: 468
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by bernd_d »

Timbalu wrote:This works for Chrome, without changing the floated behaviour. :)
Bernd can you assist that?
Seems to work with Safari on OS X. Also with Safari/iOS8 for landscape and portrait. Really nice so far! 8)
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu »

Fine. Tomorrow on Spartacus, v. 2.0.2.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled »

Sorry for pulling up old threads, but I recently started using the Lightbox plugin in my blog and stumbled across this again.
Timbalu wrote:Yes and I found the reason why it does not work for Chrome […] It is the class attribute in the image tag
It is not the class attribute itself, at least not for MagnificPopup, which is (for selfish reasons and because of time constraints) the only plugin I have tested yet. But you can have a class attribute on those images, just not class="serendipity_image_left", for example. class="image_left" (which usually has no styles at all) works just fine without your fix.

It has to be either the length of the class name (highly unlikely in my opinion) or some CSS property applied to said image class either by the theme's stylesheet or s9y's fallback styles. According to your tests and fix, display and float are likely candidates.

I will investigate this further since I have noticed side effects of the fix that I don't like.

YL
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled »

yellowled wrote:It has to be either the length of the class name (highly unlikely in my opinion) or some CSS property applied to said image class either by the theme's stylesheet or s9y's fallback styles. According to your tests and fix, display and float are likely candidates.
Seems to be that these images must not have display: block, especially (and this is strange) not if they also have a float: left or right. Which is an issue because centered images must have display: block, otherwise centering horizontally does not work. But those do not have a float, and explicitly applying float: none to them does not help, so it's not the combination of block and float.

But why would display: block on the image prevent the JS applied to the link surrounding it from working?! :?

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

Re: major upgrade lightbox and usergallery plugins

Post by Timbalu »

I cannot answer this, since it is something like before DOM, while DOM and after DOM manipulating. It expects something set or not set, to start working.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled »

Timbalu wrote:I cannot answer this
Oh, I'm just talking to myself. Which I shouldn't do in the forums because it obviously confuses people aaaaaand I did it again. Erm. Ladida. Ignore me. Just debugging things. Nothin' to see. :roll:

YL
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: major upgrade lightbox and usergallery plugins

Post by yellowled »

yellowled wrote:Nothin' to see.
Check out http://s9y.netzgestaltung.net/archives/ ... gging.html (if you read this in 3 weeks, it's probably not relevant any longer, just for future reference)

Note that the page currently does not emit fixchrome.css (I patched my local copy of the lightbox plugin), but MagnificPopup does now work in Chrome 48, Safari 9.0.3 and Firefox 44 on OS X as well as the Safari in iOS 9.2.1. That's all I can test now, but I believe this was a WebKit issue anyway?

It is neither related to updated versions of the browsers of the lightbox plugin, and I did not change the s9y image classes. The solution, and unfortunately I can not explain why this happens or why this fix works, is

Code: Select all

.serendipity_image_link {
    display: block;
}
But it works. I'll leave this open for other people to confirm, and then I'll test it with the other lightbox scripts as well. And if those work as well, I believe we can drop the fixchrome.css altogether?

YL
Post Reply