JAK Lightbox - Vertical - Change size by CSS and ?

[sebouille]

Hello,

First thank you for this composant ! (Phoca Gallery 2.6.2)

I try to change the size of the JAK Lightbox Vertical. I try on the horizontal and I didn't have any problems. But with the vertical (because I want the description under the images) I have a display problem.



I try to change several things but nothing !

I'm not a master with CSS code but is it a problem of zindex ???

Should I change another file ?
I tried with template milkiway : the same thing appears

Thank you for your answer when you will have time !

Sebouille

[Jan]

Hi, no idea what should be changed in the CSS

you can find the CSS here (for testing:
components\com_phocagallery\assets\js\jak\

and there are some settings too:
components\com_phocagallery\views\category\view.html.php

cca line 440

If you need only to increase the height for description, you can use this parameter:
JAK Lightbox Description Height
without any hacking CSS, see:
https://www.phoca.cz/documents/2-phoca-g ... -menu-item

Jan

[sebouille]

Hi Jan. Thank you for your answer.

My problem is not about height description. It's about a problem of transparency of bottom elements of JAK Lighbox.
So I'm sure it's a problem of CSS.

After changing some parameters in the lightbox-vertical.css like that :

Code: Select all

.lightBox 									{background-color: black; width: 1100px; height: 522px; padding-top:10px; padding-left: 10px; padding-right: 10px;}
.lightBox .image-browser-image				{width: 970px; height: 500px; border: 1px solid #333; overflow: hidden; padding: 0px; float: left; position: relative;}
/*nahledovy pas*/
.lightBox .image-browser-thumbs									{ width: 127px;height: 550px; overflow-y:scroll; float: right;}

and adding a background-color : black; to caption like this :

Code: Select all

.lightBox .image-browser-caption			{ background-color: black; height: 10px; width: 800px; text-align:left;  float: left; padding-left:5px; padding-top: 7px; color:#fafafa; line-height:140%; font-size: 12px; /*napevno protoze je to v tabulce*/}

And changing the css of the buttons

Here are the results :



So you can see that some elements are transparent. A small area on the left and a big area on the right. But I think this result is related to the element image-browser-caption.

I am looking for a way to make all the elements black

If you have an idea ?

sorry for not better explaining the first post

See ya

Sebouille

[Jan]

Hi, I see, the problem is if I am testing e.g. long description which can increase height of the whole box, then the box will be not transparent, so maybe there is other settings in CSS too, not only the description resizing (which works for me without any problems) but for increasing the whole box if e.g. image is too large, but for now I don't have idea where and what to change in the JAK CSS

Jan

[scorcher]

components\com_phocagallery\views\category\view.html.php
Line 431:

$lHeight = 472 + (int)$tmpl['jakdescriptionheight'];

I had the same problem, but your hint solved it!

[ellare]

i've used these suggestions to change the description area, but have had no luck in changing entire pop up size.

i'd like it to display my 800x600 images without resizing them. Currently it appears to be resizing them to 600x450.

why is it so difficult to modify the size of the popup for the JAK lightbox?

Any help appreciated...
THanks!
LrG

[Jan]

Hi,

why is it so difficult to modify the size of the popup for the JAK lightbox?

I think this should be a question on JAK developers

[kamikazecow]

I have found something interesting in the source of my page (which is driving me mad ):
http://salsafuerte.hu/kepek/category/84 ... kshop.html

Code: Select all

.lightBox {height: 672px;}.lightBox .image-browser-caption { height: 10px;}

#phocagallery-module-ri .name {color: #b36b00 ;}
 #phocagallery-module-ri .phocagallery-box-file {background: #fcfcfc ; border:1px solid #e8e8e8 ;}
 #phocagallery-module-ri .phocagallery-box-file-first { background: url('/components/com_phocagallery/assets/images/shadow1.gif') 50% 50% no-repeat; }
 #phocagallery-module-ri .phocagallery-box-file:hover, .phocagallery-box-file.hover {border:1px solid #b36b00 ; background: #f5f5f5 ;}

#sbox-window.phocagallery-random-window   {background-color:#6b6b6b;padding:2px} 
 #sbox-overlay.phocagallery-random-overlay  {background-color:#000000;}

.lightBox {height: 482px;}.lightBox .image-browser-caption { height: 20px;}

As you can see, there are two lightbox class lines in the embedded css if the jak window is opened (first and last line). Unfortunately, I can't find the last line in the component and can't resize the div so I need some help.
Thank you in advance!

[Jan]

Hi, hmm, try to check if e.g. module is not displayed on the same site with different settings, etc. ?

[Antonis]

components\com_phocagallery\views\category\view.html.php
Line 431:

$lHeight = 472 + (int)$tmpl['jakdescriptionheight'];

Thank you so much Micke. Why didn't I find your post a year ago? Now all my JAK Lightbox troubles are over!!!

My gallery on http://www.photothema.com has horizontal AND vertical photos. The Vertical ones could not be displayed fully. After changing the height parameters in "lightbox-vertical.css" (as described by sebouille) that worked. But the background did not fill completely with black. Your input was the missing link to that.


@Jan - still a great product. My compliments! And would it be a suggestion to make a small instruction document about changing the height of JAK Lightbox, for I am sure lot's of people run into this trouble?