In the example below Nivo slider is been added to a static page in Mirage theme. Same concept can be used to add the slideshow to any page on any Manakin theme.
Files Modified
[dspace-src]/xmlui/themes/Mirage/lib/xsl/core/page-structure.xsl
[dspace-src]/xmlui/themes/Mirage/lib/css/style.css
Files Added:
[dspace-src]/xmlui/themes/Mirage/lib/js/[nivo-slider] (Download and extract Nivo slider
and place it here)[dspace-src]/xmlui/themes/Mirage/lib/js/nivo-slider/[slides] (Create the slides directory and place the slide images files in it)
Instructions:
- Follow the Item #4 in this tutorial and create a static page called about.
- Add Nivo css to page-structure.xsl
<xsl:template name="buildHead"> <head> ... <xsl:if test="starts-with($request-uri, 'page/about')"> <link rel="stylesheet" type="text/css"> <xsl:attribute name="media"> <xsl:value-of select="@qualifier"/> </xsl:attribute> <xsl:attribute name="href"> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='contextPath'][not(@qualifier)]"/> <xsl:text>/themes/</xsl:text> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='theme'][@qualifier='path']"/> <xsl:text>/lib/js/nivo-slider/nivo-slider.css</xsl:text> </xsl:attribute> </link> <link rel="stylesheet" type="text/css"> <xsl:attribute name="media"> <xsl:value-of select="@qualifier"/> </xsl:attribute> <xsl:attribute name="href"> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='contextPath'][not(@qualifier)]"/> <xsl:text>/themes/</xsl:text> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='theme'][@qualifier='path']"/> <xsl:text>/lib/js/nivo-slider/themes/default/default.css</xsl:text> </xsl:attribute> </link> </xsl:if> ... </head> </xsl:template> - Add Nivo Javascipt to page-structure.xsl
<xsl:template name="addJavascript"> ... <xsl:if test="starts-with($request-uri, 'page/about')"> <script type="text/javascript"> <xsl:attribute name="src"> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='contextPath'][not(@qualifier)]"/> <xsl:text>/themes/</xsl:text> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='theme'][@qualifier='path']"/> <xsl:text>/lib/js/nivo-slider/jquery-1.4.2.min.js</xsl:text> </xsl:attribute> </script> <script type="text/javascript"> <xsl:attribute name="src"> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='contextPath'][not(@qualifier)]"/> <xsl:text>/themes/</xsl:text> <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='theme'][@qualifier='path']"/> <xsl:text>/lib/js/nivo-slider/jquery.nivo.slider.pack.js</xsl:text> </xsl:attribute> </script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </xsl:if> ... </xsl:template> - Add Slide images to page-structure.xsl
<xsl:template match="dri:body"> <div id="ds-body"> ... <xsl:choose> <xsl:when test="starts-with($request-uri, 'page/about')"> <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img> <xsl:attribute name="src"> <xsl:value-of select="$theme-path"/> <xsl:text>/lib/js/nivo-slider/slides/image-1.jpg</xsl:text> </xsl:attribute> </img> <img> <xsl:attribute name="src"> <xsl:value-of select="$theme-path"/> <xsl:text>/lib/js/nivo-slider/slides/image-2.jpg</xsl:text> </xsl:attribute> </img> </div> </div> ... </xsl:when> <xsl:otherwise> <xsl:apply-templates /> </xsl:otherwise> </xsl:choose> </div> </xsl:template>