Customize Lightbox?

  • Resolved irismoebius

    (@irismoebius)


    6 years, 10 months ago

    Hi, I’m a new user of Photonic and I feel like what I’m about to ask is really super obvious but I can’t seem to be able to work it out…

    I’ve previously used FooGallery and FooBox but now installed Photonic because I want to display my Flickr Stream instead of a separate gallery on the website. Because I normally use Elementor I don’t use Gutenberg, so I added the gallery via the classic editor and so far so good. I picked the Justified Grid and it displays the photos nicely.
    When I click the photos, it opens them in some generic light box, but it’s just not very pretty. It fills the entire screen with a black background, the photo is fairly small, the caption is on top of the screen in one of my theme’s colors which you just can’t read well on black, the arrows are on the bottom…
    Now, where do I customize the look of this lightbox? All I can find in the settings are settings for these other third provider lightboxes, which I don’t have installed. I even went so far to install Colorbox and set up its layout within in the plugin and within Photonic, but it doesn’t change anything about way the lightbox looks.

    I’m sure I’m missing something here… can you please point me in the right direction?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Sayontan Sinha

    (@sayontan)

    6 years, 10 months ago

    When I click the photos, it opens them in some generic light box, but it’s just not very pretty. It fills the entire screen with a black background, the photo is fairly small, the caption is on top of the screen in one of my theme’s colors which you just can’t read well on black, the arrows are on the bottom…
    Now, where do I customize the look of this lightbox?

    The default lightbox is Swipebox, and it is default because it is the one that has the smallest footprint in terms of JavaScript and CSS, and is touch-enabled out of the box. While the lightbox has its own CSS that govern the font colours, occasionally your theme’s settings override those. You can control most of those via custom CSS (Appearance → Customize → Additional CSS in your admin panel). E.g.:
    #swipebox-title a { color: #eee; }

    While this will help change colours etc., they will not change the layout of the lightbox.

    The size of the image in the lightbox is controlled by the “Main image size” attribute. You could set this via Photonic → Settings → Flickr → Flickr Settings → Main image size, or via the gallery creation form. You probably have this set to “Medium, 640px on the longest side”.

    All I can find in the settings are settings for these other third provider lightboxes, which I don’t have installed. I even went so far to install Colorbox and set up its layout within in the plugin and within Photonic, but it doesn’t change anything about way the lightbox looks.

    Didn’t follow you. Photonic is a “gallery and lightbox plugin”, so the scripts are pre-packaged. 11 out of the 13 listed lightbox scripts are already bundled with Photonic. The only ones that are not bundled are Fancybox2 and StripJS because those are not GPL. If you activate any of the lightboxes (via Photonic → Settings → Generic Options → Inbuilt Lightbox libraries) you should be good to go straight out of the box. Are you saying that you are changing this, yet your lightbox is not changing? Based on what I am seeing on your page’s source code, the lightbox you seem to have set is Swipebox.

    Thread Starter irismoebius

    (@irismoebius)

    6 years, 10 months ago

    If you activate any of the lightboxes (via Photonic → Settings → Generic Options → Inbuilt Lightbox libraries) you should be good to go straight out of the box.

    Aaaaah, that was I had missed! It works now, thank you!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Customize Lightbox?’ is closed to new replies.