Добавить div поверх центрированного изображения?

Question

Я использую ImageFlow SEE Я хочу добавить div сверху изображения после того, как изображения щелкнули и переместились в центр. Я попытался проверить файл JS, но MoveIT() функция вызывается так много раз в JS и т не в состоянии определить,

t.wrap('<div class="f1_card"></div>'); 

, когда я должен написать, чтобы обернуть вокруг DIV изображения.

Спасибо,

Answer 1

Вы можете использовать функцию перед именем() в JQuery. Вам просто нужно выбрать элемент изображения, а затем вызвать функцию prepend. Смотрите пример:

$('.target_image').prepend('<div class="f1_card"></div>'); 

Это будет хорошо, если вы хотите, чтобы добавить элемент, если вы хотите добавить до элемента. Но если вы хотите обернуть элемент div, вам нужно использовать функцию wrap().

$('.target_image').wrap('<div class="f1_card"></div>'); 

И, очевидно, вы должны поставить этот код выше в пределах функции щелчка или аналогичного события, которое вы хотите. смотри пример:

$('.target_image').on('click', function(){ 
    $(this).prepend('<div class="f1_card"></div>'); 
}); 

Здесь DIV с классом «f1_card» будет родительский класс вашего target_image элемента. Надеюсь, что это поможет вам.

Answer 2

Если вы используете функцию анимации, возможно, вы можете попробовать что-то вроде этого.

$('.myimage').click(function() { 
    $(this).animate({ 

    /*.do stuff...*/ 

    }, 'slow', function(){ 
     $(this).prepend('<div class="f1_card">my content here</div>'); 
    }); 
}); 

Это работает следующим образом. Когда вы нажмете на свое изображение, он выполнит вашу анимацию jquery. Как только правильная анимация будет выполнена, функция будет тогда, в пункте назначения (в данном случае, нажатом div) добавить элемент. В соответствии с документацией API это будет «вставить содержимое, заданное параметром, в начало каждого элемента в наборе согласованных элементов.«

Answer 3

Вы можете центрировать div и использовать z-index в css.