Include our sample stylesheet, in the <head>
of your page:
<link rel="stylesheet" href="//www.radiojar.com/wrappers/api-plugins/v1/css/current-show.css">
Or download it and tweak it to your liking.
Include the following code at the point in your web page where you want to display the current show:
<div id="rjp-currentshow">
<div class="element element-show-current" style="display: none;">
<div class="wrapper">
<h4 class="element-label"><i class="icon-microphone"></i> On air</h4>
<div class="show">
<div class="rjp-show-title-container">
<h4 class="rjp-show-title" id="show-title"></h4>
<h5 class="rjp-show-tagline" id="show-tagline"></h5>
</div>
<ul class="rjp-show-hosts" id="host-info"></ul>
</div>
</div>
</div>
</div>
Include the following code just before the closing body tag. Instead of "u0510s7hb", use your station's streamname. You can find it in the management area of your station: select Tools and then Widgets (check out the screenshot to the right for the exact location). Please note that in case there is no scheduled show for a specific time then nothing will be displayed at that time as current show.
<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
<script>
rjq('#rjp-currentshow').radiojar('currentShow', {
streamname: "u0510s7hb",
});
rjq('#rjp-currentshow').off('rj-show-change-event');
rjq('#rjp-currentshow').on('rj-show-change-event', function (event, data) {
if (data) {
rjq('.element-show-current').attr('style', 'display:block;background-image: url("//www.radiojar.com/content/shows/' + data.key + '/cover/")');
rjq('#show-title').html(data.title);
rjq('#show-tagline').html(data.tagline);
rjq('#host-info').empty();
rjq('#host-info').append('<li class="host-label">with:</li>');
for (x in data.host_profiles) {
rjq('.host-label').after('<li class="rjp-show-host"><img class="rjp-show-host-thumb" src="//www.radiojar.com/content/users/' + data.host_profiles[x].id + '/image/?resize=small"> ' + data.host_profiles[x].dj_info.nickname + ' </li>')
}
} else {
rjq('.element-show-current').attr('style', 'display:none;')
}
});
</script>