This widget relies on three parts to work:
- The CSS. A starter stylesheet file is provided here as an example. Feel free to link to it directly, or download it and tweak it to arrive at a design that matches your website's look & feel.
Check out the live demo below and click to get instructions for using the code on your website.
Show code Live example on JSFiddle
Include our sample stylesheet, in the <head> of your page:
<link rel="stylesheet" href="//www.radiojar.com/wrappers/api-plugins/v1/css/djs-list.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 list of your djs (the <script> tag defines the template for list items):
<div id="rj-djs-list"> </div> <script id="lists-dj-item" type="text/html"> <li class="rj-dj-item"> <div class="content"> <img class="item-thumb" src="//www.radiojar.com/content/users/<%=dj.id%>/image/" /> <h4 class="item-nickname"><%= dj.basic_info.first_name %> <%= dj.basic_info.last_name %></h4> <h5 class="item-name"><%= dj.dj_info.nickname %></h5> </div> </li> </script>
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).