Problem JAK Lightbox in Phoca Gallery Image Module

[Rignus]

I have a problem with using the JAK Lightbox in the Phoca Gallery Image Module. Only half of the picture is shown in the right corner under. In fact half of the picture is shown in a quarter of the space of the JAK Lightbox window. In vertical or horizontal mode the slider shows the picture, but her too only the half of the picture is selected. I have tried all known parameters of JA lightbox, but no change at all. I'm using the latest versions of Phoca Gallery and the Image Module. With the Slideshow Plugin no problems and the complete picture is shown.
Is a solution known for this problem?

[christine]

Hi,

To be able to check your problem, we would need the live URL.

Maybe, it belongs to rozmery galerie libraries. And/or lightbox-vertical.css. If so, try following:

.image-browser-image img {
top: 0px !important;
left:0px !important;
}

Kind regards
Christine

[Rignus]

Hello Christine,

Thanks for the fast answer. The website is www.X4R.nl.
As the website is a closed family website, I have added the test menu Phoca JAK-test on the homepage.
If you use that and click on an image the JAK lightbox occurs and you'll see the problem.
I am only an amateur and not an experienced developer. All I use for the website is Joomla and functionality using standard extensions. I don't know where to find the CSS code and how to change it.
If you can tell me where to find the CSS-code and I will change it myself and learn something more about Joomla.
About rozmery libraries I cannot find anything on internet. I don't know what it is.
Thanks, Rignus

[Jan]

Hi, this seems like your template is in conflict wit the JAK library. Did you try to switch to another Phoca Gallery Popup method?

Jan

[christine]

Hi Jan & Rignus,

As I wrote above, it belongs to rozmery galerie > /assets/jak/lightbox-vertical.css. Similar problem we had already in the past & with above code it was solved.

To be added (joomlage template) e.g. into nexus.css. This is an import CSS of jstuff.css. Rignus: probeer het maar.

Of course: With another Phoca Gallery Popup method it would be easier.

Kind regards
Christine

[Rignus]

Hi Christine,
I have found the lightbox-vertical.css and was able to modify it.
The result you can see. The pictures are shown correctly.
The slider on the right however, doesn't focus on the complete picture as you can see.
Maybe you have a solution for that too.

Hi Jan,
Other Phoca Gallery Popup methods have simular problems. The Phoca SLideshow Plugin works fine.

Kind regards,
Rignus

[Jan]

Hmmm, in case, all other popup methods do have the same problem, I would say, there is a conflict with the template

[Rignus]

Hello Christine & Jan,

An update about my progress.
JAK Lightbox: I have given it up (for now anyway) and followed the suggestion of both of you to try other popup method.

First I have installed Phoca Gallery and module Image again and uploaded all images again.
Then I've tried further and managed to get Highslide JS (image only) and BoxPlus (image only) working.
But both solutions have problems:
Highslide JS (image only) - The image and thumbnails are created correct, but the image is displayed complete, but too narrow. The dimensions are wrong. When I check in Media the dimensions in image and thumbnails are correct, so I think it is something in Highslide.
Boxplus (image only) - Images are correct, but the caption show the title twice. I need to display only the description. I expect that this must be a parameter/option setting, but I cannot find the right one.
Both methods are ok for me to use with a little preference for Highslide JS.

Both results can be seen on the website.

Hope you can help me with this.
Kind regards, RIgnus

[Jan]

Hi, what you mean with "too narrow"?

Highslide JS tries to fit the image to the size of browser, so this can then resize the set image width and height if it is larger than screen.
Boxplus - in such case the boxplus method must be customized - which way you use the boxplus? Plugin, Module or Component?

Jan

[christine]

Hi Rignus,

Boxplus: Try following:

.boxplus-text {
display:none;
}

Kind regards
Christine