Undo / Insert new alt tag from <figcaption> tag
I have a jQuery piece, see below, that wraps my images in an href tag so that they can be used in a lightbox.
I need to customize what appears in the alt tag and also needs to be created from what the user puts in the title box in ckeditor (which generates a figcaption tag under each image). I need to be able to insert this data into an empty alt = "" and be able to override if there is anything in the alt tag.
html, which is currently being output:
<figure class="image">
<a data-imagelightbox="f" href="/ckfinder/userfiles/files/Screenshot_South-Downs-Lines-RSC_51_23330-1_22091_10-00-48.jpg">
<img width="1600" height="900" src="/ckfinder/userfiles/files/Screenshot_South-Downs-Lines-RSC_51_23330-1_22091_10-00-48.jpg" alt="Caption 1"></img>
</a>
<figcaption>
Caption
</figcaption>
</figure>
The current script I have is this:
$('#article-copy img').each( function() {
var $img = $(this),
alt = $img.next('figcaption').text(),
href = $img.attr('src');
$img.wrap('<a href="' + href + '" data-imagelightbox="f"></a>');
});
Thanks for any help
+3
source to share
1 answer
If I understand correctly, you want to change the attribute of the alt
image. Then this should work:
$('#article-copy img').each( function() {
var $img = $(this),
alt = $img.next('figcaption').text(),
href = $img.attr('src');
$img.attr('alt', alt );
$img.wrap('<a href="' + href + '" data-imagelightbox="f"></a>');
});
+1
source to share