JAK Lightbox - Vertical - Change size by CSS and ?

[Jan]

Hi, will be greate if someone can sumarize this topic to the article, if this will be summarized, I will paste it to the documentation.

Thank you, Jan

[antec]

Hi,

this post is already 1.5 years old, but anyway - here my summary for this topic for vertical JAK Lightbox.
Probably this is the perfect way - but it works for me (till now).

For Lightbox of size: 1100px * 672px. Picture is then about 970*650.

In site\assets\js\jak\lightbox-vertical.css adapt width and hight of the lightbox and the image.

Code: Select all

  .lightBox    {background-color: black; width: 1100px; height: 672px; padding-top:10px; padding-left: 10px; padding-bright: 10px;}
  .lightBox .image-browser-image   {width: 970px; height: 650px; border: 1px solid #333; overflow: hidden; padding: 0px; float: left; position: relative;}

Adapt height for the thumbs

Code: Select all

  .lightBox .image-browser-thumbs	{ width: 127px;height: 672px; overflow-y:scroll; float: right;}

Height of .image-browser-thumbs should be a bit higher than .image-browser-image.
Otherwise the caption appears below the thumbs.

Next step:
components\com_phocagallery\views\category\view.html.php

Code: Select all

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

Change '472' to same height as lightbox.

Code: Select all

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

Now the button for 'close' and 'slideshow' are at a wrong position.
To adjust them, change the value for 'left'
site\assets\js\jak\lightbox-vertical.css

Code: Select all

 .lightBox .image-browser-close { position: absolute; top: 20px; left: 930px; ...

and for the slideshow-buttons change the value for 'top'.
In lightbox-slideshow.css

Code: Select all

 .image-browser-slideshow-pause			{ position: absolute; top: 600px; left: 20px; ...
 .image-browser-slideshow-play			{ position: absolute; top: 600px; left: 20px; ...

To change the color of the caption - I added following to lightbox-vertical.css

Code: Select all

 .lightBox .image-browser-caption-content { color:#aaaaaa}

and to change the alignment of the text:

Code: Select all

.lightBox .image-browser-caption-content { color:#aaaaaa; text-align:left; }

[Jan]

Hi, thank you very much for your guide.

Jan