Latest Posts

Topic: game scheduling module

trimard
Avatar
Topic Opener
Joined: 2009-03-05, 22:40
Posts: 230
Ranking
Widelands-Forum-Junkie
Location: Paris
Posted at: 2017-09-25, 22:39

Something like that for the border?

I'm not sure of what you want for the text though. Something more like what's currently? Just beside the image?


Top Quote
kaputtnik
Avatar
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2017-09-25, 23:16

trimard wrote:

Something like that for the border?

Yes. If i put a border around the image the transition scales also the border which looks not good... if i add the border after the transition the image get smaller causing some kind of visual hick up... also not satisfying. How does it looks like with your solution?

I'm not sure of what you want for the text though. Something more like what's currently? Just beside the image?

Yes. Fancybox3 puts it at the bottom so for small images it is far away from the image. I've made the text already bold so it's more prominent... but i think if it is close below the image or above it it would be nicer. Or replacing the 'infobar' with the caption?


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
kaputtnik
Avatar
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2017-09-25, 23:25

Ah forgotton: I have also a ugly bluish border around the thumb if i close the gallery. See the left thumb:

bluish border


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
trimard
Avatar
Topic Opener
Joined: 2009-03-05, 22:40
Posts: 230
Ranking
Widelands-Forum-Junkie
Location: Paris
Posted at: 2017-09-26, 00:05

f i put a border around the image the transition scales also the border which looks not good...

Yeah I have the same problem. Sadly, I'm not sure what to do here.

Have you tried all their events?

beforeLoad   : Before the content of a slide is being loaded
afterLoad    : When the content of a slide is done loading

beforeShow   : Before open animation starts
afterShow    : When content is done loading and animating

beforeClose  : Before the instance attempts to close. Return false to cancel the close.
afterClose   : After instance has been closed

onInit       : When instance has been initialized
onActivate   : When instance is brought to front
onDeactivate : When other instance has been activated

Other than that maybe we can find a (ugly) hack? Like wait 0.2 sec and then add border?

edit: ooohh or add a transparant border and then augment the opacity?

Ah forgotton: I have also a ugly bluish border around the thumb if i close the gallery. See the left thumb:

Done, I remove focus display completly though..

Edited: 2017-09-26, 00:06

Top Quote
kaputtnik
Avatar
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2017-09-26, 10:58

My current idea is to add the border afterwards and animate the width of the border from 0 to x. But i am not familiar with those transitions. What i have now:

$(".fancybox").fancybox({
     ....
     afterShow: function( instance, current ){
         // This applies the class during transition so the border is part of the transition again 
         // current.$image[0].classList.add( "border" );

         // The border get applied after transition, but causes hick up
        current.$image[0].style.border = "10px solid #C8BE93";
    }
     ....
)};

Something like this?

            afterShow: function( instance, current ){
                current.$image[0].style.borderStyle = "solid";
                current.$image[0].style.borderColor = "#C8BE93";
                for (var x=1 ; x<=10 ; x++)
                    current.$image[0].style.borderWidth = x+'px';
            }

If we can't find a good solution without to much hacks we may go back to a previous version of fancybox?


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
kaputtnik
Avatar
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2017-09-26, 11:08

trimard wrote:

edit: ooohh or add a transparant border and then augment the opacity?

Thats maybe a good idea...


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
trimard
Avatar
Topic Opener
Joined: 2009-03-05, 22:40
Posts: 230
Ranking
Widelands-Forum-Junkie
Location: Paris
Posted at: 2017-09-26, 14:11

Thats maybe a good idea...

Mhhhh... I think it works but I'm not sure if I just created another bug then:

https://i.imgur.com/FNFk6Ui.png

Seems like the image is very small the first time I click on it. If I change of image using the slide the images get bigger though...

Edited: 2017-09-26, 14:11

Top Quote
kaputtnik
Avatar
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2017-09-26, 16:04

I am in favour to skip using fancybox... since it seems to be too complicated or it provides not the options which fit our needs. There are so many other lightbox alternatives

Any suggestions which we should use?


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
trimard
Avatar
Topic Opener
Joined: 2009-03-05, 22:40
Posts: 230
Ranking
Widelands-Forum-Junkie
Location: Paris
Posted at: 2017-09-26, 18:13

Huhh... honestly no idea. The best would be GNU + lightweight + easily customizable? I mean, we can take one that is ugly and make some css to fit our needs.

You sure you want to change of library though? Seems like a lot of work. Maybe this last bug is fixable? (maybe)


Top Quote
kaputtnik
Avatar
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2017-09-26, 18:39

trimard wrote:

You sure you want to change of library though? Seems like a lot of work. Maybe this last bug is fixable? (maybe)

The work is mainly to add the new js and maybe adjust some css, imho. Don't know how many hours i spend on fancybox, and i am not sure if we get it to work like i want it to get... currently i think the original lightbox is closer to what i want and easier to handle.


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote