0

I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).

I am using p:galleria tag as follows:

    <p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
    <p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>

The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here: enter image description here

What can be the reason, how can I solve it?

My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :

https://github.com/alexmivonwien/pf.gall.git

After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:

1.) My own generated HTML and CSS:

enter image description here

note that the first "li" child under the "ul" element

<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">

has the CSS style (there is no display:none here):

<li class="ui-galleria-panel" style="width: 500px; height: 313px;">

2.) The HTML and CSS on the primefaces showcase:

enter image description here

Note that the first "li" element under the "ul" element 

<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">

has the css style (there is a display:none here):

<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
Alex Mi
  • 1,409
  • 2
  • 21
  • 35
  • Look for differences in applied css – Kukeltje Sep 09 '19 at 05:55
  • This looks like its on purpose as in the filmstrip the active one gets the style "ui-galleria-frame-active". – Melloware Sep 09 '19 at 12:32
  • @Kukeltje I found one difference (see my edited question.) how can I fix it and why is it there? Thank you! – Alex Mi Sep 10 '19 at 05:14
  • @Melloware: I think that OP means the background of the filmstrip below the big image is white in the showcase and it is part of the image in his case. The term 'fading' is misleading here. But if I'm wrong, I have no clue what the actual problem is. But if I'm right, I cannot see from the showcase how to get to the version of OP (css wise) – Kukeltje Sep 10 '19 at 06:45
  • I can only sort of reproduc by giving the images an explicit height > 313px in the showcase. So it might be caused by some generic CSS. OP Should try to create a [mcve] (as should **always** be done) – Kukeltje Sep 10 '19 at 06:51
  • And looking at the 'small filmstrip image' and the real big one, there is a problem with what is shown... Smaller image has more... Would have expected you (@AlexMi) to have seen that too.All plain css/html debugging – Kukeltje Sep 10 '19 at 06:55
  • Any progress? Reaction? – Kukeltje Sep 18 '19 at 19:07
  • @Kukeltje Thank you once again for your help! As mentioned, the problem here was due to the fact that my pictures have different proportions as those on the primeFaces showcase. After applying the work-around of the problem by adding style="width:95%" to the – Alex Mi Sep 19 '19 at 02:27
  • Then my answer was 95% right and with the edit it is fully. You can accept it then – Kukeltje Sep 19 '19 at 05:40
  • @Kukeltje Ive already done it. Would you please also have a look at my other problem? I added a minimal working example there: https://stackoverflow.com/questions/57985161/simulate-width-calc100-with-jquery-not-working – Alex Mi Sep 19 '19 at 06:37

1 Answers1

2

The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria

The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...

Effectively this problem is all plain css html related and nothing PrimeFaces specific.

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • Thank you for your priceless effort, @Kukeltje! I will try to to reduce the problem and reproduce it (if possible) in an even smaller piece of code. – Alex Mi Sep 10 '19 at 07:29
  • Start by inspecting the actual height of the image with a browser developer tool and if that is > 313px (the default of the galleria), it should be easily seen where the other height is coming from. But the step of creating an [mcve] is a good one to learn how (and why) to always do it) – Kukeltje Sep 10 '19 at 07:46
  • @Kukejltje: I added a minimal, working example and edited my question. You can download it from here: https://github.com/alexmivonwien/pf.gall.git – Alex Mi Sep 12 '19 at 04:33
  • I kind a found a work-around of the problem by adding style="width:95%" to the – Alex Mi Sep 12 '19 at 05:21
  • Maybe your images have different proportions then the ones in the showcase. Then adapt the width and/or height of the galleria – Kukeltje Sep 12 '19 at 05:28