Встроенные элементы списка, добавить наложение нумерации - PullRequest
Новая
       1

Встроенные элементы списка, добавить наложение нумерации

1 голос
/ 23 ноября 2011

Я написал эту галерею миниатюр , используя плагин jquery lightbox много лет назад. 

<div class="p">
    <ul class="gallery">
        <li><a rel="lightbox-gallery" href="..."><img src="..."></a></li>
        <li>...</li>
    </ul>
</div>

div.p {
    text-align: justify;
}

.gallery li {
    display: inline;
    list-style-type: none;
}

Возможно, он не идеален, но он равномерно распределяется по всей ширине столбца и самостоятельно адаптируется к изменению размера окна.

Теперь фотографий почти 40, и я хотел бы добавить с помощью jquery немного наложения с номером фотографии, что-то вроде этого:

example

но у меня возникли некоторые проблемы, поскольку элементы являются встроенными, а не блочными.

Можно ли этого достичь без изменения базового стиля?

Ответы [ 3 ]

2 голосов
/ 23 ноября 2011

position: absolute; сделает свое дело.<li> должно быть position: relative.

Демо: http://jsfiddle.net/ThinkingStiff/gH7vH/

HTML: 

<ul>
    <li><a><img class="thumbnail" /></a><div class="number">1</div></li>
    <li><a><img class="thumbnail" /></a><div class="number">2</div></li>
</ul>

CSS: 

.thumbnail
{
    border: 1px solid black; 
    display: inline-block;   
    height: 60px;
    width: 60px;
    vertical-align: top;
}
li
{
    display: inline-block;
    position: relative;
}
.number
{
    background-color: rgba( 47, 47, 47, .3);
    bottom: 0;
    height: 18px;
    line-height: 18px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 18px;
    z-index: 1;
}
1 голос
/ 23 ноября 2011

В этой демонстрации , я добавил этот бит кода: 

$(function(){
    $('.gallery').find('a').each(function(i){
        $(this).append('<div class="number">' + (i+1) + '</div>')
    });
});

и этот CSS 

.gallery .number {
    background: #eee;
    color: #000;
    min-width: 20px;
    height: 20px;
    position: absolute;
    font-size: 20px;
    line-height: 15px;
    bottom: 15px;
    right: 3px;
    z-index: 1;
    text-align: center;
    padding-top: 2px;
}
.gallery a {
    position: relative;
}

Редактировать: К сожалению, вы можете просто добавитьi+1 к демке ...

1 голос
/ 23 ноября 2011

Проверьте плагин position из jQueryUI. Это может помочь вам сделать это.

...