Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Elad Lachmi 112 posts 144 karma points
    Mar 01, 2011 @ 05:03
    Elad Lachmi
    0

    Nivo slider with HTML overlay

    Hi!

    I'm new to Umbraco and new to the forums, so please be gentle.

    I want to add a jQuery slider (nivo slider) to my homepage. The nivo slider has a feature which allows me to overlay a div on the image.

    Since I am new to Umbraco, I just want confirmation that I'm on the right path, before I dive in.

    What I think I need to do is create a new datatype with an image picker and a rich text editor for the slider image and overlay text, respectively. Then I create a folder of such items as needed. Then I have to create an XSLT macro that will get a list of these datatypes and insert them in the proper div in the homepage. Then put the jquery and plugin script tags in the homepage template and I'm home free. 

    Did I miss anything? Can you point me to some examples of such XSLT macros? I'm guessing that will be the most complicated part for me.

    Thank you!

    -Elad

    Copy Link
  • Daniel Bardi 927 posts 2562 karma points
    Mar 01, 2011 @ 06:31
    Daniel Bardi
    0

    I've done this several times.

    Here's my xslt for creating the div with images:

    Pass in the selected folder to the macro (or pass in via a querystring)

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet version="1.0" 
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
        <xsl:output method="xml" omit-xml-declaration="yes"/>
        <xsl:param name="currentPage"/>
        <xsl:param name="mid" select="umbraco.library:RequestQueryString('mid')"/>
        <xsl:param name="folderid">
          <xsl:choose>
            <xsl:when test="$mid != ''">
              <xsl:value-of select="$mid"/>
            </xsl:when>
            <xsl:otherwise>
              <xsl:value-of select="/macro/folder/Folder/@id"/>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:param>
        <xsl:template match="/">
          <div id="slideshowwrapper">
            <div id="slideshow">
              <xsl:if test="$folderid != ''">
                <xsl:for-each select="umbraco.library:GetMedia($folderid,1)/Image [excludeFromGallery != 1]">
                  <xsl:if test="self::Image">
                    <div class="slide">
                      <img src="{./umbracoFile}" class="slideimage"/>
                    </div>
                  </xsl:if>
                </xsl:for-each>
              </xsl:if>
            </div>
          </div>
        </xsl:template>
    </xsl:stylesheet>
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft