JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/img/demopage/thumb-3.jpg" alt=""></a>
    
    <div class="wrap">
        <img alt="AGI-Icon-instruments" src="http://agi.enhance2.co.uk/Sites/AGI/library/images/Main content-AGI-Icon-instruments-1.png" style="width: 60px; height: 60px;" />    
    </div>

JavaScript

jQuery( ".gallery-content img" ).wrap( '<a href="" data-lightbox="proucts-agi">' );

jQuery('.gallery-content img').each(function(){
  var src = jQuery(this).attr('src');
  jQuery(this).parent().attr('href', src);
});

 jQuery(".gallery-content a").each(function () {
     jQuery(this).attr("href", jQuery(this).attr("href").replace("Left column", "Main content"));
 });