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;
    }