Minipreview jQuery link preview contents of parentoronly

I'd like to use https://github.com/lonekorean/mini-preview to create mouseover previews for parts of a website only.

I have no problems using anchors from the target website to have the script render a full website preview, scrolled to where an individual anchor is. That's not what I'm after however.

I'd like the script to show only the content of the anchors' parent <p> or <div>.

On the site, the link target anchors are coded like this:

<div class="paragraph">      <p>          <a id="anchor_1"></a>          Foo bar baz.      </p>  </div>  

So, I'd like the little preview box to show Foo bar baz. only.

I suspect the answer lies in this part of the script:

loadPreview: function() {      this.$el.find('.' + PREFIX + '-frame')          .attr('src', this.$el.attr('href'))          .on('load', function() {              // some sites don't set their background color              $(this).css('background-color', '#fff');  });  

specifically, the .attr('src', this.$el.attr('href')) part. I'm not sure though.

Does anyone know how I can do this?
Or can you recommend some other script that I can use to do this and looks as nice as this one?

I'm not web dev, so please go easy on me.
Thanks

https://stackoverflow.com/questions/66701233/minipreview-jquery-link-preview-contents-of-parent-p-or-div-only March 19, 2021 at 09:05AM