Here is a sort of hack to achieve this function
two efficient ways to go about this
1.
document.$('fancybox').addEventListener('click', function() { window.location.href = '<?$=data['recording_link']?>' } );
//non-jquery:
document.getElementsByClassName('fancybox')[0].addEventListener('click', function() { window.location.href = '<?=$data['recording_link']?>' } );
But as @Dr_J_Manish has already stated this doesn't work but will instead direct him to a nonsensical webpage address at '<?=$data['recording_link']?>' (Not a website address... DUH.)
2.
The second approach absolutely will work for @DR_J_Manish 's purpose: to activate a PHP function on a link click w/out the annoying overlay that appears when hovering a link.
To achieve this we will need to use a major workaround... This workaround could be considered a 'HACK':
1.
Make a new element and give it the ID 'Play-Recording':
<button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>
2.
Make another new element which is exactly the same as @DR_J_Manish 's code above except for the class and other styling attributes.
<a id="GetClickedOn" href="<?=$data['recording_link']?>"> I'm Hidden! </a>
Make sure that this element is at the VERY BOTTOM of the Body tag or else there could be interference.
3.
Now make this element invisible and always off the screen...
Code so far should look like:
<body>
<!--Put other stuff here or whatever-->
<button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>
<!--Put some other stuff here...-->
<!--End of other content other than hidden stuff...-->
<a id="GetClickedOn" href="<?=$data['recording_link']?>" style="visibility: none; position: fixed; bottom: 3000%; width: 0; height: 0;"> I'm Hidden! </a>
</body>
4.
Now for the fun part... Javascript... This part is pretty simple... add this code to the bottom of your page just after the <a href="">I'm hidden</a> tag we just made
<script>
document.getElementById('Play-Recording').addEventListener('click', function() { document.getElementById('GetClickedOn').click() } );
</script>
5.
So your final code snippet should look like:
<body>
<!--Other Code-->
<button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>
<!--Some More Code-->
<a id="GetClickedOn" href="<?=$data['recording_link']?>" style="visibility: none; position: fixed; bottom: 3000%; width: 0; height: 0;"> I'm Hidden! </a>
<script>
document.getElementById('Play-Recording').addEventListener('click', function() { document.getElementById('GetClickedOn').click() } );
</script>
</body>
Now if you really want to be efficient then you could research how to do PHP commands in javascript... but I know thats not the easiest...
You could also transfer the code inside the script tag to a .js file and then link it like so --> <script src="path-to-my-js-file.js"></script>.
Here is a snippet to demonstrate what type of thing i'm going for...
var button1 = document.getElementById('click1');
var button2 = document.getElementById('click2');
button1.addEventListener('click', function() { button2.click() } );
<button id="click1">Click Me</button>
<br/><br/>
<span>And get the same result as </span><a id="click2" style="text-decoration: none;" href="https://example.com"><button><strong>Clicking Me</strong></button></a>
<br/>
<p>
Re-Run the code-snippet to see the code in use again in case you missed it...
<br/>
Notice how with the first button there isn't any href attribute or anchor tag (the 'a' tag).
</p>
![<a class="fancybox fancybox.iframe more_info_btn" href="<?=$data\['recording_link'\]?>" >Play Recording </a>](../../images/3817868423.webp)
