1. Open left.jsp, and add in the header :
- Code: Select all
<link rel="stylesheet" type="text/css" href="<c:url value="/style/slidernav.css"/>" media="screen, projection" />
<script type="text/javascript" src="<c:url value="/script/slidernav.js"/>">"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').sliderNav();
});
</script>
2. Remplace the actual accordeon/list :
- Code: Select all
<c:forEach items="${model.indexes}" var="index">
<table class="bgcolor1" style="width:100%;padding:0;margin:1em 0 0 0;border:0">
<tr style="padding:0;margin:0;border:0">
<th style="text-align:left;padding:0;margin:0;border:0"><a name="${index.key}"></a>
<h2 style="padding:0;margin:0;border:0"><c:if test="${model.reluctantArtistLoading}"><a href="left.view?indexLetter=${fn:replace(index.key,'#','0')}"></c:if>${index.key}<c:if test="${model.reluctantArtistLoading}"></a></c:if></h2>
</th>
<th style="text-align:right;">
<a href="#top"><img src="<spring:theme code="upImage"/>" alt=""></a>
</th>
</tr>
</table>
<c:forEach items="${index.value}" var="artist">
<p class="dense" style="padding-left:0.5em">
<span title="${fn:escapeXml(artist.name)}">
<sub:url value="artist.view" var="artistUrl"><sub:param name="id" value="${artist.id}"/></sub:url>
<a target="main" href="${artistUrl}">${fn:escapeXml(artist.name)}</a>
</span>
</p>
</c:forEach>
</c:forEach>
With :
- Code: Select all
<div id="slider">
<div class="slider-content">
<ul style="margin:0;padding:0;">
<c:forEach items="${model.indexedArtists}" var="entry">
<li id="${entry.key.index}">
<a name="${index.key}" class="title">{entry.key.index}</a>
<ul style="margin:0;padding:0;">
<c:forEach items="${entry.value}" var="artist">
<li>
<span>
<sub:url value="main.view" var="mainUrl">
<sub:param name="id" value="${mediaFile.id}"/></sub:url>
<a target="main" href="${mainUrl}">
<str:truncateNicely upper="${model.captionCutoff}">
${artist.name}
</str:truncateNicely>
</a>
</span>
</li>
</c:forEach>
</ul>
</li>
</c:forEach>
</ul>
</div>
</div>
If you're using MusicCabinet, the variable aren't the same :
- Code: Select all
<div id="slider">
<div class="slider-content">
<ul style="margin:0;padding:0;">
<c:forEach items="${model.indexes}" var="index">
<li id="${index.key}">
<a name="${index.key}" class="title">${index.key}</a>
<ul style="margin:0;padding:0;">
<c:forEach items="${index.value}" var="artist">
<li>
<span>
<sub:url value="artist.view" var="artistUrl">
<sub:param name="id" value="${artist.id}"/></sub:url>
<a target="main" href="${artistUrl}">
${fn:escapeXml(artist.name)}
</a>
</span>
</li>
</c:forEach>
</ul>
</li>
</c:forEach>
</ul>
</div>
</div>
3. Here's the modified webapp/style/slidernav.css adapted for dark theme : (you can use the original white design)
- Code: Select all
/*
* SliderNav - A Simple Content Slider with a Navigation Bar
* Copyright 2010 Monjurul Dolon, http://mdolon.com/
* Released under the MIT, BSD, and GPL Licenses.
* More information: http://devgrow.com/slidernav
* Adapted to Subsonic by totoclectic
*/
/* if you want to display this with a nice font */
@import url(http://fonts.googleapis.com/css?family=Comfortaa:400,700);
.slider { width: 195px; min-height: 200px; display: block; position: relative; background-color: #111111; overflow: hidden; }
.slider ul { list-style: none; }
.slider-content { float: left; width: 100%; display: block; overflow: auto; min-height: 250px; }
.slider-content ul { float: left; width: 100%; display: block; position: relative; }
.slider-content ul li { float: left; width: 100%; }
.slider-content ul ul li a { color: #bbbbbb; font-family: 'Comfortaa', sans-serif; font-size: 1em; padding: 3px 17px 1px 10px; display: block; border-bottom: 1px solid #000000; text-transform: capitalize; }
.slider-content ul ul li a:hover { color: #ffffff; background-image: none; background-color: #1a1a1a; }
.slider-content .title { background-color: #222222; font-family: 'Comfortaa', sans-serif; font-size: 1.3em; padding: 4px 0; text-indent: 12px; color: #cccccc; width: 100%; float: left; font-weight: bold; text-transform: uppercase; }
.slider-content .selected .title { color: #ffffff; }
.slider .slider-nav { position: absolute; right: 0; top: 0; background: #111111; min-height: 250px; }
.slider .slider-nav ul { padding: 3px 0; }
.slider .slider-nav li a { font-family: 'Comfortaa', sans-serif; padding: 3px 5px; line-height: 14px; text-align: center; color: #aaaaaa; font-weight: bold; display: block; text-transform: uppercase; cursor: pointer; }
.slider #debug { position: absolute; bottom: 0; left: 0; padding: 5px; background: #000; color: #ffffff; }
.slider .arrow { font-size: 0px; line-height: 0%; width: 0px; border-bottom: 8px solid #555; border-left: 5px solid #111111; border-right: 5px solid #111111; position: relative; top: 5px; }
.slider .down { border-bottom: none; border-top: 8px solid #555; top: 15px; }
.slider .slide-up, .slider .slide-down { height: 20px; background-color: #222222; text-align: center; cursor: pointer; float: right; width: 100%; position: relative; }
.slider .slide-up:hover, .slider .slide-down:hover { background: #111111; }
4. Place slidernav.js in webapp/script, open it and replace the line 8 :
- Code: Select all
var defaults = { items: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"], debug: false, height: null, arrows: true};
With :
- Code: Select all
var defaults = { items: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"], debug: false, height: null, arrows: true};
That's all folks !
JQuery plugin infos and download on http://devgrow.com/slidernav/
