Get rid of the white border padding and loading icon

I pushed the change to remove dash icons and use svgs for the new nav arrows. Feel free to update and take a look.

For CSS/JS… I don’t think I provide any JS. A lot of the CSS I provided earlier in this thread, you no longer need. I *think* the only CSS you should need now is for (a) removing the loading spinner and (b) moving the nav arrows further from the edge on desktop if you still want/need that (I did update the plugin to move them a bit further from the edge on desktop, but not as far as you wanted).

Note the plugin now has css that forces the nav arrows back to the edges on mobile, so you shouldn’t need css for that.

Most other aspects of the appearance you can customize with the options page now. I also updated the plugins.

I’d probably remove any css to start, try adjusting the options to get what you need, and only add css you need beyond that.

Thank you soooo much. It works perfectly on my end on both desk and mobile.

I still have the followings css on my wp_code. What should i keep? Defintely the distance of the arrow on desk and delete the loading icon, I mean what shoud I keep here:

// Remove slideshow area imageDataContainer {

display: none;

}

// Remove border around image imageContainer {

padding: 0 !important;

} lightboxImage {

transform: scale(1.07) !important;

} nextLink, #prevLink { transition: none; } prevArrow.fixed {

left: 3% !important;
} nextArrow.fixed {

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

Still haven’t found a solution for the videos, but I’ve been working on them

Out of all the CSS above, the only ones you’d need to keep are these:

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

Remember, if you do remember some of the other CSS, you may still need to go to the options page and update the options. You can now set the border size there, and hide the image info bar at the bottom, for example.

Thank you sooooo much. I think this could be your 2.0 version actually. The lightbox is absolutely perfect. I looooooooooooooooooove it so much.

Please stay in touch. Write me an email i want to stay in contact with you

Sorry I have noticed that the arrows on the mobile are not sticked at the the very edge. I just wanted the 3% on desktop. What can i do to to set this on desktop only and not on mobile? Thanks

Oh, I think there’s a tiny bit of margin still, so you probably need to keep this too:

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

By the way, if you’re happy with the plugin and/or support, one small thing you can do is leave a 5 start review for the plugin. ??
https://www.ads-software.com/support/plugin/wp-jquery-lightbox/reviews/#new-post

I did it! I actually added something that I hope you like to: https://prnt.sc/Hv90ZH_-SyDG

Please if you find a solution for the video let me know. By the way do you know someone amazing like you for speed optimization and fixing issues that Kadence has like largest content paint and others?

Thank you so much

Hi how are you?

I have one more request here.

Since I’ve been using delay js in wp rocket and unused css to ptimize the website, how can I exclude the js and css of your plugin? What should I write in the exclusion to make it work smoothly and perfectly?

Thanks

Hi @emiliano76!

Sounds like you want to exclude our js/css from WP Rockets ‘Load JavaScript Deferred’.

First question: is there a specific reason you’re wanting to exclude? I assume something isn’t working right when WP Rocket is optimizing our files. If so, it would be good to know what the issue is.

In any case, although I haven’t used WP Rocket in a while, looks like exclusions are handled like this: https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js

Based on that, I think you could use the following in that field:

/wp-content/plugins/wp-jquery-lightbox/(.*).js
/wp-content/plugins/wp-jquery-lightbox/styles/(.*).css

Hi! Thank you so much for this.

It’s not wp rocket. In kadence the lazy loading and delay js is better managed by perfmatters. Remember that Kadence is a ruin for everything. I’ve been fighting versus 3 seconds late (definitely not due by your plugin). But the way the css in general are loaded before the largest content paint is so bad in kadence, that i pray to help me to find a good dev.

Anyway I found the way for emebed the video, creating a php code with a class to call the blocked js of kadence only in the video block set with the classe, even if they are blocked for all the pages by perfmatters.

This is the fucntion:

function my_enqueue_scripts() { // Includi il file JavaScript per il lightbox wp_enqueue_script(‘my-lightbox-script’, ‘url.js’, array(‘jquery’), ‘1.0’, true); // Includi il file CSS per il lightbox wp_enqueue_style(‘my-lightbox-style’, ‘url.css’, array(), ‘1.0’, ‘all’); // Aggiungi codice JavaScript per eseguire i tuoi script solo su un blocco di Gutenberg specifico wp_add_inline_script(‘my-lightbox-script’, ‘ jQuery(document).ready(function($) { // Seleziona il blocco di Gutenberg con la classe “my-gutenberg-block” var $gutenbergBlock = $(“.my-gutenberg-block”); // Assicurati che il blocco sia presente sulla pagina if ($gutenbergBlock.length > 0) { // Codice JavaScript per inizializzare il lightbox var lightbox = GLightbox({ selector: “.my-gutenberg-block .glightbox” }); } }); ‘); } add_action(‘wp_enqueue_scripts’, ‘my_enqueue_scripts’);

This is absolutely sooooo good now. Your plugin is the best ever!

mmnm I think this still don’t work cause I need to exclude the kadence galleries because they still are opened in two lightbox

Het sorry again, so sorry but the arrows margins 3% are not affective on desktop side anymore https://prnt.sc/y3cZKKRpm9Be

• This reply was modified 7 months ago by emiliano76.

The custom css from way above for the nav arrows is no longer active on your site. I can see the original rules for styles still applying. Not sure what happened – maybe this got removed when removing other CSS above. But you just need to double check that these rules exist and are being applied:

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

• This reply was modified 7 months ago by LightPress.

Thank you, This code is affecting also the mobile, what should I write to make it apply only on desktop?

You suggested to remove the rule because it was included in the theme settings to change the 3% in desktop size and put zero for mobile.

• This reply was modified 7 months ago by emiliano76.