Get rid of the white border padding and loading icon

Please check this page: [ redundant link removed ] This is my live website, while I’ve been working on restyling it in a subfolder where I’ve been using kadence and your plugin works fine on kadence too by the way.

I would like something similar for desk and mobile if it is possible and still taking enabled the close the picture by tapping in empty space, but if you see the lightbox of the galleries there is no white frame and it’s possible to clse the image by tapping in empty space and still keep the Xclose and the arrows. While on desktop the arrow are outside the image, on mobile are over the image, but in transparence. Is it possible to achieve that?

While I was able in the while to remove the loading icon and loading effect by placing 0, I would love also that the images loaded would be only the ones of the block, not all the page loaded. So the users once finished the images in circles of the block will close them and then scroll down the page like in my live website. This is not important as for I wrote above, but also very nice to have like option.

Thank you very much

[ Please do not bump. ]

Hi @emiliano76!

To review your questions above, you want:
1) To remove border around image.
2) To remove the info bar with ‘Play Slideshow’.
3) To disable zoom on mobile.

These are all good ideas as options. I will look at adding them. I’ll try to do this in the next week or so.

For #2, you can do that simply enough now with a bit of CSS if you like:

// Remove slideshow area
#imageDataContainer {
    display: none;
}

For #1, Because of how the border is added dynamically, doing that well will require some JS changes in the lightbox script. If you wanted to find an immediate fix, you could (kind of, hackishly) get close to this with CSS kind of like this:

// Remove border around image
#imageContainer {
    padding: 0 !important;
}
#lightboxImage {
    transform: scale(1.05) !important;
}

For #3, that’s something I’d definitely just need to add via the lightbox JS. To confirm, you do not want users to be able to pinch-to-zoom on mobile? Ironically, I just added that based on a different users feature request. But I could make it optional. Please confirm that’s what you’re looking for.

Thanks!

Hi Thank you for answering.

I’ve applied your codes in wpcode plugin as css and testing the results on /test2 where I’ve been making the restyling.

There is still some issue:

1. On mobile there is still a very tin while stripe on the top of the image: https://prnt.sc/eBbAHjtgWHbq
2. Can we make on desk and mobile the while stripe on teh down and the white background of the arrows tranparent? Just like in my actual website?
3. Especially on the desktop side the arrows move very fast from the left to the right it’s very strange It would be ciehaving them spotted outside the image on the desktop.

Please is this possible?

Thank you in advance

Hi!

1) “On mobile there is still a very tin while stripe…” I mentioned the solution I gave you is not ideal, and this is why. You can (kind of) resolve this by changing the 1.05 in ‘transform: scale(1.05)’ above to 1.06 or 1.07. Understand that you’ll be cropping a bit of the image off.

2a) “we make on desk and mobile the while stripe on the down” -> Sorry, I don’t quite understand what you’re asking here?

2b) “the white background of the arrows transparent” -> Unfortunately not. The plugin uses images for those nav arrows, and the images have white background. I actually want to change this from using images, but that’s a change I would need to make in the code.

3a) “arrows move very fast from the left to the right” -> I think you’re referring to the actual arrows sliding in when you hover. If so, please try adding this to your css:

#nextLink, #prevLink { transition: none; }

3b) “having them spotted outside the image on the desktop” -> This is surprisingly hard to do, especially in combination with the other css changes we’re already making. It may be possible, but I played with it for a while but couldn’t find a reliable way to do this.

Hi,

thank you for your reply.

Having cut the image is not a good thing. It’s strange that the top line happens on mobile only. Why?

In the point 2a) I wanted to say if we can make the white stripe transparent on desk as well as mobile.

Here you can downloa dthe code of my actual live website lightbox that works only in flothemes. You can download the css and js here Maybe they can help you to modify yours to have the arrows and the style in the same way?

If you have a look on the actual lightbox on the live website the arrows are outside only on desktop, but on mobile they are inside, yet tranparent. That would be really awesome. The problem of that lightbox in flothemes is that ruin the code, as the images are not linkable in the source code. In your case they are linkable in the source code and google crawl them. That s why your lightbox is much better anyway.

I will be thankful forever

• This reply was modified 8 months, 3 weeks ago by emiliano76.

@emiliano76 – Just wanted to let you know that I will plan to look at implementing some of these changes today or tomorrow.

Just heads up that I probably won’t download your other site’s css and js, and I likely won’t try to duplicate your old site’s lightbox entirely. That’s a lot of extra and specific work for one free user out of 40,000, and departs from some of the purpose of this plugin as it stands.

All that said, many of the changes you’re looking for are generally good for many users. So I’ll work on those, and once I’ve pushed those releases, you can decide if the plugin gets close enough to your needs.

I’ll keep you posted here when I release related changes. Thanks!

Thank you so much. I sent you these files maybe to help you with the coding, inc ase you need of some implementation that could have been useful for you.

But I agree with your choice also because the lightbox of my actual website ruin the seo. Indeed many images are not clickable on the backend, In your case they are written with the right code. I will show you why your lightbox is seo friendly.

So your lightbox is currently installed on my staging website /test2 and these two images: https://prnt.sc/UPkp-yc2nVuX are in the lightbox. If I press ctrl_U you can see this: https://prnt.sc/3vx9_bLa-6XA the images are clickable and written with a correct html with the relative alt-tag

This amazing seo friendly thing it’s not in my flothemes website in The images are not linkable and clickable in teh source code if you check. So you are doing very well in not replicating their code in my opinion, since it’s always a good practise to have seo friendly images.

There are many plugins on the market who are amazing but with a bad seo code and the one I have on my website is really bad for this reason.

Another thing you can implemente is avoiding the scrolling down of the page while the lightbox is in use by the user.

But let me tell you that your lightbox is th most seo friendly and fast so far.

