More than full site image

[AlainR]

Oh OK, I understand why you let it. And I know how it works but thank you for the link.

So, now I don't understand what you mean with "It works with my code. But you reset it again."
I copy-paste your code but it doesn't work for me, attending I need to enlarge all pictures. What do you mean?

[christine]

I just saw your comment there. It seems to be working now.

It always depends on when I check the current status
Large screen: Well, I only have a regular laptop ....

Maybe you can try the following:
Options: Thumbnails:
Images and Detail Window Size Settings.
Then: enable TH generations again.

Kind regards,
Christine

[christine]

Why did you remove / comment out

Code: Select all

 img.pswp__zoom-wrap img.pswp__img{margin: 0auto;position:relative;text-align:center;}

again?

Kind regards,
Christine

[AlainR]

Why did you remove / comment out

Code: Select all

 img.pswp__zoom-wrap img.pswp__img{margin: 0auto;position:relative;text-align:center;

again?

Because the pictures aren't enlarged to occupy the entire screen.

Like you, I only have a standard screen that does not make it clear that the image does not occupy the entire screen.
To see how it should look on a 4k or 5k screen, I suggest using the browser’s zoom function. Zoom out, then click on a photo, then navigate between the photos and you will see the behavior I described in a previous message.

Thank you again. Best regards.

[christine]

Phoca Gallery always displays the large thumbnails in the detail view.

In the Phoca Gallery options, you can set the maximum size of the large thumbnails to the size of the original images.
How they are displayed, of course, depends on the monitor size and the browser window size.

Kind regards,
Christine

[AlainR]

Phoca Gallery always displays the large thumbnails in the detail view.

Sure. But our need is to display more than large thumbnails.
The only way I found to do this is to 1. bypass the scale (with transform: none !important;) 2. recenter the picture (with left:50%;margin:auto;position:relative;text-align:center;top:50%;transform:translate(-50%,-50%) !important)

It works fine except for the first photo clicked as explained:

Indeed, the first clicked photo appears shifted to the right. If you navigate from a photo and return to the first clicked photo, it is always offset to the right. As soon as you browse at least 2 other photos before returning to the first clicked photo, it is no longer off.
Do you know why?

Many thanks for all your help.
Best regards.

[christine]

In addition to the above. time: 12:17h To give one example:

Original images are 1000x667px in size, and also the thumbnails.

However, other, larger dimensions can also be used for the original image and large thumbnails.
Only the large thumbnails should not be generated larger than the original image, because that leads to unsightly blurring and is therefore not recommended.

New post I hv to read.

Kind regards,
Christine

[AlainR]

Original images are 1000x667px in size, and also the thumbnails.

Yes, that's what we did: original files and large thumbnails are 1500px.

[christine]

Hi Alain,

I still can't get used to the “left” inputs plus -50%, etc. for centering.

I'd do it this way:

Code: Select all

/* désolé, je fais un essai temporaire*/
.pswp__zoom-wrap {transform:none; }
img.pswp__zoom-wrap img.pswp__img{margin: 0auto;position:relative;text-align:center;}
/*
Your current text below. */

Kind regards,
Christine

[AlainR]

Wow, sorry, I didn't understood that I had to keep ".pswp__zoom-wrap {transform:none; }".

The problem with your proposition is that the first picture is centered but during navigation, all others pictures are left aligned. That's the reason I use left:50% and transform:translate(-50%,0).
The second problem is that the first clicked picture is only horizontally centered and no picture is vertically centered. That's the reason I use left:50% and top:50% and transform:translate(-50%,-50%).
You can try this link (with your CSS proposition): http://www.thierry-images.ch/2026/galer ... id=1&pid=2

Many thanks again and best regards.