Isotopic link

[InsightDezign]

Can you tell me how the isotopic link works? I see where the url is called out but that url is used on the entire block. I’m assuming a script is doing this but I need to know what script is so I can modify the way the link works. I want to open a modal rather than link to the post page.

[Ernest Marcinko]

Hi!

Sure, the link is indeed controlled by the main script. However I do not recommend direct modifications to it, as it will reset every time you update the plugin. Instead, using a custom script within your child theme/theme functions file is a much viable option.
To prevent the redirection and to get the link URL, you need to attach an event to the result container, with event default prevention like so:

jQuery(function($) {
  $('.asp_r').off('click', '.asp_isotopic_item');
  $('.asp_r').on('click', '.asp_isotopic_item', function(e){
    e.preventDefault(); // Prevent redirection
    var url = $(this).find('a.asp_res_url').attr('href'); // Get the link URL
    // Do your code thing here, use the url variable for the link URL
  });
});

Now, to use it in the functions.php file in your theme directory, you can construct something like:

add_action('wp_footer', 'asp_footer_script_custom');
function asp_footer_script_custom() {
  ?>
  <script type="text/javascript">
  jQuery(function($) {
    $('.asp_r').off('click', '.asp_isotopic_item');
    $('.asp_r').on('click', '.asp_isotopic_item', function(e){
      e.preventDefault(); // Prevent redirection
      var url = $(this).find('a.asp_res_url').attr('href'); // Get the link URL
      // Do your code thing here, use the url variable for the link URL
    });
  });
  </script>
  <?php
}

The url variable holds the result URL, and the redirection is already prevented, so you can do whatever you want after that line.

[Author]

Posts