LIghtbox изображение X Закрытая кнопка выравнивания по верхнему правому углу изображения

Question

Мне нужно выровнять кнопку закрытия в правом верхнем углу изображения. Я пытался дать позицию, но это не с css.

.lb-closeContainer {
   position: absolute;
   top: -10px;
   right:40px;
 }

Для фактического результата я приложил к нему изображение.

Answer 1

В библиотеке нет API, предлагающего это изменение, поэтому вам придется взломать / установить ключ.

Изменение HTML. Идеальный способ сделать это - обновить разметку, генерируемую lightbox.js, и переместить тег <a> с классом lb-close внутри <div class="lb-container">, как показано на рисунке. ниже. Для этого вы можете изменить lightbox.js. В строке 102 вы можете увидеть сгенерированную разметку: https://github.com/lokesh/lightbox2/blob/dev/dist/js/lightbox.js#L102

Позиционирование с помощью CSS. Тогда вам потребуется применить немного CSS для позиционирования кнопки 'X':

position: absolute;
right: 16px;
top: 16px;

Да, и обратите внимание, что поскольку тег привязки с lb-close был перемещен, CSS-селектор, ранее стилизовавший его, был обновлен. Теперь это просто .lb-close.

Answer 2

Решение от Lokesh Dhakar не совсем правильное, тег с классом lb-close должен быть помещен в конец класса lb-nav, тогда кнопка будет работать правильно и отображаться.Также не забудьте добавить тег .lb-nav к .lb-close, чтобы он был таким: .lb-nav a.lb-close {...}

Answer 3

.lb-data .lb-close {
display:block;
position:absolute;
right:50px;
top:5px;
/*float: right;*/
}

вот так я решил