Hi. I read this article:
…after reading this article:
My question is, how can I style the lightbox result? Currently it looks like it’s from 1992! Ideally I want it to behave like a modal - fade out the site with a dark BG, slightly opaque, and have the image pretty much fullsize, no border, and just a simple ‘X’ to exit, maybe centred. Is it possible to control this? Thanks!
Hi @doughballs
From all these customized options you mentioned, only opacity can be controlled from the shortcode attributes that are mentioned in the docs link you linked to.
Unfortunately, other options will require further customization and development work which is beyond our support scope.
I’ll list some HTML/CSS/JS tutorials that should help you in achieving these options in case you want to do that on your own:
Thanks.
@Alaa, thanks - when you say anything beyond opacity will require further customization, do you mean using the current function or do you mean I’ll need to write my own lightbox function from scratch? I’m pretty comfortable with HTML, CSS and JS - if you can show me where I target the lightbox element I can take care of the rest.
Actually, I just used dev tools to make the changes. Will post the code for someone else in case it’s helpful. Thanks.
Here’s what I used. I gave the close icon a size of 100vh/100vw so that clicking anywhere closes the lightbox:
/* Darken background color */
.ilightbox-overlay.light {
background: rgb(61, 61, 61);
}
/* Remove lightbox border */
.ilightbox-holder.light {
border: none;
padding: 0;
}
/* Remove toolbox border */
.ilightbox-toolbar.light {
border: none;
background: transparent;
}
/* Hide fullscreen button */
.ilightbox-fullscreen {
display:none;
}
/* Photo closes the lightbox */
.ilightbox-toolbar.light a {
width: 100vw;
height: 100vh;
color: #fff;
}Hello @doughballs,
Thanks for updating the thread.
There is no need for writing from scratch. You just need to write couple of lines of CSS (which you already shared) and JS (to change the behaviour) to make necessary changes .
That being said, thanks a lot for sharing the code with community.
Thanks.
@Prasant no problem!
Also, I just want to show a single image when clicked - the image that is clicked - and not a succession of images to be swiped left and right through. There’s probably a better way via JS to do this but for now I just hid the previous and next images:
.ilightbox-holder.ilightbox-next, .ilightbox-holder.ilightbox-prev {
display:none !important;
}Hi There,
Thanks again for writing in!
Yes there is always a way through JS but writing bunch of JS code is not good for site if this can be done via CSS.
Thanks
@basanta I have one last query with regards to lightbox. It’s actually in tandem with another question of mine about dynamically updating page contents.
I have a set of links on the page that update text and the lightbox images on the page. This works fine. The issue is updating the actual lightbox clicked image. There are numerous problems here - the element doesn’t exist until it’s clicked, so when I try to reference it in my JS, even with a setTimeout (to wait for it to load), I can’t select it. If I copy the same JS into dev tools, I can select the images without issue. I’m thinking I need to bind it somehow?
The second issue is the timing - there is a delay on the lightbox, as you’d expect. I’m using set timeouts to try to wait for the image to load before i update it, but this is very dangerous I think. Is there any way to change the image src in a safer way?
To reiterate, I can change all the thumbnails on the page easy enough, it’s changing the src of the clicked lightbox, that I’m having trouble with. To demonstrate the code that works in the browser but not from the JS editor in PRO:
lightboxImages = Array.from(document.querySelectorAll('.ilightbox-image'));
lightboxImages.forEach(function(image) {
image.src = image.src.replace(currentVal,newVal);
});
Edit to this: every time a lightbox image is clicked away, the element is destroyed, and this code would need to run again. I guess the elegant solution to this is to change the actual link that PRO has saved for each image - my changes so far are all in the browser, but I guess this isn’t really possible, unless that data is available from the browser window.
Further update: I have managed to update the images using setTimeout succesfully, but I would still like a safer way, if there is one. This is the current code:
setTimeout(function(){
lightboxImages = document.querySelectorAll('.ilightbox-image');
lightboxImages.forEach(function(image){
image.src = image.src.replace(oldVal, newVal);
});
},500);
Obviously, any issue with the timing and this could break the function, not good.
Hi @doughballs,
Since there is no provided API for that, then yes, setTimeout would be the only workaround for now. And we can’t provide customization of existing JS codes for the lightbox since it’s not something we made.
Thanks for sharing your code, that’s very helpful 
And I do use setTimeout and setInterval too, and I think jQuery uses it internally too.
Thanks!
Hi @Rad. I know you guys can’t help with the customization of lightbox, but you may be able to help me with something regarding the functionality of it. If you have a great number of lightbox shortcodes on the page (I have 40 on one of my pages), then when you click one of them, the page is really slow. If you have 8 or so, it’s fine, but I think lightbox loads every single image in preparation for a gallery style view. I have code that hides the prev and next images, but I think in the background the images are being loaded. I wondered if there’s a way to maybe load just one lightbox container for all the images on the page, then update the source depending on which image is clicked?
I have done a similar thing when nesting 20 content modal buttons inside tabs. I have just one modal container (blank), and I changed the triggers of the 20 other content modals to be identical, so that the same modal is opened for all 20. Then I have some JS that updates the contents based on which one was clicked.
If I could get this behaviour with the lightbox - a single lightbox serving multiple images - it would cut down the lag I think. I know exactly how to update the three href/src links for each image, I just don’t know how to stop the function building the gallery in the background.
Thanks again. I know it may be out of scope, but I live in hope! 
Link attached as secure note!
Hi @doughballs,
I checked and the lightbox isn’t slow, the lightbox library will only load once. And if it’s due to lightbox scripts then the entire page should slow and not just when lightbox is open (javascript memory leakage). What’s making it slow is the image itself and it they returns 404.
And 404 could slow down the processing since the browser needs to wait as it checks its availability.
But if you still wish to use the single lightbox window for all images then you should only use the same selector. And it’s .x-img.x-img-link
Eg. [lightbox selector=".x-img.x-img-link"]
And just add that shortcode to every bottom of your page, once.
Thanks!
@Rad thankyou so much man - I had jumped straight to wrong conclusion! Those images are being switched via a change to the src, the info picked up with the click, and and as you can see it’s pulling in undefined…that I can certainly fix. I will address this and check the performance before I think about the single lightbox option!
EDIT: @Rad, I’m not getting any 404 errors on my page. I’m trying to replicate the test you performed. If you click any of the lightboxes on the page (before clicking anything else) no 404 errors, just a super slow lightbox. Only error is the missing nk.js…?
Hi @doughballs,
I don’t see them now and it’s much faster than I checked yesterday. But, I still don’t see the recommendation being applied, by just adding lightbox shortcode once in every end of the page. That should limit one lightbox per page which applicable for all images.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.