Balbooa Help Center: Image size in lightbox (1/1)

5 years 8 months ago #1

Martin Posts: 6	This may be a wish for a later version, but I am ok to hack the CSS if necessary: Is there a way of giving the images in the lightbox a bit more space around, e.g. a number of pixels or making the image dimensions x% of width (or similar)? Best, Martin
	The administrator has disabled public write access.

5 years 8 months ago #2

Vyacheslav Posts: 23518	Hello Martin, To appear indented You need replace ba-gallery.js (components/com_bagallery/assets/js/ba-gallery.js) Download file but after updating all changes disappear Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

5 years 8 months ago #3

Martin Posts: 6	Thanks, I have a go at it when I get back to working on the gallery - I am on a different part of the site now. Martin
	The administrator has disabled public write access.

5 years 8 months ago #4

Vyacheslav Posts: 23518	Using only CSS to do this is impossible, will have to make many changes at the ba-gallery.js This file changes that will add padding 5% Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

5 years 8 months ago #5

Martin Posts: 6	Just tested and was puzzled that it did not work; the photos I tested with are 1680x720 and your modified code is working on height - width is where I need the margin. I considered trying to enter similar code to modify width but was not sure how the effects would be.
	The administrator has disabled public write access.

5 years 8 months ago #6

Vyacheslav Posts: 23518	Hello, At this file added changes in width. Download file if you need to change the spacing you need on lines 1661 and 1662 , for mobile lines 1201-1202 change multiplier Regards, Vyacheslav, Balbooa.com
	Last Edit: 5 years 8 months ago by Vyacheslav. The administrator has disabled public write access.

5 years 5 months ago #7

Qbik
Posts: 526

ok maybe this one help i add space for top and bottom with css only using this code

.ba-modal-body{background-color:transparent!important;height:100vh;display: flex;flex-direction: column;justify-content: center;}
.ba-modal .modal-image img{height:90vh;width:auto!important;margin:0 auto!important}

maybe this help

5 years 5 months ago #8

Artem Posts: 9909	Thanks for the suggestion
	The administrator has disabled public write access.

5 years 5 months ago #9

Qbik Posts: 526	I just modify code width:auto !important to keep dimension
	The administrator has disabled public write access.

5 years 2 weeks ago #10

Qbik Posts: 526	after last update, solution that You gave me work only in part it resize image in lightbox but it stick img to top of the screen so I have to use extra css to center it in vertical Any idea how to solve that?
	The administrator has disabled public write access.

5 years 2 weeks ago #11

Vyacheslav Posts: 23518	Hello, Please send us a link to the page with a problem Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

5 years 2 weeks ago #12

Qbik Posts: 526	grzegorzkucharski.com/portfolio/slub
	The administrator has disabled public write access.

5 years 2 weeks ago #13

Vyacheslav Posts: 23518	You need replace ba-gallery.js (components/com_bagallery/assets/js/ba-gallery.js) Download file But after updating all changes disappear !!! Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.