Ian, if it were my site, I would tackle the Song List as a searchable, filtering & ordering HTML table.
It would use this approach: https://www.talkgraphics.com/showthr...811#post635811
The demo generates the page very quickly and rendering is well under a second for 1,000 rows of more detail than your Songs currently.
The file Table.htm can be tested and run separately.
Yours would have the form of:
Code:
<link rel="stylesheet" href="jquery.dataTables.min.css">
<script src="jquery.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="dataTableLoader.js"></script>
<table class="tg cell-border compact display">
<thead>
<tr>
<th>Index</th>
<th>Song Title</th>
<th>Composition By</th>
<th>Lyrics</th>
<th>Chords</th>
<th>Music</th>
<th>Recording</th>
<th>Notes</th>
<th>Reference</th>
<th>Video</th>
<th>Other</th>
</tr>
</thead>
<tbody>
<tr>
<td>B</td>
<td><a href="Songs/B/the_b_and_mk.htm" target="_top">The B & MK</a></td>
<td>(c) Graeme Meek (2008)</td>
<td>Chorus: They’re bringing the cut to the town;/They’ll be bringing the boats from the Grand Union way./May the doubters, their sorrows, all drown/When we welcome the boats on the B&MK.</td>
<td>Chords Symbol</td>
<td>Music Symbol</td>
<td>Audio Symbol</td>
<td>Notes Symbol</td>
<td>Reference Symbol</td>
<td>Video Symbol</td>
<td><a href="Songs/B/the_b_and_mk.htm#xl_anchor">Read more...</a></td>
</tr>
[Lots of Song details follow...]
</tbody>
</table>
It works across Variants though I might create a sub-version of the HTML table if the Choruses are too large/wide.
It has a built-in Search.
You can add links to all the Symbols if you want to play the audio from the Song List or jump to the reference page, opening the required pop-up layer.
Acorn
Bookmarks