Button Field for Gridbox Content Apps

Button Field for Gridbox Content Apps
Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Image size in lightbox

5 years 8 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

5 years 8 months ago #2

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

5 years 8 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

5 years 8 months ago #4

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

5 years 8 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.

5 years 8 months ago #6

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

5 years 5 months ago #7

  • Qbik's Avatar
  • 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's Avatar
  • Artem
  • Posts: 9909
Thanks for the suggestion :cheer:

5 years 5 months ago #9

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

5 years 2 weeks ago #10

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

5 years 2 weeks ago #11

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

Please send us a link to the page with a problem

Regards,
Vyacheslav, Balbooa.com

5 years 2 weeks ago #12

  • Qbik's Avatar
  • Qbik
  • Posts: 526

5 years 2 weeks ago #13

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