I don't know if I am making this question right since I searched for some information but didn't find what I was looking for. I have a long text in a data-title (it belongs to a photo gallery). The text is just at the bottom of the modal image but I'd like putting it on the top and I find no way to edit or change the position of the data-title. Maybe in the next image it looks simpler:

The html follows the next structure:

<div >
    <a href="#" data-lightbox="photos" data-title="This is a text">
        <img  src="#">
    </a>
</div>

I think in this case it's not necessary to edit javascript but maybe I'm wrong.

CodePudding user response：

The dataset properties of Elements aren't uniform and therefore you can't just pick a random name and hope it'll work. Different libraries handle things very differently. I think that you're using this lightbox library. Its docs don't mention anything about an ability to change the description position. Looking at a HTML structure generated by the aforementioned library you could apply the following CSS and hope it works:

.lightbox {
     display: flex !important;
     flex-direction: column-reverse !important;
}

This solution is somewhat bad and even a minor change in the library can break everything. Also, this moves the entire desc container to the top. I think it's the most you can achieve without modifying the library's behaviour. If you really want to customize those elements you should implement your own lightbox or find a library that allows you to make such changes.