This Confluence wiki site, maintained by DuraSpace prior to the recent merger with LYRASIS, will transition from the duraspace.org domain to the lyrasis.org domain on Saturday, Nov 16 beginning at approximately 7pm ET. A period of downtime of 2-3 hours is expected. After the transition, this wiki will be available at https://wiki.lyrasis.org/. All links to duraspace.org wiki pages will be redirected to the correct lyrasis.org URL. If you have questions prior to or following the transition please contact: wikihelp@lyrasis.org.

Page tree
Skip to end of metadata
Go to start of metadata

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/jquery.min.js (Download the jquery.min.js and place it in the directory)
  • [dspace-src]/xmlui/themes/Mirage/lib/js/nivo-slider/[slides] (Create the slides directory and place the slide images files in it)

Instructions:

  1. Follow the Item #4 in this tutorial and create the static page about.
  2. 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>
    
  3. 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.min.js</xsl:text>
    	   </xsl:attribute>&#160;</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>&#160;</script>
    
    	<script type="text/javascript">
    	   $(window).load(function() {
    	      $('#slider').nivoSlider();
    	   });
    	</script>
       </xsl:if>
      ...
    </xsl:template>
    
  4. 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>
    
  5. Add the Nivo css styles to the bottom of the style.css
    .nivoSlider {
        position:relative;
        width:618px; /* Change this to your images width */
        height:246px; /* Change this to your images height */
        background:url(images/loading.gif) no-repeat 50% 50%;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        display:none;
    }
    .nivoSlider a {
        border:0;
        display:block;
    }