Jquery clone & append

[sukaram]

I have been trying to do some jquery code for clone and append but I am not getting the desired result. I want to have my own custom caption on magnific popup. So, i did a bit of jquery but to no avail. It’s cloning and appending every element with the targeted class name but it is not what I want. I want only one caption. You will get a better view if you look at this pen. I have commented on JS tab as well. Here is the link.

https://codepen.io/DSuman/pen/WWzJWp

[Shikkediel]

If you only want the first one, you could do .eq(0).clone() and so on.

[sukaram]

@Shikkediel, thank you. But that’s not it. Let me explain, it is a slider and has 4 items which is also a magnific popup gallery. 4 items has its own specific caption, i.e. h4 tag. I want specific caption for specfic popup. Can you help on the pen?

[Shikkediel]

Okay, I misunderstood. This then perhaps?

$(this).next('h4').clone()

Here’s a more complete version:

$(this).next('h4').clone().prependTo('.mfp-bottom-bar').find('br').replaceWith(' ');

[sukaram]

@shikkediel, yes. Now, it’s coming together. But there is still one thing missing. My english is bad so, i couldn’t help you understand. So, I have updated the captions as “caption 1, caption 2” and so on. But there is always “caption 1” showing on popup. On clicking the next or prev arrow, the caption should also change.

Here is the updated one.

https://codepen.io/sumankarki/pen/WWzJWp

[Shikkediel]

It think the approach should best be plugin specific:

codepen.io/anon/pen/jRxNrG

I’ve added the extra image with titleSrc inside the settings.

[sukaram]

@shikkediel Wow, you did it. Thank you very much. Appreciate it a lot! :)

[Author]

Posts