Before you ask please READ THIS

Text box in lightbox

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

  • Another option would be to be able to change the color of that text, but only when the photo is open in lightbox. When on the bricks, the grey background that appears avoids any problem. Now if you change with html on title and description, it changes on bricks too.
  • AirAir
    Posts: 10,056
    Hello:-)

    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.
  • Hi,

    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.
    Flipy.jpg
    899 x 600 - 79K
  • AirAir
    Posts: 10,056
    Hi again.

    Thanks for your longer description.
    Lalouetto said: 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.
    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:

    .customHtml{
    background-color: rgba(0, 0, 0, 0.45);
    }
    Try it.

    With kind regards.
  • That eliminates the upper band, but keeps the lower one.

    Is there a way to reduce the whole width band to only a box or window behind the text?
  • By the way, I also have some album in which only some photos have text, so now I have empty grey band on every photo.

    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.
  • AirAir
    Posts: 10,056
    Lalouetto said: That eliminates the upper band, but keeps the lower one.
    No, this adds background to text you talked about. Removing bars you should do with lightbox settings.

    Show me link to that album.

    With kind regards.
  • edited September 2016 Posts: 91
    Hi,

    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)
    Post edited by Lalouetto on
  • AirAir
    Posts: 10,056
    OK so lets make something totally random.
    Put your title into <div class="lalouetto-title">Your title</div>
    and add such csutom CSS:

    div.lalouetto-title{
    bacground-color: #ff0000;
    }
    Any closer to your idea? :-)

    With kind regards.
  • edited September 2016 Posts: 91
    Mm nope.

    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...
    Post edited by Lalouetto on
  • AirAir
    Posts: 10,056
    Possible, but it would be easier to work if you would add my changes and I could view them.

    Anyway instead of previous CSS, try this one:
    .lg-sub-html div.lalouetto-title{
    bacground-color: #ff0000;
    padding: 10px;
    display: inline-block;
    }
    With kind regards.
  • That works great, thanks.

    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.
  • AirAir
    Posts: 10,056
    Can you show me live example where it happens? Cause for me it is unrelated, unless you put this code is some different place that I had imagined.

    With kind regards.
  • Well I can show you a capture of the disappeared photos, but I cannot leave it that way.

    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
    AddtoAny.jpg
    1600 x 1066 - 115K
  • AirAir
    Posts: 10,056
    Well what you see on capture is broken album, probably cause of some JavaScript or PHP error. I would have to see it live to be able to tell what exactly.

    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.
  • edited September 2016 Posts: 91
    Well, maybe I could create a non indexed album only so you see what happens live with AddtoAny? Or you would need access too?

    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...
    Post edited by Lalouetto on
  • AirAir
    Posts: 10,056
    Lalouetto said: By the way, when AddtoAny was working "well" (without editing titles and custom CSS), it did not put any icons on every photo
    Like I said, they broke something in recent update (1.7.0 if I remember correctly) and I have yet to fix it so it will display again on every photo.
    Lalouetto said: 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...
    AddToAny is rather not connected to issues that you face while implementing modification I proposed.
    Lalouetto said: Well, maybe I could create a non indexed album only so you see what happens live with AddtoAny? Or you would need access too?
    If you can finally present to me what happens that would be great! So do it if you can.

    With kind regards.
  • edited September 2016 Posts: 91
    Hi, I am not sure if I understand you.

    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.
    Post edited by Lalouetto on
  • AirAir
    Posts: 10,056
    I want to debug it, see console errors, see other things. Screen shot is just that, while live example gives much more info what is wrong.

    With kind regards.
  • edited September 2016 Posts: 91
    Hi Air,

    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.
    Post edited by Lalouetto on
  • AirAir
    Posts: 10,056
    You know, HTML generated for this album is broken, whole HTML for list of items. Div you add to Title is escaped so it won't act as HTML, but as text.

    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:

    .lg-sub-html .customHtml {
    background-color: red;
    display: inline-block;
    padding: 10px;
    }
    With kind regards.
  • edited September 2016 Posts: 91
    Ok changed custom CSS and erased all html on titles.

    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.
    Post edited by Lalouetto on
  • AirAir
    Posts: 10,056
    Lalouetto said: Now it doesn't crash but icons aren't shown on photos
    Like I said two times already:
    Air said: 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.
    Meaning I have to make theme compatible with new version of AddToAny(1.7.x). Meanwhile you can use AddToAny in version 1.6.x to have your icons back.

    With kind regards.
  • mm I am not sure if we are understanding each other...

    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.

  • AirAir
    Posts: 10,056
    That is exactly why I always ask to not mix different cases in one topic and focus only on one thing.
    Anyway: is your main case solved now?

    With kind regards.
  • Well, I could switch to AddThis and it would be done about shadows behind titles, but I don't mind staying with AddtoAny if you are working only with that plugin to fix that icons-on-every-photo-problem. In fact AddThis does not work either doing that work (it does not put icons on every photo) and maybe it is a feature I would like in future. We can open a new thread for icons on photos if you want. Anyway if AddtoAny crashes with the solution for titles I would like to know if it is because of the plugin or of the solution, in case for some reason I switch to another plugin and get another crash.

    Regards.
  • AirAir
    Posts: 10,056
    I don't know anymore what you are talking about :-) I am honest here, I have no clue.

    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.
  • You are working on making AddtoAny work putting icons on every photo. You are not working on any other plugin doing it.

    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.
  • AirAir
    Posts: 10,056
    Sorry Man, but I still don't know what crash you are talking about. Hypershot, AddThis - please stop introducing things cause you lost me every time, when you try to explain something using different theme.

    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.
This discussion has been closed.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!