Affichage des jacquettes et ecoute des extraits musicaux
Affichage des jacquettes de CD
A partir des feuilles de style XSLT vous pouvez afficher les jacquettes de CD au niveau des résultats de recherche ainsi qu'au niveau du détail bibliographique.
Au niveau de la feuille de style le contenu de la 316$u va correspondre à une variable (coverCD)
<xsl:variable name="coverCD" select="marc:datafield[@tag=316]/marc:subfield[@code='u']"/>
Ensuite on demande d'afficher le contenu de la 361$u
<xsl:if test="$coverCD!=' '"> <xsl:if test="marc:datafield[@tag=316]"> <xsl:for-each select="marc:datafield[@tag=316]"> <img height="100" width="100"><xsl:attribute name="src"><xsl:value-of select="marc:subfield[@code='u']"/></xsl:attribute></img> <xsl:choose> <xsl:when test="position()=last()"/> </xsl:choose> </xsl:for-each> </xsl:if>
Ecoute des extraits musicaux
A partir des feuilles de style XSLT vous pouvez mettre en écoute des extraits musicaux.
Les titres des morceaux(464$t) seront classés en 1ière colonne d'un tableau alors que les liens vers les fichiers mp3 seront classés en 2nd colonne de ce même tableau.
<xsl:if test="marc:datafield[@tag=464]"> <div class="panel panel-default results_summary"> <div class="panel-heading" style="background-color:#FAFAFA"> Contenu : </div> <div class="panel-body" style="height:190px;overflow:auto;background-color:#FAFAFA"> <xsl:for-each select="marc:datafield[@tag=464]"> <p> <xsl:choose> <xsl:when test="marc:subfield[@code='u']"> <a> <xsl:attribute name="href"><xsl:value-of select="marc:subfield[@code='u']"/></xsl:attribute> <xsl:attribute name="title"><xsl:text>play-pause</xsl:text></xsl:attribute> <xsl:attribute name="class"><xsl:text>sm2_button</xsl:text></xsl:attribute> <xsl:text>play-pause</xsl:text> </a> </xsl:when> <xsl:otherwise> <img id="noplay" width="18" height="18"><xsl:attribute name="src">/public/images/noplay.png</xsl:attribute></img> </xsl:otherwise> </xsl:choose> <xsl:text> - </xsl:text> <xsl:if test="marc:subfield[@code='h']"> <xsl:value-of select="marc:subfield[@code='h']"/><xsl:text> - </xsl:text> </xsl:if> <xsl:choose> <xsl:when test="marc:subfield[@code='t']"><xsl:value-of select="marc:subfield[@code='t']"/></xsl:when> <xsl:when test="marc:subfield[@code='i']"><xsl:value-of select="marc:subfield[@code='i']"/></xsl:when> <xsl:otherwise>Titre inconnu</xsl:otherwise> </xsl:choose> <xsl:if test="marc:subfield[@code='a']"> <i> <xsl:for-each select="marc:subfield[@code='a']"> <xsl:text> - </xsl:text><xsl:value-of select="."/> </xsl:for-each> </i> </xsl:if>
intranetusercss
<hidden>
.audiospan{
line-height:30px; cursor:pointer;
}
.audiospan_withoutmp3{
line-height:30px;
}
a.sm2_button { position:relative; display:inline-block; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */ width:18px; height:18px; text-indent:-9999px; /* don't show link text */ overflow:hidden; /* don't draw inner link text */ vertical-align:middle; /* and, a bit of round-ness for the cool browsers. */ border-radius:2px; margin-top:-1px; /* vertical align tweak */ /* safari 3.1+ fun (/W3 working draft extension, TBD.) */ -webkit-transition-property: hover; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out 0s; /* firefox 4 (couldn't sort out -moz-transform vs. MozTransform, so, "all" for now) */ -o-transition-property: background-color; /* opera 10.5 */ -o-transition-duration: 0.15s; /* weird IE 6/7 display fixes, and/or I'm doing it wrong */ *text-indent:0px; *line-height:99em; *vertical-align: top; } a.sm2_button:focus { outline:none; /* maybe evil, but don't show the slight border outline on focus. */ }
a.sm2_button, a.sm2_button.sm2_paused:hover { background-color:#77CC33; background-image:url(/public/opac/sound/demo/mp3-player-button/image/arrow-right-white.png); /* where possible, use data: and skip the HTTP request. Fancy-pants. Would use short-hand background: for above, but IE 8 doesn't override background-image. */ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAbklEQVQY02NgQALv1jZMAF/vvwuIs9HEUBUBTbj4HwIeA3EGVsVAxtn/qOAVUGM8uknIiv4hsV8A5ZKxKfoLVvnvHwifAzLtMKwDSQLBVSBti27dJajkcSD2RJODO3wtkOOMz/tMSJJYAxMA5dmsL0IfubQAAAAASUVORK5CYII=); background-image: none, url(/public/opac/sound/demo/mp3-player-button/image/arrow-right-white-2x.png); background-size: 9px 10px; *background-image:url(/public/opac/sound/demo/mp3-player-button/image/arrow-right-white.gif); /* IE 6+7 don't do DATA: URIs */ background-repeat:no-repeat; background-position:5px 50%; *background-position:5px 4px; /* IE 6 again */ }
a.sm2_button:hover, a.sm2_button.sm2_playing, a.sm2_button.sm2_playing:hover { background-color:#eeaa33; }
a.sm2_button.sm2_playing, a.sm2_button.sm2_playing:hover { -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); }
a.sm2_button.sm2_paused, a.sm2_button.sm2_paused:hover { background-color:#eeaa33; }
.panel.panel-default.results_summary { box-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
</hidden>
koha xslt cd jacquette player