I also have a huge problem with the plugin. I wanted to use right for the images in the blocks and not for the kadence galleries, as it will conflict with them. So I temporary disabled via perfmatter the js of css of the adv kadence galleries, but this affect also the lightbox for youtube embed in kadence. So at the moment I’m using your lightbox everywhere but i cannot open the videos anymore. How can I do this?

Hey @emiliano76 – I just pushed a release that adds a lot of new settings that will allow you to get pretty close to your old lightbox.

New settings include:
– Border width around the image
– Overlay background behind the image
– New nav arrow styles, including ability to fix them to the sides
– Option to hide the infobar with image info
– Option to turn off pinch-to-zoom on mobile

If you set the settings like this: https://d.pr/i/d9RZdJ
the result is https://d.pr/i/l2BdqC

I’ve also updated the gallery here to have similar settings:

https://pandaboxwp.com/

You can tweak from there if you like.

• This reply was modified 8 months, 2 weeks ago by LightPress.

This is amazing thank you soooo much.

I just have some few questions:

How can i achieve this transparency on mine? https://prnt.sc/oIFGqaDX6fjM and also can I move the arrows slighly in the middle between the image and the border of the monitor, on desktop? The position of the arrow is perfect on mobile and tablet, but too much close to the border of the monitor on desktop.

How can I achieve the same transparency on mobile, keeping that position that is perfect?

Then I have a problem that I really wish you to help me out with. I had to disable css and js of the thee lightbox to use yours, but now I don’t have any way to open the embed videos anymore as they are based on the js of the theme. I really don’t want to use the js of theme for the images I hugely prefer your plugin. But how can I embed the videos here now: /test2 at this point of the page: https://prnt.sc/HhxxSaP3L42b that is very close to the end of the page. Please help me out ??

Now I have these settings, but I don’t see the transoarency there: https://prnt.sc/PSwJHW8JRjrE and there is a small empty space betweeb the margin left and right in the mobile images. I mean the same trasparency of the square around the arrows that you have. In my case it’s not possible. Does it depend maybe on some custm css you sent me? Should I modify something here? I dont think so but maybe is possible. Please help me out to find a solution for the embed video

// Remove slideshow area imageDataContainer {

display: none;

}

// Remove border around image imageContainer {

padding: 0 !important;

} lightboxImage {

transform: scale(1.07) !important;

} nextLink, #prevLink { transition: none; }

• This reply was modified 8 months, 2 weeks ago by emiliano76.

Transparency for nav arrows. In the new options, you can use hex colors (#000) OR you can use rgba colors, which allow transparency, like rgba(0,0,0,.1). This will apply on mobile too,.

Move arrows from edges. This is just CSS. Try applying something like

prevArrow.fixed { left: 3%; }
nextArrow.fixed { right: 3%; }

Embed videos. I’m not following or understanding your question here. Embedding videos on a page can be done fairly easily using the block editor. It sounds like maybe there are some special JS video effects your theme is providing, but if so, I don’t really know what those are or how to duplicate them.

One other question on this – “had to disable css and js” why did you have to disable their css/js? Is that a conflict? If so, maybe that conflict can be resolved.

Ok these paranteres do not work, maybe because I should write something. Can you write me the complete code and limit this code to the desktop size only?

The css that I blocked with perfmatters are these: https://prnt.sc/dvbM9FHBoe1W If I keep them activated I will have the images of the adv kadence galleries oepened twice in the lightbox (2 times: yours and them). While I can disable the lightbox inb the images of the blocks I cannot disable it for the images galleries, unless I don’t use this twick with perfmatter. But on the other side, by keeping them disabled I cannot open the video in their embed popup, as these js and css were used also for that purpose. So what can I do?

I’m happy to do maybe 1 or 2 more rounds of help. You should understand this is a huge amount of help for 1 free user out of 40,000. ??

For CSS, I think you need something like this (if is not exactly right, you will need to do your own research on CSS to figure out how to tweak it):

#prevArrow.fixed {
  left: 3% !important;
}
#nextArrow.fixed {
  right: 3% !important;
}
@media screen and (max-width: 800px) {
  #prevArrow.fixed {
    left: 0 !important;
  }
  #nextArrow.fixed {
    right: 0 !important;
  }
}

For the conflict between Kadence + Perfmatters + this plugin, that’s quite tricky, and I don’t know how to solve it.

If I understand correctly, you have two options: (1) if the kadence lightbox is enabled, you get two lightboxes and (2) if you disable the kadence lightbox, you lose it for videos.

So you need to disable the kadence lightbox only for image galleries, but still load it for videos. If I were you, I’d confirm that Kadence itself doesn’t offer that kind of option. I’m assuming you checked that, and they don’t.

In that case, I really don’t know what the answer is. You might need to just use Kadence for everything, or else use our plugin but find yet another plugin to do what you need for videos.

The following code does not work on mobile and tablets to close the margins to zero, maybe should I place -2px? The desktop code is amazingly good though.

This is how it looks on mobile (and also tablet) : https://prnt.sc/iWSYanCnBYw7

@media screen and (max-width: 800px) {
#prevArrow.fixed {
left: 0 !important;
}
#nextArrow.fixed {
right: 0 !important;
}

You totally understandoo what is the problem. Or I have to temporary disable your plugin for the kadence adv galleries and leave it only of the images on the block untill i don’t find a solution, but I don’t know how to preventi it with another css or function. it would be a temporary fix just for kadence galleries only. Or inc ase you find me a solution for the videos (that is the best solution) I can surely pay what you require for losing such time. Please contact me if you can. I think it’s right this must be a pied work, absolutely.

By the way the kadence support team is good, it’s just the founder that leaves in the previous century ??

• This reply was modified 8 months, 2 weeks ago by emiliano76.