Versions Compared

Old Version 7

changes.mady.by.user Dhanushka Samarakoon

Saved on

compared with

New Version Current

changes.mady.by.user Dhanushka Samarakoon

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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
    Code Block
    <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
    Code Block
    <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
    Code Block
    <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
    Code Block
    .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;
}