Hi Jim,
For the Carousel, I first created a Page Datafolder at My.Carousel with three fields:
You'll also need Bootstrap installed in the Frontend folder and the JQuery.js, Bootstrap.js and .css files called via either the page template (how I did it), or from the function (useful if you want to re-package it):
David
For the Carousel, I first created a Page Datafolder at My.Carousel with three fields:
- Image (C1 Image File)
- Page (C1 Page)
-
Position (Integer)
<functions>
<f:function xmlns:f="http://www.composite.net/ns/function/1.0" name="My.Carousel.GetCarouselXml" localname="GetCarouselXml">
<f:param name="PropertyNames">
<f:paramelement value="Position" />
<f:paramelement value="Id" />
<f:paramelement value="Image" />
<f:paramelement value="Image.Title" />
<f:paramelement value="Image.FileName" />
<f:paramelement value="Page" />
<f:paramelement value="Page.Title" />
<f:paramelement value="Page.MenuTitle" />
</f:param>
<f:param name="Filter">
<f:function name="BSU.Carousel.ActivePageReferenceFilter" />
</f:param>
<f:param name="OrderByField" value="Position" />
</f:function>
</functions><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
<xsl:param name="carousel" select="/in:inputs/in:result[@name='GetCarouselXml']/Carousel" />
<xsl:template match="/">
<html>
<head />
<body>
<xsl:if test="$carousel">
<div id="carousel-example-generic" class="carousel slide wide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<xsl:for-each select="$carousel">
<li data-target="#carousel-example-generic" data-slide-to="0">
<xsl:if test="position() = 1">
<xsl:attribute name="class">active</xsl:attribute>
</xsl:if>
<xsl:attribute name="data-slide-to">
<xsl:value-of select="position()-1" />
</xsl:attribute>
</li>
</xsl:for-each>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<xsl:for-each select="$carousel">
<div class="item">
<xsl:if test="position() = 1">
<xsl:attribute name="class">item active</xsl:attribute>
</xsl:if>
<xsl:apply-templates select="." />
</div>
</xsl:for-each>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
<xsl:text />
</span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
<xsl:text />
</span>
<span class="sr-only">Next</span>
</a>
</div>
</xsl:if>
</body>
</html>
</xsl:template>
<xsl:template match="*">
<xsl:choose>
<xsl:when test="@Page != ''">
<a href="~/Renderers/Page.aspx?pageId={@Page}" title="">
<xsl:attribute name="href">
<xsl:text>~/page(</xsl:text>
<xsl:value-of select="@Page" />
<xsl:text>)?mw=1200&mh=1200&q=60</xsl:text>
</xsl:attribute>
<xsl:choose>
<xsl:when test="@Page.Title != ''">
<xsl:attribute name="title">
<xsl:value-of select="@Page.Title" />
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="title">
<xsl:value-of select="@Page.MenuTitle" />
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<img src="" alt="" title="">
<xsl:attribute name="src">
<xsl:text>~/media(</xsl:text>
<xsl:value-of select="@Image" />
<xsl:text>)?mw=1200&mh=1200&q=60</xsl:text>
</xsl:attribute>
<xsl:choose>
<xsl:when test="@Image.Title != ''">
<xsl:attribute name="alt">
<xsl:value-of select="@Image.Title" />
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="alt">
<xsl:value-of select="@Image.FileName" />
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
</img>
</a>
</xsl:when>
<xsl:otherwise>
<img src="" alt="">
<xsl:attribute name="src">
<xsl:text>~/media(</xsl:text>
<xsl:value-of select="@Image" />
<xsl:text>)?mw=1200&mh=1200&q=60</xsl:text>
</xsl:attribute>
<xsl:choose>
<xsl:when test="@Image.Title != ''">
<xsl:attribute name="alt">
<xsl:value-of select="@Image.Title" />
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="alt">
<xsl:value-of select="@Image.FileName" />
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
</img>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>You'll also need Bootstrap installed in the Frontend folder and the JQuery.js, Bootstrap.js and .css files called via either the page template (how I did it), or from the function (useful if you want to re-package it):
<script id="jquery" type="text/javascript" src="/Frontend/JQuery/jquery-1.11.3.min.js"></script>
<script id="bootstrap" type="text/javascript" src="/Frontend/Bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/Frontend/Bootstrap/css/bootstrap.less" />David