jQuery to put image caption in title field

0
votes

I'm a novice coder. I want to hover my mouse over an image, and show information. My images have the 'Caption' field filled in, and I want to grab that data to move into the title or data-tooltip.

I am doing my site using Semplice, so it's a Wordpress CMS where I'm limited in what code I can change. I am able to inject custom CSS (globally and on each page) and JavaScript (globally)

I can successfully display prewritten text on hover like this:

jQuery('.semplice-lightbox').hover(function() {
        jQuery(this).css('cursor','pointer').attr('title', 'CUSTOM TEXT');
    }, function() {
        jQuery(this).css('cursor','auto');
    });

And I can successfully get the image captions and display them below the image like this:

jQuery('.semplice-lightbox').find('.lightbox-item').wrap('<div>').after(function() {
    return jQuery('<p>').text(jQuery(this).attr('caption'));
});

but I'm having trouble understanding how to combine those two things so that I grab the caption and populate another field (like title or data-tooltip) with what I have in my existing caption field.

If it's helpful, here is the data from inspecting the box all this sits in: 

<a class="semplice-lightbox"><img class="is-content lightbox-item" src="https://my-website.nfshost.com/wp-content/uploads/2018/04/the-image-filename.jpg" width="1067" height="1600" alt="Alt text" caption="Caption field" data-width="original" data-scaling="no" data-photoswipe-index="0"></a>

Thanks in advance for any help.

2
jqueryattr
I guess $('.semplice-lightbox') is a container of the image, right? - Hikarunomemory
Yep, that's the image container. - T S
So the this here doesn't refer to the image, which means you can't get the caption from this. - Hikarunomemory
Why doesn't each image have a title="" attribute on it? Why do you need jQuery to do this? Can you post example HTML? - TJBlackman
Thanks for the reply. I'm working in a Wordpress theme CMS (Semplice) so I'm constrained in what I can edit. I can inject CSS and JavaScript to my existing code but otherwise I can't modify anything. I will edit my question with some more text to try and better explain - T S

2 Answers

0
votes

As per your requirement, I combine two functions together and also remove() the <p> when the mouse is leaving the image.

jQuery('.semplice-lightbox').hover(function() {
  var $this = jQuery(this) // this here refers to .semplice-lightbox
  $this.css('cursor', 'pointer').find('.lightbox-item').wrap('<div>').after(function() {
    var imageCaption = jQuery(this).attr('caption') // this here refers to .lightbox-item
    $this.attr('title', imageCaption)
    return jQuery('<p>').text(imageCaption);
  });
}, function() {
  jQuery(this).css('cursor', 'auto').find('p').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="semplice-lightbox">
  <img class="is-content lightbox-item" src="https://my-website.nfshost.com/wp-content/uploads/2018/04/the-image-filename.jpg" width="1067" height="1600" alt="Alt text" caption="Caption field" data-width="original" data-scaling="no" data-photoswipe-index="0">
</a>
0
votes

As Hikarunomemory mentioned, your this might not be referencing the correct DOM element. Fortunately, every event function gets access to an event object automatically, so you can use event.target to get a reference to the DOM element that triggered the event. Then you can get it's caption, and use it however you want... 

$('.semplice-lightbox').hover(function(event){
    var caption = $(event.target).attr('caption'); 
    $(event.target).attr('title', caption);
});