Hi all.
Is it possible to create a transparent grey box behind the title and description of a photo (or every photo) opened in lightbox?
I want to do that for photos with white background behind white text of title and description, but do not want the whole grey bands up and down.
Thanks.
Comments
In short: I don't know what you talk about:-)
Link to your album and screen shot with thing that you want to achieve - please.
With kind regards.
Sorry, still in maintenance mode.
When you open a photo on a lightbox and you have your browser's zoom at 100%, everything is ok: the text is on a black zone below the photo.
However if your browser's zoom is higher, it happens what you see here. If you don't put that grey (or whatever color) zone behind, the text dissapears because of the light background. The thing is that I get two total width grey bands up and down of the image.
Some options I see to avoid this:
-That the grey bands only back cover their text or icons (the upper band would dissapear behind those 2 icons and the lower one only would back cover one word.
-Option to hide grey bands with a timer or whatever.
-Justify text to the left so it is not over the photo (I would have to put a dark shadow on text to avoid the same problem on mobile).
-Instead of using the semitransparent zone option, put manually a small grey box behind any text that needs it (this is what I was asking).
How do you see this? I hope I am clear now.
Thank you.
Thanks for your longer description. I can't predict how certain browser will act on its own zoom. This lightbox is acting on fixed elements so it can break like you say when applying browser zoom. However this is external script, so I can't rebuild it, so your proposed solutions might not work in this situation.
Your whole issue you describe here, is very "situation specific".
If you like you can disable this bars and try to use this custom CSS instead: Try it.
With kind regards.
Is there a way to reduce the whole width band to only a box or window behind the text?
I wouldn't mind entering manually some code only on those needed photos. Something to put a little box behind the text would be great, but every code I put on the title (or the description) of a photo, also changes the title/description on the brick of the album.
Thank you.
Show me link to that album.
With kind regards.
Well that not only adds background to text, but puts a band even when there is no text. Puts a band even when the text does not need it because it is a dark photo.
In fact what I need is some html code to insert with the title of the photo so that I only put it when needed and it does not create a whole width band, but only a background little window as wide as the longest text. Only to get that text legible, that's all.
For example in this album, I have photos without title, photos with title that do not need grey background and photos with title that need it:
https://www.elimaginario.es/album/retrato/
I would like a way to put the background myself only on those photos.
Regards
(Remember to zoom browser to full height photo in lightbox)
Put your title into
<div class="lalouetto-title">Your title</div>
and add such csutom CSS: Any closer to your idea? :-)
With kind regards.
If I do not disable the AddtoAny plugin, the album just disappears and only title of photos with addtoany icons remain on white background (had to fix that "k" on "background-color"); the photos disappear.
If I disable AddtoAny, the code seems to work ok but what it does is
1. Put a background behind the title on the bricks (something I do not want). This background is ok in size (but I do not want it )
2. Put a whole width background behind the title on lightbox. Again whole width, not just a little box, like on bricks.
So one of the problems would be that it has to be something that doesn't act on bricks but does on lightbox and the other problem would be to reduce its width to just a couple of characters more than the text... impossible?
Regards.
Edit: I wonder if something like a button would do the trick (a button that does nothing on hover and click). Or something like a box... but the problem is that it didn't act on bricks as well...
Anyway instead of previous CSS, try this one: With kind regards.
Again, It is incompatible with AddtoAny (all photos disappear from album and only sharing icons stay), but I guess I can substitute it by another plugin like Addthis.
Thanks again.
With kind regards.
I put custom CSS on its place and edited titles as you said.
In your Hypershot demo I think you used AddThis on every photo of albums. I wouldn't mind changing plugin to AddtThis (works well with this change on titles) and inserting icons on every photo as you did (if you remember the code for that, it would be great).
The album of the capture is https://www.elimaginario.es/album/retrato/
Regards
About social icons on photos - AddToAny works in same way, they just changed something lately and it stopped working. I will have to check what is going on with this.
With kind regards.
By the way, when AddtoAny was working "well" (without editing titles and custom CSS), it did not put any icons on every photo, only after the text on first brick. When it fails, it looks it wanted to put sharing icons on every photo and that crashes with edited titles (album with no title edited keeps working "well" even with custom CSS; no sharing icons on photos though).
Regards
Edit: I am seeing that AddThis adds a random characters chain at the end of my URL. I think I would prefer to stay with AddtoAny if I could make it not crash with this edit and putting icons on every photo of albums...
With kind regards.
If I undo all the changes I did to all my titles and create a new album to make it crash, all you will get is exactly the same you can see on that capture. What do you want to see that cannot be seen on it? Or you also want access to admin to make some tests?
Regards.
With kind regards.
You can test this album: https://www.elimaginario.es/album/test/
There are some photos with the edited title, some with normal title and some without title.
I have disabled sharing icons on "retrato" and "moda" albums so that they work.
This weekend I will test some plugin disabling in case there is something else affecting.
Cheers.
Edit; Scrolling down on broken moda, it looks, some photos and description brick appear but not as they should.
I think you have to drop out this solution. Lets try again from scratch.
Add just this custom CSS, and adjust it to your needs: With kind regards.
One note: when it crashed it looked sharing icons tried to appear on every photo however (but photos didn't appear hehe). Now it doesn't crash but icons aren't shown on photos.
With kind regards.
My first and only intention by now was getting those titles with the grey box behind working and at the same time social icons but not on every photo, but only for example after text. I already got that with the solution I just undid and AddThis (not AddtoAny). My question about AddThis on every photo and Hypershot is a secondary thing (by the way, AddThis didn't either put sharing icons on every photo and maybe it should too). In fact in your Photon demo I don't see any social icon on photos, that's why I asked about Hypershot. I didn't even know that you made any plugin put social icons on photos with 1.6 or whatever version.
I just went back to AddtoAny and undid all the titles thing to help you with debugging AddtoAny and every info I give you about it is not to insist on something you already said, but to give you that feedback you are asking me.
In fact I have no preferences with AddToThis, SumoMe, AddtoAny or any other plugin. We can concentrate on AddtoAny but my intention is to get what I already got with AddThis. If it takes too long I will have to switch to the former solution that worked for me (except icons on every photo, what is secondary for me and I can live without it right now)
So my only intention by now as I said is getting visible titles on clear photos. AddtoAny? Ok AddtoAny.
Best regards.
Anyway: is your main case solved now?
With kind regards.
Regards.
Your main case was to "set small background under title when photo is opened in lightbox". It is modification you asked about. Is that solved?
If this is solved then, please start new topic, and explain me there your other issue.
With kind regards.
I prefer the titles solution not to make the plugin you are making work with Photon crash.
So I prefer the titles solution to be compatible with AddtoAny.
With Hypershot, your demo used AddThis but now you have changed to AddtoAny so even if the titles solution works with AddThis, I prefer to use the plugin you are interested on making compatible, even if right now putting icons on every photo is not a priority for me (could be on future).
Regards.
I am closing this topic, cause I feel we will be in this loop forever.
-----
Now listen: Modification that was the case in this topic is working(you didn't say otherwise, even when I asked two times already). So now when you will start new topic, and I am sure you will, please describe what crash you talking about, like this topic never existed. Also, before doing new topic, make sure it also crashes when all non-theme plugins are disabled.
I don't mean here to be rude, I just want to get to core of your issue, instead of wasting our both time on this ping-pong:-) I hope you will agree.
Sometimes explaining issues via forum just doesn't go as planned, and then you have to start over, explaining everything step by step in cleanest way possible.
With kind regards.