Адаптивная сетка изображений Jquery

http://ozan.io/collage/

В приведенной выше ссылке есть адаптивная сетка изображений! Там при наведении на каждое изображение отображается подпись! Это не div, но я думаю, что это функция подписи данных javascript! Я не хочу этого!

Я хочу что-то вроде этого http://themes.themepunch.com/?theme=megafoliopro_jq

При наведении курсора будет отображаться div, охватывающий каждое изображение, в котором я могу сохранить такие параметры, как «удалить», «вставить подпись» и т. д.

Как это сделать???? Кто угодно???


person Saptarsi    schedule 17.07.2013    source источник


Ответы (1)


Я бы сделал это с div внутри div, который отображается, когда вы наводите на него курсор.

<div class="outterDiv">
    <p> put some content here</p>
    <div class="innerDiv" style="display:none; width:100%; height:100%;">put options here</div>
</div>

jquery

<script>
    $('.outterDiv').hover(function(){
        $('.innerDiv').toggle();
    },
    function(){
        $('.innerDiv').toggle();
    });
</script>

Это покажет внутренний div, когда вы наведете курсор на внешний div и скроете его, когда мышь покинет внешний div.

person DFord    schedule 17.07.2013
comment
ой забыл, вы должны поместить js внутри $(document).ready(). Попробуйте это jsfiddle.net/DBMT4 - person DFord; 17.07.2013