Add div over centered image?

Question

I use ImageFlow WATCH I want to add a div on top of the image after the images are clicked and moved to the center. I tried to check the js file, but the MoveIT() function is called so many times in js and m that it cannot identify,

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

when should I write to wrap a div around an image.

Thanks,

Answer 1

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

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

This will be fine if you want to add an element, if you want to add before an element. But if you want to wrap a div element, you need to use the wrap () function.

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

And, obviously, you need to put this code above in the function of a click or similar event that you want. see example:

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

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

Answer 2

If you are using an animation function, perhaps you can 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 on your image, it will execute your jquery animation. As soon as the correct animation is completed, the function will then, at the destination (in this case, the div pressed) add an element. According to the API documentation, this "inserts the content specified by the parameter at the beginning of each element in the set of matched elements."

Answer 3

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