Witam serdecznie,
Mam taki kod html:
<div class="entry-content">
<p>lorem </p>
<figure class="wp-block-image size-large">
<a href="wp-content/uploads/2021/07/strona_1-scaled.jpg">
<img loading="lazy" width="1024" height="717" src="wp-content/uploads/2021/07/strona_1-1024x717.jpg" alt="testowo" class="wp-image-2703" srcset="wp-content/uploads/2021/07/strona_1-1024x717.jpg 1024w, wp-content/uploads/2021/07/strona_1-300x210.jpg 300w, wp-content/uploads/2021/07/strona_1-768x537.jpg 768w, wp-content/uploads/2021/07/strona_1-1536x1075.jpg 1536w, wp-content/uploads/2021/07/strona_1-2048x1433.jpg 2048w, wp-content/uploads/2021/07/strona_1-370x259.jpg 370w, wp-content/uploads/2021/07/strona_1-270x189.jpg 270w, wp-content/uploads/2021/07/strona_1-570x399.jpg 570w, wp-content/uploads/2021/07/strona_1-740x518.jpg 740w" sizes="(max-width: 1024px) 100vw, 1024px"/>
</a>
<figcaption>testowo</figcaption>
</figure>
<figure class="wp-block-image size-large">
<a href="wp-content/uploads/2021/07/strona_2-scaled.jpg">
<img loading="lazy" width="1024" height="718" src="wp-content/uploads/2021/07/strona_2-1024x718.jpg" alt="" class="wp-image-2704" srcset="wp-content/uploads/2021/07/strona_2-1024x718.jpg 1024w, wp-content/uploads/2021/07/strona_2-300x210.jpg 300w, wp-content/uploads/2021/07/strona_2-768x538.jpg 768w, wp-content/uploads/2021/07/strona_2-1536x1077.jpg 1536w, wp-content/uploads/2021/07/strona_2-2048x1436.jpg 2048w, wp-content/uploads/2021/07/strona_2-370x259.jpg 370w, wp-content/uploads/2021/07/strona_2-270x189.jpg 270w, wp-content/uploads/2021/07/strona_2-570x400.jpg 570w, wp-content/uploads/2021/07/strona_2-740x519.jpg 740w" sizes="(max-width: 1024px) 100vw, 1024px"/>
</a>
</figure>
<figure class="wp-block-image size-large">
<a href="wp-content/uploads/2021/07/strona_3-scaled.jpg">
<img loading="lazy" width="1024" height="717" src="wp-content/uploads/2021/07/strona_3-1024x717.jpg" alt="" class="wp-image-2705" srcset="wp-content/uploads/2021/07/strona_3-1024x717.jpg 1024w, wp-content/uploads/2021/07/strona_3-300x210.jpg 300w, wp-content/uploads/2021/07/strona_3-768x538.jpg 768w, wp-content/uploads/2021/07/strona_3-1536x1076.jpg 1536w, wp-content/uploads/2021/07/strona_3-2048x1435.jpg 2048w, wp-content/uploads/2021/07/strona_3-370x259.jpg 370w, wp-content/uploads/2021/07/strona_3-270x189.jpg 270w, wp-content/uploads/2021/07/strona_3-570x399.jpg 570w, wp-content/uploads/2021/07/strona_3-740x518.jpg 740w" sizes="(max-width: 1024px) 100vw, 1024px"/>
</a>
</figure>
<figure class="wp-block-image size-large">
<a href="wp-content/uploads/2021/07/strona_4-scaled.jpg">
<img loading="lazy" width="1024" height="718" src="wp-content/uploads/2021/07/strona_4-1024x718.jpg" alt="" class="wp-image-2706" srcset="wp-content/uploads/2021/07/strona_4-1024x718.jpg 1024w, wp-content/uploads/2021/07/strona_4-300x210.jpg 300w, wp-content/uploads/2021/07/strona_4-768x538.jpg 768w, wp-content/uploads/2021/07/strona_4-1536x1077.jpg 1536w, wp-content/uploads/2021/07/strona_4-2048x1436.jpg 2048w, wp-content/uploads/2021/07/strona_4-370x259.jpg 370w, wp-content/uploads/2021/07/strona_4-270x189.jpg 270w, wp-content/uploads/2021/07/strona_4-570x400.jpg 570w, wp-content/uploads/2021/07/strona_4-740x519.jpg 740w" sizes="(max-width: 1024px) 100vw, 1024px"/>
</a>
</figure>
<figure class="wp-block-image size-large">
<a href="wp-content/uploads/2021/07/strona_5-scaled.jpg">
<img loading="lazy" width="1024" height="729" src="wp-content/uploads/2021/07/strona_5-1024x729.jpg" alt="" class="wp-image-2707" srcset="wp-content/uploads/2021/07/strona_5-1024x729.jpg 1024w, wp-content/uploads/2021/07/strona_5-300x214.jpg 300w, wp-content/uploads/2021/07/strona_5-768x547.jpg 768w, wp-content/uploads/2021/07/strona_5-1536x1094.jpg 1536w, wp-content/uploads/2021/07/strona_5-2048x1459.jpg 2048w, wp-content/uploads/2021/07/strona_5-370x264.jpg 370w, wp-content/uploads/2021/07/strona_5-270x192.jpg 270w, wp-content/uploads/2021/07/strona_5-570x406.jpg 570w, wp-content/uploads/2021/07/strona_5-740x527.jpg 740w" sizes="(max-width: 1024px) 100vw, 1024px"/>
</a>
</figure>
<figure class="wp-block-image size-large">
<a href="wp-content/uploads/2021/07/strona_7-scaled.jpg">
<img loading="lazy" width="1024" height="756" src="wp-content/uploads/2021/07/strona_7-1024x756.jpg" alt="" class="wp-image-2709" srcset="wp-content/uploads/2021/07/strona_7-1024x756.jpg 1024w, wp-content/uploads/2021/07/strona_7-300x222.jpg 300w, wp-content/uploads/2021/07/strona_7-768x567.jpg 768w, wp-content/uploads/2021/07/strona_7-1536x1134.jpg 1536w, wp-content/uploads/2021/07/strona_7-2048x1512.jpg 2048w, wp-content/uploads/2021/07/strona_7-370x273.jpg 370w, wp-content/uploads/2021/07/strona_7-270x199.jpg 270w, wp-content/uploads/2021/07/strona_7-570x421.jpg 570w, wp-content/uploads/2021/07/strona_7-740x547.jpg 740w, wp-content/uploads/2021/07/strona_7-80x60.jpg 80w" sizes="(max-width: 1024px) 100vw, 1024px"/>
</a>
</figure>
<figure class="wp-block-image size-large">
<a href="wp-content/uploads/2021/07/strona_6-scaled.jpg">
<img loading="lazy" width="1024" height="722" src="wp-content/uploads/2021/07/strona_6-1024x722.jpg" alt="" class="wp-image-2708" srcset="wp-content/uploads/2021/07/strona_6-1024x722.jpg 1024w, wp-content/uploads/2021/07/strona_6-300x212.jpg 300w, wp-content/uploads/2021/07/strona_6-768x542.jpg 768w, wp-content/uploads/2021/07/strona_6-1536x1083.jpg 1536w, wp-content/uploads/2021/07/strona_6-2048x1445.jpg 2048w, wp-content/uploads/2021/07/strona_6-370x261.jpg 370w, wp-content/uploads/2021/07/strona_6-270x190.jpg 270w, wp-content/uploads/2021/07/strona_6-570x402.jpg 570w, wp-content/uploads/2021/07/strona_6-740x522.jpg 740w" sizes="(max-width: 1024px) 100vw, 1024px"/>
</a>
</figure>
</div>
Potrzebuję dodać do zdjęć ten komponent (potrzebuję podpisy pod zdjęciami): https://arunmichaeldsouza.github.io/picla/.
Nie mogę modyfikować php - mogę dodać tylko JS/CSS.
Zrobiłem coś takiego:
jQuery(window).on('load', function() {
jQuery(".wp-block-image img").each(function(){
//console.log(this);
jQuery(this).addClass("picla");
jQuery(this).attr('data-label-class', 'label-class');
//jQuery(this).attr('alt', 'teeeest' + Math.random());
})
jQuery(".wp-block-image a").each(function(){
console.log(this);
if (jQuery(this).find('img').length) {
var href = this;
var alt = '';
var img = jQuery(this).find("img"),
len = img.length;
if( len > 0 ){
alt = img.first().attr("alt");
jQuery(href).prop('title', alt);
}
jQuery(href).addClass("playerVideoF2 fancybox fancyboxX");
}
})
console.log('ok');
jQuery(".playerVideoF").colorbox({iframe:true, width: "100%", height: "100%", maxWidth:'95%', maxHeight:'95%'});
jQuery(".playerVideoF2").colorbox({rel:'playerVideoF2', maxWidth:'95%', maxHeight:'95%'});
});
Działa to po części poprawnie. Działa colorbox - picia nie pokazuje podpisów.
Mam taki wynik(z firebug):
<figure class="wp-block-image size-large"><a href="wp-content/uploads/2021/07/strona_1-scaled.jpg" title="testowo" class="playerVideoF2 fancybox fancyboxX cboxElement"><img loading="lazy" width="1024" height="717" src="wp-content/uploads/2021/07/strona_1-1024x717.jpg" alt="testowo" class="wp-image-2703 picla" srcset="wp-content/uploads/2021/07/strona_1-1024x717.jpg 1024w, wp-content/uploads/2021/07/strona_1-300x210.jpg 300w, wp-content/uploads/2021/07/strona_1-768x537.jpg 768w, wp-content/uploads/2021/07/strona_1-1536x1075.jpg 1536w, wp-content/uploads/2021/07/strona_1-2048x1433.jpg 2048w, wp-content/uploads/2021/07/strona_1-370x259.jpg 370w, wp-content/uploads/2021/07/strona_1-270x189.jpg 270w, wp-content/uploads/2021/07/strona_1-570x399.jpg 570w, wp-content/uploads/2021/07/strona_1-740x518.jpg 740w" sizes="(max-width: 1024px) 100vw, 1024px" data-label-class="label-class"></a><figcaption>testowo</figcaption></figure>
W jaki sposób mogę to poprawić?