Using Bootstrap's carousel feature on site

matthew.wren's Avatar

matthew.wren

27 Aug, 2015 02:41 PM

I'm working on a project that's turning a static site into a responsive one using Twitter Bootstrap and our original slideshow isn't responsive so I decided to replace it with the one in Bootstrap.

I have it so it's actually grabbing the image of the first slide, its caption, and the link to the article but it doesn't slide when I click to advance to the next slide it just reloads the page. I'm wondering if I'm missing something that allows the images to cycle.

I can't send a link because it's only published to our test destination which only works on our campus but I included a screenshot of the slider. You can see that i recognizes the other 2 slide (three in total) with the circle pagination but it won't scroll.

Here's the page's format. The slider template is the last one in the format:

<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output indent="yes" method="xml"/>
    <xsl:variable name="issues-base">/alumni/journal/issues/</xsl:variable>
    <xsl:variable name="default-page">index</xsl:variable>
    <xsl:template match="system-index-block">
        <!--//determine the current issue's base folder//-->
        <xsl:variable name="current-issue">
            <xsl:value-of select="//system-folder[system-page[dynamic-metadata[name='current-issue']/value = 'Yes']]/path"/>
        </xsl:variable>
        <!--//determine the current page's needed base folder//-->
        <xsl:variable name="root-folder">
            <xsl:choose>
                <!--//when the current page is in the current issue folder//-->
                <xsl:when test="//system-page[@current='true']/path[contains(.,$current-issue)]">
                    <xsl:value-of select="$current-issue"/>
                </xsl:when>
                <!--//when the current page is NOT within any issue folder, but is not the Archives page//-->
                <xsl:when test="//system-page[@current='true']/path[not(contains(.,$issues-base))] or //system-page[@current='true']/path = '/alumni/journal/issues/index'">
                    <xsl:value-of select="$current-issue"/>
                </xsl:when>
                <!--//otherwise, the page resides within an archived issue//-->
                <xsl:otherwise>
                    <xsl:value-of select="concat($issues-base,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/'),'/',substring-before(substring-after(substring-after(//system-page[@current='true']/path,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/')), '/'), '/'), substring-before(substring-after(substring-after(//system-page[@current='true']/path, substring-before(substring-after(substring-after(//system-page[@current='true']/path,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/')), '/'), '/')), $issues-base),'/'))"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:apply-templates select="//calling-page/system-page[@current='true']">
            <xsl:with-param name="root-folder">
                <xsl:value-of select="$root-folder"/>
            </xsl:with-param>
        </xsl:apply-templates>
    </xsl:template>
    <xsl:template match="system-page">
        <xsl:param name="root-folder"/>
        <xsl:apply-templates select="system-data-structure">
            <xsl:with-param name="root-folder">
                <xsl:value-of select="$root-folder"/>
            </xsl:with-param>
        </xsl:apply-templates>
    </xsl:template>
    <xsl:template match="system-data-structure">
        <xsl:param name="root-folder"/>
        <xsl:apply-templates select="impact-image"/>
        <xsl:apply-templates select="in-this-issue">
            <xsl:with-param name="root-folder">
                <xsl:value-of select="$root-folder"/>
            </xsl:with-param>
        </xsl:apply-templates>
    </xsl:template>
    <xsl:template match="in-this-issue">
        <xsl:param name="root-folder"/>
        <div class="mainContentSection">
            <!--// BEGIN:  mainContentSection //-->
            <h1 class="mainContentTitle">In This Issue</h1>
            <div class="borderline"></div>
            <div class="articleContainer">
                <!--// BEGIN:  articleContainer //-->
                <div class="articleSection top pos1 col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <a href="[system-asset]{$root-folder}/contents/presidents-message[/system-asset]">
                        <!--<a href="/alumni/journal/issues/2014/fall/contents/presidents-message"> -->
                        <img alt="A Message from the President" src="/alumni/journal/images/message-from-president.jpg" width="100%"/>
                    </a>
                </div>
                <div class="articleSection top pos2 col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <a href="[system-asset]{$root-folder}/contents/index[/system-asset]">
                        <img alt="Table of Contents" src="/alumni/journal/images/table-of-contents.jpg" width="100%"/>
                    </a>
                </div>
                <xsl:apply-templates select="item"/>
            </div>
            <!--// END:  articleContainer //-->
        </div>
        <!--// END:  mainContentSection //-->
    </xsl:template>
    <xsl:template match="item">
        <div class="articleSection pos1 col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <xsl:if test="(position() mod 2) = 0">
                <xsl:attribute name="class">articleSection pos2 col-lg-6 col-md-6 col-sm-6 col-xs-12</xsl:attribute>
            </xsl:if>
            <xsl:choose>
                <xsl:when test="article-photo/path != '/'">
                    <div class="homeArticle ">
                        <a href="{article/path}">
                            <img alt="Article" src="{article-photo/path}"/>
                        </a>
                    </div>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:choose>
                        <xsl:when test="article/content/system-data-structure/graphic-thumb/path != '/'">
                            <div class="homeArticle ">
                                <a href="{article/path}">
                                    <img alt="Article" src="{article/content/system-data-structure/graphic-thumb/path}"/>
                                </a>
                            </div>
                        </xsl:when>
                        <xsl:otherwise>
                            <div class="homeArticle ">
                                <a href="{article/path}">
                                    <img alt="Article" src="{article/content/system-data-structure/graphic/path}"/>
                                </a>
                            </div>
                        </xsl:otherwise>
                    </xsl:choose>
                </xsl:otherwise>
            </xsl:choose>
            <h2 class="articleTitle">
                <a href="{article/path}">
                    <xsl:value-of select="article/display-name"/>
                </a>
            </h2>
            <div class="articleContent ">
                <a href="{article/path}">
                    <xsl:value-of select="article/description"/>
                </a>
            </div>
        </div>
    </xsl:template>
    <!--Impact Image-->
    <xsl:template match="impact-image">
        <div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#carousel-example-generic"/>
                <li data-slide-to="1" data-target="#carousel-example-generic"/>
                <li data-slide-to="2" data-target="#carousel-example-generic"/>
            </ol>
            <div class="carousel-inner" role="listbox">
                <xsl:apply-templates select="photo"/>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button">
                <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button">
                <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <script>$(document).ready(function() {
        $('.item:first-child').addClass('active');
        });
        
        $('.carousel').carousel({
  interval: 2000
})
        </script>
    </xsl:template>
    <!--Photo-->
    <xsl:template match="photo">
        <xsl:for-each select="photo">
            <div class="item">
                <xsl:choose>
                    <xsl:when test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">
                        <a>
                            <xsl:attribute name="onclick">_gaq.push(['_trackEvent', 'JournalHomePage', 'Click-Slide', '{
                                <xsl:value-of select="//system-page[@current='true']/display-name"/>}']);
                            </xsl:attribute>
                            <xsl:choose>
                                <xsl:when test="../link-page/page/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-page/page/path"/>
                                    </xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-file/file/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-file/file/path"/>
                                    </xsl:attribute>
                                    <xsl:attribute name="target">_blank</xsl:attribute>
                                    <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-external/url!='' and link-external/url!='http://'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-external/url"/>
                                    </xsl:attribute>
                                    <xsl:if test="../link-external/target = 'New Window'">
                                        <xsl:attribute name="target">_blank</xsl:attribute>
                                        <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                    </xsl:if>
                                </xsl:when>
                                <xsl:when test="(../link-page/page/path != '') or (../link-external/url != '' and ../link-external/url != 'http://') or (../link-file/file/path != '')">
                                    <xsl:attribute name="href">#</xsl:attribute>
                                </xsl:when>
                            </xsl:choose>
                            <img alt="feature" src="{path}"/>
                            <xsl:if test="../heading != '' or ../caption != ''">
                                <div class="carousel-caption">
                                    <span>
                                        <xsl:if test="../heading != ''">
                                            <span class="cs-title-main">
                                                <xsl:value-of select="../heading"/>
                                            </span>
                                        </xsl:if>
                                        <xsl:if test="../caption != ''">
                                            <br/>
                                            <xsl:value-of select="../caption"/>
                                        </xsl:if>
                                    </span>
                                </div>
                            </xsl:if>
                        </a>
                    </xsl:when>
                    <xsl:otherwise/>
                </xsl:choose>
            </div>
        </xsl:for-each>
    </xsl:template>
</xsl:stylesheet>

I just want to know what I'm missing to complete the slider's functionality.

  1. 1 Posted by matthew.wren on 27 Aug, 2015 06:35 PM

    matthew.wren's Avatar

    I think I pinpointed the Issue I'm having but I'm not sure how to get around it. For the slide show, at least one of the slide items must have the .active class applied. Very early on in the development added this snippet to the page's format so it would actually work:

     <script>$(document).ready(function() {
            $('.item:first-child').addClass('active');
            });
    

    Is there a way to apply the active class using the format? I remember the first time I added it to the format and every item received the additional class name and it didn't allow the slider to work at all. Advice? here's the entire format:

    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
        <xsl:output indent="yes" method="xml"/>
        <xsl:variable name="issues-base">/alumni/journal/issues/</xsl:variable>
        <xsl:variable name="default-page">index</xsl:variable>
        
        <xsl:template match="system-index-block">
            <!--//determine the current issue's base folder//-->
            <xsl:variable name="current-issue">
                <xsl:value-of select="//system-folder[system-page[dynamic-metadata[name='current-issue']/value = 'Yes']]/path"/>
            </xsl:variable>
            <!--//determine the current page's needed base folder//-->
            <xsl:variable name="root-folder">
                <xsl:choose>
                    <!--//when the current page is in the current issue folder//-->
                    <xsl:when test="//system-page[@current='true']/path[contains(.,$current-issue)]"><xsl:value-of select="$current-issue"/></xsl:when>
                    <!--//when the current page is NOT within any issue folder, but is not the Archives page//-->
                    <xsl:when test="//system-page[@current='true']/path[not(contains(.,$issues-base))] or //system-page[@current='true']/path = '/alumni/journal/issues/index'"><xsl:value-of select="$current-issue"/></xsl:when>
                    <!--//otherwise, the page resides within an archived issue//-->
                    <xsl:otherwise>
                        <xsl:value-of select="concat($issues-base,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/'),'/',substring-before(substring-after(substring-after(//system-page[@current='true']/path,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/')), '/'), '/'), substring-before(substring-after(substring-after(//system-page[@current='true']/path, substring-before(substring-after(substring-after(//system-page[@current='true']/path,substring-before(substring-after(//system-page[@current='true']/path,$issues-base),'/')), '/'), '/')), $issues-base),'/'))"/>
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:variable>
            <xsl:apply-templates select="//calling-page/system-page[@current='true']">
                <xsl:with-param name="root-folder"><xsl:value-of select="$root-folder"/></xsl:with-param>
            </xsl:apply-templates>
        </xsl:template>
        
        <xsl:template match="system-page">
            <xsl:param name="root-folder"/>
            <xsl:apply-templates select="system-data-structure">
                <xsl:with-param name="root-folder"><xsl:value-of select="$root-folder"/></xsl:with-param>
            </xsl:apply-templates>
        </xsl:template>
        
        <xsl:template match="system-data-structure">
            <xsl:param name="root-folder"/>
            <xsl:apply-templates select="impact-image"/>
            <xsl:apply-templates select="in-this-issue">
                <xsl:with-param name="root-folder"><xsl:value-of select="$root-folder"/></xsl:with-param>
            </xsl:apply-templates>
        </xsl:template>
    
        <xsl:template match="in-this-issue">
            <xsl:param name="root-folder"/>
            <div class="mainContentSection">
                <!--// BEGIN:  mainContentSection //-->
                <h1 class="mainContentTitle">In This Issue</h1>
                <div class="borderline"></div>
                <div class="articleContainer">
                    <!--// BEGIN:  articleContainer //-->
                    <div class="articleSection top pos1 col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="[system-asset]{$root-folder}/contents/presidents-message[/system-asset]"> 
                        <!--<a href="/alumni/journal/issues/2014/fall/contents/presidents-message"> -->
                            <img alt="A Message from the President" src="/alumni/journal/images/message-from-president.jpg" width="100%"/>
                        </a>
                    </div>
                    <div class="articleSection top pos2 col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="[system-asset]{$root-folder}/contents/index[/system-asset]">
                            <img alt="Table of Contents" src="/alumni/journal/images/table-of-contents.jpg" width="100%"/>
                        </a>
                    </div>
                    <xsl:apply-templates select="item"/>
                </div>
                <!--// END:  articleContainer //-->
            </div>
            <!--// END:  mainContentSection //-->
        </xsl:template>
    
        <xsl:template match="item">
            <div class="articleSection pos1 col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <xsl:if test="(position() mod 2) = 0">
                    <xsl:attribute name="class">articleSection pos2 col-lg-6 col-md-6 col-sm-6 col-xs-12</xsl:attribute>
                </xsl:if>
                <xsl:choose>
                    <xsl:when test="article-photo/path != '/'">
                        <div class="homeArticle ">
                            <a href="{article/path}"><img alt="Article" src="{article-photo/path}"/></a>
                        </div>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:choose>
                            <xsl:when test="article/content/system-data-structure/graphic-thumb/path != '/'">
                            <div class="homeArticle ">
                                <a href="{article/path}"><img alt="Article" src="{article/content/system-data-structure/graphic-thumb/path}"/></a>
                                </div>
                            </xsl:when>
                            <xsl:otherwise>
                            <div class="homeArticle ">
                                <a href="{article/path}"><img alt="Article" src="{article/content/system-data-structure/graphic/path}"/></a>
                                </div>
                            </xsl:otherwise>
                        </xsl:choose>
                    </xsl:otherwise>
                </xsl:choose>
                <h2 class="articleTitle">
                    <a href="{article/path}">
                        <xsl:value-of select="article/display-name"/>
                    </a>
                </h2>
    
                <div class="articleContent ">
                    <a href="{article/path}">
                        <xsl:value-of select="article/description"/>
                    </a>
                </div>
            </div>
        </xsl:template>
    <!--Impact Image-->
    <xsl:template match="impact-image">
        <div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
             <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel-example-generic"/>
        <li data-slide-to="1" data-target="#carousel-example-generic"/>
        <li data-slide-to="2" data-target="#carousel-example-generic"/>
      </ol>
             <div class="carousel-inner" role="listbox">
                <xsl:apply-templates select="photo"/>
            </div>
              <!-- Controls -->
      <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
     <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button">
            <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
        
        <script>$(document).ready(function() {
            $('.item:first-child').addClass('active');
            });
    $('.carousel').carousel({
      interval: 2000,
      keyboard: true
    })
            </script>
        
        </xsl:template>
    <!--Photo-->
    <xsl:template match="photo">
            <xsl:for-each select="photo">
            <div class="item">
                <xsl:choose>
                    <xsl:when test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">
                        <a>
                            <xsl:attribute name="onclick">_gaq.push(['_trackEvent', 'JournalHomePage', 'Click-Slide', '{<xsl:value-of select="//system-page[@current='true']/display-name"/>}']);</xsl:attribute>
                            <xsl:choose>
                                <xsl:when test="../link-page/page/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-page/page/path"/>
                                    </xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-file/file/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-file/file/path"/>
                                    </xsl:attribute>
                                    <xsl:attribute name="target">_blank</xsl:attribute>
                                    <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-external/url!='' and link-external/url!='http://'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-external/url"/>
                                    </xsl:attribute>
                                    <xsl:if test="../link-external/target = 'New Window'">
                                        <xsl:attribute name="target">_blank</xsl:attribute>
                                        <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                    </xsl:if>
                                </xsl:when>
    
                                <xsl:when test="(../link-page/page/path != '') or (../link-external/url != '' and ../link-external/url != 'http://') or (../link-file/file/path != '')">
                                        <xsl:attribute name="href">#</xsl:attribute>
                                </xsl:when>
                            </xsl:choose>
    
                            <img alt="feature" src="{path}"/>
    
                            <xsl:if test="../heading != '' or ../caption != ''">                                
                                <div class="carousel-caption">
                                        <span>
                                    <xsl:if test="../heading != ''">
    
                                              <span class="cs-title-main">
                                            <xsl:value-of select="../heading"/>
                                        </span>
                                    </xsl:if>
                                    <xsl:if test="../caption != ''">
                                        <br/>
                                            <xsl:value-of select="../caption"/>
                                    </xsl:if>
                                </span>
                                </div>
                            </xsl:if>
                        </a>
                    </xsl:when>
                    <xsl:otherwise/>
                </xsl:choose>
            </div>
            </xsl:for-each>
        </xsl:template>
    </xsl:stylesheet>
    
  2. 2 Posted by matthew.wren on 27 Aug, 2015 07:09 PM

    matthew.wren's Avatar

    Something occurred to me...I'm thinking a solution would involve a jquery toggleClass() with it defaulting to the first item in the list. When the slider toggles are clicked then it will remove the active class from that item and apply it to the next slide selected (either next or previous slide item). Also automatically with the automatic intervals.

    I'm just not sure how to create the jquery for the toggleClass and how to apply it to the slide toggle.

  3. 3 Posted by Ryan Griffith on 27 Aug, 2015 08:00 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    Have you tried tweaking your <xsl:template match="item"> to apply the active class when position() = 1? This would give you the first item in the list.

    Please let me know if you have any questions.

    Thanks!

  4. 4 Posted by matthew.wren on 27 Aug, 2015 08:08 PM

    matthew.wren's Avatar

    would this apply the active class to the next item when selected as well?

  5. 5 Posted by Ryan Griffith on 27 Aug, 2015 08:36 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    The carousel plugin should take care of maintaining the active class for you.If I recall, you just need to provide which slide you want to start out as being active.

    Please let me know if you have any questions.

    Thanks!

  6. 6 Posted by matthew.wren on 27 Aug, 2015 08:47 PM

    matthew.wren's Avatar

    I think I did it incorrectly because now everyone is active. What should I tweak to this?

    <!--Photo-->
    <xsl:template match="photo">
            <xsl:for-each select="photo">
            <div class="item">
                <xsl:if test="position() = 1">
                    <xsl:attribute name="class">item active</xsl:attribute>
                <xsl:choose>
                    <xsl:when test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">
                        <a>
                            <xsl:attribute name="onclick">_gaq.push(['_trackEvent', 'JournalHomePage', 'Click-Slide', '{<xsl:value-of select="//system-page[@current='true']/display-name"/>}']);</xsl:attribute>
                            <xsl:choose>
                                <xsl:when test="../link-page/page/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-page/page/path"/>
                                    </xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-file/file/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-file/file/path"/>
                                    </xsl:attribute>
                                    <xsl:attribute name="target">_blank</xsl:attribute>
                                    <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-external/url!='' and link-external/url!='http://'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-external/url"/>
                                    </xsl:attribute>
                                    <xsl:if test="../link-external/target = 'New Window'">
                                        <xsl:attribute name="target">_blank</xsl:attribute>
                                        <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                    </xsl:if>
                                </xsl:when>
    
                                <xsl:when test="(../link-page/page/path != '') or (../link-external/url != '' and ../link-external/url != 'http://') or (../link-file/file/path != '')">
                                        <xsl:attribute name="href">#</xsl:attribute>
                                </xsl:when>
                            </xsl:choose>
    
                            <img alt="feature" src="{path}"/>
    
                            <xsl:if test="../heading != '' or ../caption != ''">                                
                                <div class="carousel-caption">
                                        <span>
                                    <xsl:if test="../heading != ''">
    
                                              <span class="cs-title-main">
                                            <xsl:value-of select="../heading"/>
                                        </span>
                                    </xsl:if>
                                    <xsl:if test="../caption != ''">
                                        <br/>
                                            <xsl:value-of select="../caption"/>
                                    </xsl:if>
                                </span>
                                </div>
                            </xsl:if>
                        </a>
                    </xsl:when>
                    <xsl:otherwise/>
                </xsl:choose>
        </xsl:if>
        </div>
    
  7. 7 Posted by Ryan Griffith on 28 Aug, 2015 08:05 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    A couple of things that are jumping out at me, not sure if they will resolve the issue or not:

    • You are hard coding the pagination for the carousel and generating dynamic slides, so you'll eventually run into an issue
    • You are surrounding your entire slide with the <xsl:if>, you just want it around the attribute
  8. 8 Posted by matthew.wren on 31 Aug, 2015 01:57 PM

    matthew.wren's Avatar

    Hey Ryan,

    Ya know, I just decided to take out the pagination for the carousel because our original one didn't have one.

    I'm still have issues applying:

    <xsl:if test="position() = 1">
          <xsl:attribute name="class">active</xsl:attribute>
    <!-- Code for slide image -->
    </xsl:if>
    

    Is it somewhere in this section?

    <xsl:template match="photo">
            <xsl:for-each select="photo">
            <div class="item">
                <xsl:choose>
                    <xsl:when test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">                
                       <a>
                            <xsl:attribute name="onclick">_gaq.push(['_trackEvent', 'JournalHomePage', 'Click-Slide', '{<xsl:value-of select="//system-page[@current='true']/display-name"/>}']);</xsl:attribute>
                            <xsl:choose>
                                <xsl:when test="../link-page/page/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-page/page/path"/>
                                    </xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-file/file/path!='/'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-file/file/path"/>
                                    </xsl:attribute>
                                    <xsl:attribute name="target">_blank</xsl:attribute>
                                    <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                </xsl:when>
                                <xsl:when test="../link-external/url!='' and link-external/url!='http://'">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="../link-external/url"/>
                                    </xsl:attribute>
                                    <xsl:if test="../link-external/target = 'New Window'">
                                        <xsl:attribute name="target">_blank</xsl:attribute>
                                        <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                    </xsl:if>
                                </xsl:when>
    
                                <xsl:when test="(../link-page/page/path != '') or (../link-external/url != '' and ../link-external/url != 'http://') or (../link-file/file/path != '')">
                                        <xsl:attribute name="href">#</xsl:attribute>
                                </xsl:when>
                            </xsl:choose>
    
                            <img alt="feature" src="{path}"/>
    
                            <xsl:if test="../heading != '' or ../caption != ''">                                
                                <div class="carousel-caption">
                                        <span>
                                    <xsl:if test="../heading != ''">
    
                                              <span class="cs-title-main">
                                            <xsl:value-of select="../heading"/>
                                        </span>
                                    </xsl:if>
                                    <xsl:if test="../caption != ''">
                                        <br/>
                                            <xsl:value-of select="../caption"/>
                                    </xsl:if>
                                </span>
                                </div>
                            </xsl:if>
                            
                        </a>
                    
                    </xsl:when>
                    <xsl:otherwise/>
                </xsl:choose>      
            </div>
            </xsl:for-each>
        </xsl:template>
    
  9. 9 Posted by Ryan Griffith on 31 Aug, 2015 02:08 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    You should be able to place that snippet directly after <div class="item">. Also, if I am following things correctly, you don't need an <xsl:for-each> in your template because the <xsl:apply-templates select="photo"/> will handle that for you.

    When you have a moment, try something like the following:

    <xsl:template match="photo">
      <xsl:if test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">
        <div>
          <xsl:attribute name="class">
            <xsl:choose>
              <xsl:when test="position() = 1">item active</xsl:when>
              <xsl:otherwise>item</xsl:otherwise>
            </xsl:choose>
          </xsl:attribute>
          ...
        </div>
      </xsl:if>
    </xsl:template>
    

    Please let me know if you have any questions.

    Thanks!

  10. 10 Posted by matthew.wren on 31 Aug, 2015 02:52 PM

    matthew.wren's Avatar

    I think I'm almost there, I think the code between the </xsl:attribute> and </div> might be misplaced on my part because no image appears now:

    <xsl:template match="photo">
            <xsl:if test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">
                <div>
                    <xsl:attribute name="class">
                        <xsl:choose>
                            <xsl:when test="position() = 1">item active</xsl:when>
                            <xsl:otherwise>item</xsl:otherwise>
                        </xsl:choose>
                    </xsl:attribute>
                    <a>
                        <xsl:attribute name="onclick">_gaq.push(['_trackEvent', 'JournalHomePage', 'Click-Slide', '{
                            <xsl:value-of select="//system-page[@current='true']/display-name"/>}']);
                        </xsl:attribute>
                        <xsl:choose>
                            <xsl:when test="../link-page/page/path!='/'">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="../link-page/page/path"/>
                                </xsl:attribute>
                            </xsl:when>
                            <xsl:when test="../link-file/file/path!='/'">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="../link-file/file/path"/>
                                </xsl:attribute>
                                <xsl:attribute name="target">_blank</xsl:attribute>
                                <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                            </xsl:when>
                            <xsl:when test="../link-external/url!='' and link-external/url!='http://'">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="../link-external/url"/>
                                </xsl:attribute>
                                <xsl:if test="../link-external/target = 'New Window'">
                                    <xsl:attribute name="target">_blank</xsl:attribute>
                                    <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                </xsl:if>
                            </xsl:when>
                            <xsl:when test="(../link-page/page/path != '') or (../link-external/url != '' and ../link-external/url != 'http://') or (../link-file/file/path != '')">
                                <xsl:attribute name="href">#</xsl:attribute>
                            </xsl:when>
                        </xsl:choose>
                        <img alt="feature" src="{path}"/>
                        <xsl:if test="../heading != '' or ../caption != ''">
                            <div class="carousel-caption">
                                <span>
                                    <xsl:if test="../heading != ''">
                                        <span class="cs-title-main">
                                            <xsl:value-of select="../heading"/>
                                        </span>
                                    </xsl:if>
                                    <xsl:if test="../caption != ''">
                                        <br/>
                                        <xsl:value-of select="../caption"/>
                                    </xsl:if>
                                </span>
                            </div>
                        </xsl:if>
                    </a>
                </div>
            </xsl:if>
        </xsl:template>
    
  11. 11 Posted by Ryan Griffith on 31 Aug, 2015 05:56 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    Are you getting a <div class="item"> or nothing at all? If you are not getting anything, you will need to take a closer look at the <xsl:if> that surrounds the slide content to make sure it is correct or not.

    Please let me know if you have any questions.

    Thanks!

  12. 12 Posted by matthew.wren on 31 Aug, 2015 06:05 PM

    matthew.wren's Avatar

    It's just blank with nothing at all. I published to page so it should be viewable

    And do you mean this line?

    <xsl:if test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">

  13. 13 Posted by Ryan Griffith on 31 Aug, 2015 06:16 PM

    Ryan Griffith's Avatar

    Correct, and the associated </xsl:if> at the end of the template. Sounds to me like that conditional isn't working as expected and you will need to adjust it.

  14. 14 Posted by matthew.wren on 31 Aug, 2015 07:21 PM

    matthew.wren's Avatar

    I'm really not sure what I have to adjust on it to make it work, I'm a bit lost at this point now.

  15. 15 Posted by Ryan Griffith on 31 Aug, 2015 07:35 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    Did you try removing the <xsl:if> the surrounds the item's HTML? If not, you should have:

    <xsl:template match="photo">
            <!--<xsl:if test="(../link-page/page/path != '/') or (../link-external/url != '/' and ../link-external/url != 'http://') or (../link-file/file/path != '/')">-->
                <div>
                    <xsl:attribute name="class">
                        <xsl:choose>
                            <xsl:when test="position() = 1">item active</xsl:when>
                            <xsl:otherwise>item</xsl:otherwise>
                        </xsl:choose>
                    </xsl:attribute>
                    <a>
                        <xsl:attribute name="onclick">_gaq.push(['_trackEvent', 'JournalHomePage', 'Click-Slide', '{
                            <xsl:value-of select="//system-page[@current='true']/display-name"/>}']);
                        </xsl:attribute>
                        <xsl:choose>
                            <xsl:when test="../link-page/page/path!='/'">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="../link-page/page/path"/>
                                </xsl:attribute>
                            </xsl:when>
                            <xsl:when test="../link-file/file/path!='/'">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="../link-file/file/path"/>
                                </xsl:attribute>
                                <xsl:attribute name="target">_blank</xsl:attribute>
                                <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                            </xsl:when>
                            <xsl:when test="../link-external/url!='' and link-external/url!='http://'">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="../link-external/url"/>
                                </xsl:attribute>
                                <xsl:if test="../link-external/target = 'New Window'">
                                    <xsl:attribute name="target">_blank</xsl:attribute>
                                    <xsl:attribute name="title">This link will open in a new window</xsl:attribute>
                                </xsl:if>
                            </xsl:when>
                            <xsl:when test="(../link-page/page/path != '') or (../link-external/url != '' and ../link-external/url != 'http://') or (../link-file/file/path != '')">
                                <xsl:attribute name="href">#</xsl:attribute>
                            </xsl:when>
                        </xsl:choose>
                        <img alt="feature" src="{path}"/>
                        <xsl:if test="../heading != '' or ../caption != ''">
                            <div class="carousel-caption">
                                <span>
                                    <xsl:if test="../heading != ''">
                                        <span class="cs-title-main">
                                            <xsl:value-of select="../heading"/>
                                        </span>
                                    </xsl:if>
                                    <xsl:if test="../caption != ''">
                                        <br/>
                                        <xsl:value-of select="../caption"/>
                                    </xsl:if>
                                </span>
                            </div>
                        </xsl:if>
                    </a>
                </div>
            <!--</xsl:if>-->
        </xsl:template>
    
  16. 16 Posted by matthew.wren on 01 Sep, 2015 07:04 PM

    matthew.wren's Avatar

    Hi Ryan,

    I took the snippet omitting the <xsl:if> around the html and I get something that looks like the attached image. It appears to only display the img alt tag

  17. 17 Posted by matthew.wren on 02 Sep, 2015 06:00 PM

    matthew.wren's Avatar

    Hey Ryan,

    Just wondering if there's anything I can do to make this work. I tried editing the format using the page preview option in the editor but I think there's too much info on the page and it crashes on me so I can't use it.

  18. 18 Posted by Ryan Griffith on 03 Sep, 2015 11:47 AM

    Ryan Griffith's Avatar

    Hi Matthew,

    So it sounds like there's an issue with the <xsl:if>. I'd be happy to help take a closer look if you can attach your Format in it's current state and sample XML.

    Thanks!

  19. 19 Posted by matthew.wren on 03 Sep, 2015 12:51 PM

    matthew.wren's Avatar

    Sure thing!

    Attached is the format and here's the link to the XML

    http://www.scranton.edu/alumni/journal/index.xml

  20. 20 Posted by Ryan Griffith on 04 Sep, 2015 01:40 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    It looks as though the XML you linked to doesn't match what the Format is expected. When you have a moment, please use the Preview Options when editing the format and grab that XML.

    Thanks!

  21. 21 Posted by matthew.wren on 04 Sep, 2015 01:52 PM

    matthew.wren's Avatar

    Aw sorry about that. I was hoping that'd work because every time I do it the way you suggest my tab crashes on me. I think there's a lot of information on that page. Is there another way to get the page XML in that format in case I can't get it through the Preview Option?

  22. 22 Posted by matthew.wren on 04 Sep, 2015 02:27 PM

    matthew.wren's Avatar

    I think I finally got it! Yeah it's quite long, I'm not sure why it's so massive but I'm hoping it'll help!

  23. 23 Posted by matthew.wren on 09 Sep, 2015 03:23 PM

    matthew.wren's Avatar

    Hey Ryan,

    Great news, I figured out what the problem was with the site. I got the slider working with the data definition inputs but while working within a new output for the site, I misplaced the head tags that carried the JS files needed for the slider to function correctly.

    Sorry about all the back and forth on this one but it's actually working now

    http://www.scranton.edu/alumni/journal/issues/2015/spring/index.html

  24. 24 Posted by Ryan Griffith on 09 Sep, 2015 03:38 PM

    Ryan Griffith's Avatar

    Thank you for following up, Matthew, I am glad to hear you were able to get things working.

    Have a great day!

  25. Ryan Griffith closed this discussion on 09 Sep, 2015 03:38 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac