CODEWITHSUNDEEP
javascriptjqueryfancybox-3
user2957822
user2957822

Reputation: 59

Fancybox 3 change link title to data-caption

I would like to ask you if there is any javascript method to grab link title and use it or change it to data-caption in fancybox 3? The only condition is if the link title exists.

This is what I have now:

<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>

and I would like to somehow change it to this:

<a data-fancybox="gallery" data-caption="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>

Thanks for all help.

Upvotes: 0

Views: 136

Answers (1)

Onkar
Onkar

Reputation: 2584

use some JS code to do

jQuery(function(){
$('a[data-fancybox="gallery"]').each(function(){
 if($(this).attr('title') != '' ){
  $(this).attr('data-caption', $(this).attr('title'));
 }
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery" title="title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery"  href="big_1.jpg">
<img src="small_1.jpg">
</a>

Upvotes: 1

Related Questions