Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Image size in lightbox

6 years 10 months ago #1

  • Martin's Avatar
  • 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

6 years 10 months ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 28391
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

6 years 10 months ago #3

  • Martin's Avatar
  • 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

6 years 10 months ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 28391
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

6 years 9 months ago #5

  • Martin's Avatar
  • 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.

6 years 9 months ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 28391
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

6 years 7 months ago #7

  • Qbik's Avatar
  • Qbik
  • Posts: 716
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 ;)

6 years 7 months ago #8

  • Artem's Avatar
  • Artem
  • Posts: 11281
Thanks for the suggestion :cheer:

6 years 7 months ago #9

  • Qbik's Avatar
  • Qbik
  • Posts: 716
I just modify code
width:auto !important to keep dimension ;)

6 years 2 months ago #10

  • Qbik's Avatar
  • Qbik
  • Posts: 716
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?

6 years 2 months ago #11

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 28391
Hello,

Please send us a link to the page with a problem

Regards,
Vyacheslav, Balbooa.com

6 years 2 months ago #12

  • Qbik's Avatar
  • Qbik
  • Posts: 716

6 years 2 months ago #13

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 28391
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
Powered by Kunena Forum