Add div on top of centered image?

Question

I am using ImageFlow SEE i want to add div on Top of Image once images clicked and Slides into Center. I tried checking js file but MoveIT() function is called so many times in js and m not able to identify ,

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

when should i write to wrap div around image.

Thanks,

Answer 1

You can use the prepend() function of jquery. You just need to select the image element and then call prepend function. See the example:

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

This will be ok if you want to add an element if you want to add prior to an element. But if you want to wrap an element with a div then you have to use wrap() function.

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

And obviously you have to put this code above within the click function or similar event you want. see the example:

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

Here div with class 'f1_card' will be the parent class of your target_image element. Hope this will help you.

Answer 2

If you're using an animation function, perhaps you could try something like this.

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

    /*.do stuff...*/

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

This works as follows. When you click your image, it will perform your jquery animation. Once the correct animation has been performed the function will then, at the destination (in this instance, the clicked div) prepend an element. According to the API documentation this will "insert content, specified by the parameter, to the beginning of each element in the set of matched elements."

Answer 3

You could center the div and use z-index in css.