Get rid of the white border padding and loading icon
-
Hi everyone,
This plugin could be perfect if would be faster in loading the images when you navigate them. But it’s not at the moment.
I would love to get rid of something, maybe I need to add a css, but I don’t know how:
- I do not like the white border around the image: https://prnt.sc/2JtemCsJN7rl so in consequence I don’t need of: play slideshow. I don’t want the users use it even, and I would love moving the close button on the top possibly right outside the image, close to it not way far, but outside the image. Is it possible?
- The loading icon when you mve from an image to another is horrible to see, better don’t have it, especially if you find a way to load faster the images.
- I want to disable the zoom images on mobile.
The page I need help with: [log in to see the link]
-
Oh, if you want the arrows exactly against the edges for mobile, try updating the media query to this:
@media screen and (max-width: 800px) { #prevArrow.fixed { left: 0 !important; margin-left: 0; } #nextArrow.fixed { right: 0 !important; margin-right: 0; } }
For the Kadence issue, I think we’re on the same page.
One small question I wanted to ask: do you have both videos and galleries on the same page (ie, your home page), or are they on different pages? If different pages, might be able to disable the Kadence lightbox for some pages, but not for others.
But if you need two different lightboxes on the home page (our lightbox opens galleries on the home page, and Kadence opens videos), it may not be possible unless Kadence has a way to selective way to turn off their lightbox for galleries.
Hey – was just researching other threads on Kadence lightbox, and found this one: https://www.ads-software.com/support/topic/lightbox-functionality/
That thread includes a link to this screenshot. I wonder if you could change that “Link Triggers” option to not be lightbox for a gallery?One question. Should I replace the previous code below, with the last one you gave me above?
@media screen and (max-width: 800px) {
#prevArrow.fixed {
left: 0 !important;
}
#nextArrow.fixed {
right: 0 !important;
}For the kadence issue check this video please: https://www.loom.com/share/cd7026a8590f4f18b25db6aa77332bf9?sid=4e570b25-dad4-4106-82fb-2c3a48c4c3e1
Yes, you’d replace the earlier block of code I gave you with the new block. The only difference is that I’ve added the margin-left: 0 and margin-right: 0 lines in the new code. You can also just add those lines manually.
For Kadence – that video is very helpful. Let me look at a few other options. It may be tomorrow before I reply as its getting late here.
You are really amazing franly. I really wish to get read of any kadence bad implementation to open everything ??
You are amazing. What’s your name? Hope to stay in contact with you. You really are amazing. How can i donate something for this amazing lightbox?
By the way Kadence is such a bad theme. LCP metrix are really bad, it takes lots of time to render the image. It’s just their algorithm. Very bad
- This reply was modified 8 months, 2 weeks ago by emiliano76.
Does your plugin use this css? /test2/wp-includes/css/dashicons.min.css?ver=6.4.3 It should be delayed as it takes 300ms in google speed insight. wp rocket just minify but do not delay the css loading this file makes really slow down the GSC metrix
- This reply was modified 8 months, 2 weeks ago by emiliano76.
Hi. I spent some time this morning looking at how I might get our lightbox to open videos. But there is a fair amount of work involved.
I will say I’m planning on launching a Pro version with different underlying lightbox code in the coming months that WILL handle video. But it’s going to be a while. I may try to accelerate that. But even so, that means I just don’t have a solution for you at this moment. ??
One small thing to consider. From your video, it looked like you have videos on your home page, but no Kadence galleries. One option you might have is to figure out how to disable the Kadence lightbox whenever you are not on your home page.
Depending on how they have have their code written, and if you are know any PHP(?), this could be relatively straightforward. It would involve putting something like this in your functions.php file or elsewhere:
// This is_front_page() method is provided by WP // Using this conditional, the code inside the block // will only run if you are on your home page. if ( if_front_page() ) { // This removes Kadence lightbox script remove_action( 'wp_enqueue_scripts', 'function_kadence_uses_to_load_lightbox_script_here' ); }
Do you know if the Kadence lightbox is provided by the theme, the free plugin, or a pro extension plugin?
Small side note: you have a beautiful site! Really nice.
Oh one other thing. I know the https://www.ads-software.com/plugins/easy-fancybox/ plugin can open youtube videos in a lightbox. Something like that is another option. You’d need another plugin. And the lightbox style would be a bit different from your images. But it is free and works and is not hard to set up. There info on youtube for fancybox here: https://firelightwp.com/wordpress-lightbox-docs/
Hi, how are you?
Thank you so much for everything, and also for your super kind words on the style I’ve been trying to make, although Kadence is really bad in doing what I would love to achieve. I would have done better with another theme. I will build other websites with a different domain name in the future. I think I will use Elementor. Kadence is just bad because the management sucks. They don’t have a vision and they surely are not open-minded.
The video will stay in the home, in many landing pages (just pages) and in this page: /test2/wedding-videographer-italy/ will be the complete listing, that I still have to style properly and should be styled pretty similar to this page that is on my actual website: /wedding-videographer-italy/ with few more video though. So essentially videos will stay i pages where there are not kadence galleries. This is correct, even if in some page I will use some gallery, but there are just few of them with galleries, the majority of them don’t have a small videl listing call to action like you have seen in the home page.
So, the lighbox of kadence is essentially divided in two parts:
- For the gallery images, that you have seen I disabled via perfmatter all the js and related css. The ones for the gallery unfortunately is used also to embed the video, so when I disable it as you have noticed also the video embed will be disabled.
- You can activate the one for the block images in the customizer section, the global settings of the theme, then you have to go on the image and set the link to media, as in your case to make it open in a pop up as singular image. So they call it “lightbox” but it’s a fake lightbox, it’s just a popup image, without no arrows and they refuse to implement a real lightbox for the images in the blocks. That is why I was searching to find a solution. Obviously I wrote a very bad negative review on Kadence on trustpilot: https://www.trustpilot.com/review/kadencewp.com as they really deserve. Also because as you can see they limit my possibility to have such a basic feature. But this is not the only problem they creates me. In Kadence are missing lots of very basic things that they are not going to provide. But now I’m on the point to be on more than the half of my restyling and I cannot go back and change the theme with another one. Unfortunately for my website I have to use this theme, although the management, the founder really sucks. Not the support team though.
So I don’t know where to place your php code now. I use wp_code (it’s amazing) so i don’t need to use a child theme, since you can place also php code in there. But what essentially this code will do is just disable what I already disabled in the home: their js and css. But in this way I really don’t know how to open the videos, how to embed. This will be definitely possible in the main video page I linked you above, as there will be just few images and lots of video, so in that page I can enable their js and don’t make the few pictures opened in the any lightbox.
If I enable their js also they will conflict with yours and the images will be opened twice as I previously explained.
By the way. An important thing is that your plugin uses the dashicon css that slow down the website quite a bit and it is visible in the google insight metric. Is there any ways to optimize it?
I hope the pro feature would be a lifetime licence and I will surely buy it. But please always check the the js and css that will be loaded in the treemap when any page is loaded. Sometimes you have to deay them or async them from the scratch to make sure the other files will be loaded first, otherwise like in the case of dashicon.css will slow down the metrix.
You are amazing, anyway. I really need to find a solution here. My Kadence experience has been so horrible and fristrating because of the founder.
Will review all the above in a bit. But for dashicons… I just added those as part of the latest batch of features this week, so its new. It’s is for the new nav arrows. I will look at optimizing how that loads today or early next week.
I am glad if I can help you to optimze it as much as i can. You really deserve the best. read also my review on kadence please.
I really wish to fix the video issue. But I think people should know what Kadence really is.
I really hope will be possible to fix the dashicon.css slowing down in google speed insight. Please let me know
“fix the dashicon.css slowing down in google speed insight”
I worked on a fix/change for this on Friday. I do not want to change how dashicons are loaded, as those are a core WP library. It’s not good for third party plugins to mess with how core scripts are loaded – risks creating conflicts.
So I’m changing the new navigation arrows to not use dashicons at all. Was a bit more involved than I though, but should be ready for release today or tomorrow.Thank you so much. I hope this can be fixed, really as it will slow down things. But should I also change the custom css and js you gave me soon after?
- The topic ‘Get rid of the white border padding and loading icon’ is closed to new replies.