Excuse my noobish mistake. I forgot to change my onclick variable, but my function no longer wants to play ball.
Instead of defining a complete function for each element, why not have just one function which is passed the clicked element’s ID. Sort of pseudo-code, as it would appear in HTML where PHP had already executed and output content:
<button onclick="tester( 123 );">
<script>
function tester( theID ) {
var source = element.getImageSource( theID );
otherElement.src = source;
}
</script>
Fake object references and methods for clarity in illustration of the passing the ID concept. 123
is the only thing PHP echoes out. The button element would be in the loop, but the script block only occurs once outside the loop.
I think it’s more performative to alter element class attributes instead of its src attribute. You could have all the images in place consecutively, but they are all but one hidden with CSS using a specific class attribute, let’s say “hidden”.
.hidden { display: none; }
On click, script would add the “hidden” class to the currently displayed image and remove it for the image that should be displayed.
Back to the passing the ID concept. jQuery does this automatically. You use CSS style selectors to define elements where we should listen for a click event. When the event callback executes, the clicked on element is available as this
within the function. You may decide it’s not worth invoking jQuery on this page, but FYI the ability to add listeners by CSS selectors and access the related element with this
is where jQuery can really be an advantage. IMHO of course 🙂
Thank you @bcworkz ! This didn’t occur to me.
My reasoning behind me choosing to not simply switch the display attributes (good idea, by the way) is because I’m targeting an <audio> tag also and want to avoid having an invisible audio file playing on top of the currently selected one.
I could also just learn how to pause the hidden element with JQuery, come to think of it lol
Thanks to bcworkz I have solved my puzzle. Here’s my work for anybody who might happen along here in the future.
Inside the loop:
<button style="background:#289700;" onclick="playEpisodes(<?php echo get_the_ID();?>)">Play Episode</button>
<div style="display:none" id="invis-image<?php echo get_the_ID();?>"><?php echo $image[0];?></div>
<div style="display:none" id="invis-mp3<?php echo get_the_ID();?>"><?php echo the_field('link'); ?></div>
<div style="display:none" id="invis-url<?php echo get_the_ID();?>"><?php echo the_permalink(); ?></div>
Outside loop:
<script> function playEpisodes(theID) {
// Make player visible
document.getElementById("player").style.display = "inherit";
// Calculate Source IDs
var imageElement = "invis-image" + theID;
var mp3Element = "invis-mp3" + theID;
var urlElement = "invis-url" + theID;
// Insert the image
var invisimg = document.getElementById(imageElement).innerHTML;
document.getElementById("player-img").src = invisimg;
// Insert URL
var invisurl = document.getElementById(urlElement).innerHTML;
document.getElementById("ep-url").action = invisurl;
// Insert the mp3
var invismp3 = document.getElementById(mp3Element).innerHTML;
// Play the mp3
document.getElementById("audio-source").src = invismp3;
document.getElementById("download").href = invismp3;
var audio = document.getElementById('audio-source');
audio.play();
document.getElementById("ply").style.display = "none";
document.getElementById("pse").style.display = "inline-block";
}
</script>
And my player:
<div style="display:none" id="player" class="pcast-player">
<img id="player-img" style="width: 100px;float: left;padding: 10px;" src="">
<div class="pcast-player-controls">
<button id="ply" title="Play" class="pcast-play"><i class="fa fa-play"></i></button>
<button id="pse" title="Pause" class="pcast-pause"><i class="fa fa-pause"></i></button>
<button title="Remind" class="pcast-rewind"><i class="fa fa-fast-backward"></i></button>
<button title="Forward" class="pcast-forward"><i class="fa fa-fast-forward"></i></button>
<span class="pcast-currenttime pcast-time">00:00</span>
<progress class="pcast-progress" value="0"></progress>
<span class="pcast-duration pcast-time">00:00</span>
<button title="Change Speed" class="pcast-speed">1x</button>
<button title="Mute" class="pcast-mute"><i class="fa fa-volume-up"></i></button>
<button title="Download" class="pcast-down"><a id="download" style="color:#fff" href="" class="fa fa-download" download=""></a></button>
<form style="display:inline-block;" id="ep-url" method="get" action=""><button type="submit" title="Visit episode page">Episode details</button></form>
<audio id="audio-source" src=""></audio>
</div>
The functionality is that the button is clicked within an item in the loop, the fixed position player appears (display:none to display:inherit) with the post’s data loaded into it, it plays automatically, and can be replaced by clicking a button in another item – starting the process over again.
Thanks to the whole WordPress community!