Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am creating this http://demo.webdeveloperplus.com/featured-content-slider/, image rotator in where data will be pulled automatically from a custom list.

Need help with markup, as current markup comes up as

<div id="rotate">
    <ul>
<li></li>
<div>One</div>
<li></li>  <div>two</div>

<li></li><div>three</div>
</ul>



    </div>

instead of 

<div id="rotate">
    <ul>
<li></li>
<li></li>
<li></li>
</ul>
  <div>One</div>
 <div>Two</div>
 <div>Three</div>
    </div>

I think I managed to get the markup. Any ideas or comments appreciated.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
<style>

#featured{ 
    width:400px; 
    padding-right:250px; 
    position:relative; 
    border:5px solid #ccc; 
    height:250px; 
    background:#fff;
}
#featured ul.ui-tabs-nav{ 
    position:absolute; 
    top:0; left:400px; 
    list-style:none; 
    padding:0; margin:0; 
    width:250px; 
}
#featured ul.ui-tabs-nav li{ 
    padding:1px 0; padding-left:13px;  
    font-size:12px; 
    color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
    float:left; margin:2px 5px; 
    background:#fff; 
    padding:2px; 
    border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
    font-size:11px; font-family:Verdana; 
    line-height:18px; 
}
#featured li.ui-tabs-nav-item a{ 
    display:block; 
    height:60px; 
    color:#333;  background:#fff; 
    line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
    background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
    background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
    background:#ccc; 
}
#featured .ui-tabs-panel{ 
    width:400px; height:250px; 
    background:#999; position:relative;
}
#featured .ui-tabs-panel .info{ 
    position:absolute; 
    top:180px; left:0; 
    height:70px; 
    background: url('images/transparent-bg.png'); 
}
#featured .info h2{ 
    font-size:18px; font-family:Georgia, serif; 
    color:#fff; padding:5px; margin:0;
    overflow:hidden; 
}
#featured .info p{ 
    margin:0 5px; 
    font-family:Verdana; font-size:11px; 
    line-height:15px; color:#f0f0f0;
}
#featured .info a{ 
    text-decoration:none; 
    color:#fff; 
}
#featured .info a:hover{ 
    text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
    display:none; 
}

</style>

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
    <xsl:output method="html" indent="no"/>
    <xsl:decimal-format NaN=""/>
    <xsl:param name="dvt_apos">'</xsl:param>
    <xsl:param name="dvt_firstrow">1</xsl:param>
    <xsl:param name="dvt_nextpagedata" />
    <xsl:variable name="dvt_1_automode">0</xsl:variable>

    <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
        <xsl:call-template name="dvt_1"/>
    </xsl:template>



    <xsl:template name="dvt_1">
        <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
        <xsl:variable name="dvt_RowCount" select="count($Rows)" />
        <xsl:variable name="RowLimit" select="10" />
        <xsl:variable name="FirstRow" select="$dvt_firstrow" />
        <xsl:variable name="LastRow" select="$FirstRow + $dvt_RowCount - 1" />
        <xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
                <div id="featured">

            <xsl:call-template name="dvt_1.body">
                <xsl:with-param name="Rows" select="$Rows"/>
                <xsl:with-param name="FirstRow" select="1" />
                <xsl:with-param name="LastRow" select="$dvt_RowCount" />
            </xsl:call-template>
                </div>

    </xsl:template>
    <xsl:template name="dvt_1.body">
        <xsl:param name="Rows"/>
        <xsl:param name="FirstRow" />
        <xsl:param name="LastRow" />
    <ul class="ui-tabs-nav">
        <xsl:for-each select="$Rows">
        <xsl:if test="@Active='1' or msxsl:string-compare(string(@Active),'Yes','','i')=0 or msxsl:string-compare(string(@Active),'True','','i')=0">

            <xsl:variable name="dvt_KeepItemsTogether" select="false()" />

                    <xsl:call-template name="dvt_1.rowview" />

            </xsl:if>
        </xsl:for-each>
        </ul>
        <xsl:choose>
<xsl:when test="position()=1">
  <div id="fragment-1" class="ui-tabs-panel" style="">
<img border="0" src="{substring-before(@Image, ', ')}" />
             <div class="info" >
                <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
             </div>
        </div>

</xsl:when>

<xsl:when test="position()=2">
  <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img border="0" src="{substring-before(@Image, ', ')}" />
             <div class="info" >
                <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
             </div>
        </div></xsl:when>

<xsl:when test="position()=3">
 <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
             </div>
        </div>





</xsl:when>

<xsl:when test="position()=4">
  <div id="fragment-4{generate-id()}" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
             </div>
        </div>


</xsl:when>



</xsl:choose>



    </xsl:template>


    <xsl:template name="dvt_1.rowview">
    <xsl:variable name="myID" select="@ID"></xsl:variable>


<xsl:choose>
<xsl:when test="position()=1">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 


</xsl:when>

<xsl:when test="position()=2">
<li class="ui-tabs-nav-item" id="nav-fragment-2" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 
</xsl:when>

<xsl:when test="position()=3">
<li class="ui-tabs-nav-item" id="nav-fragment-3" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 





</xsl:when>

<xsl:when test="position()=4">
<li class="ui-tabs-nav-item " id="nav-fragment-4{generate-id()}" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 


</xsl:when>



</xsl:choose>



    </xsl:template>





</xsl:stylesheet>   </XSL>
share|improve this question
    
Plz put "I think I managed to get the markup" part as answer as well as any instructions how to use/run it in Sharepoint environment! Thanks –  Gennady Vanin Novosibirsk Jun 11 '12 at 1:59
    
I got this working. Thanks all for your responses. –  Mighty Jun 11 '12 at 12:52
2  
please explain how you solved it. One day, this may be useful for someone else. –  Steve B Jun 11 '12 at 13:00
add comment

1 Answer

The working version of Itemstyle Template

_blank

<xsl:if test="count(preceding-sibling::*)=0">
  <xsl:text disable-output-escaping="yes"><![CDATA[
  <html>
  <head>
  <script type="text/javascript" src="/Resources/jquery.min.js" ></script>

   </head>

]]>

  <xsl:text disable-output-escaping="yes"><![CDATA[<ul class="ui-tabs-nav">]]></xsl:text>
  <xsl:for-each select="../Row[@Style='Rotate']">
  <xsl:if test="@Active=1">
     <xsl:choose>
      <xsl:when test="position()=1">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" >
          <a href="{concat('#fragment-',position())}">
            <!--<img border="0" src="{substring-before(@Image, ', ')}" />-->
            <span>
              <xsl:value-of select="@Title"/>
            </span>
          </a>
        </li>
      </xsl:when>
      <xsl:otherwise>
        <li class="ui-tabs-nav-item" id="{concat('nav-fragment-',position())}" >
          <a href="{concat('#fragment-',position())}">
          <!--  <img border="0" src="{substring-before(@Image, ', ')}" />-->
            <span>
              <xsl:value-of select="@Title"/>
            </span>
          </a>
        </li>
      </xsl:otherwise>
    </xsl:choose>

]]>

    <xsl:choose>
      <xsl:when test="position()=1">
        <div id="{concat('fragment-',position())}" class="ui-tabs-panel" style="">
          <img border="0" src="{substring-before(@Image, ', ')}" />
          <div class="info" >
            <h2>
              <a href="{substring-after(@Link, ',')}" >
                <xsl:value-of select="substring-after(@Link, ',')" disable-output-escaping="yes"></xsl:value-of>
              </a>
            </h2>
            <p>
              <xsl:value-of select="@Title" disable-output-escaping="yes"/>
              <a href="#" >
                <div>read more</div>
              </a>
            </p>
          </div>
        </div>
      </xsl:when>
      <xsl:otherwise>
        <div id="{concat('fragment-',position())}" class="ui-tabs-panel ui-tabs-hide" style="">
          <img border="0" src="{substring-before(@Image, ', ')}" />
          <div class="info" >
            <h2>
              <a href="{substring-after(@Link, ',')}" >
                <xsl:value-of select="substring-after(@Link, ',')" disable-output-escaping="yes"></xsl:value-of>
              </a>
            </h2>
            <p>
              <xsl:value-of select="@Title" disable-output-escaping="yes"></xsl:value-of>
              <a href="#" >
                <div>read more</div>
              </a>
            </p>
          </div>
        </div>
      </xsl:otherwise>
    </xsl:choose>
     </xsl:if>
  </xsl:for-each>
  <xsl:text disable-output-escaping="yes"><![CDATA[</div></body></html>]]></xsl:text>
</xsl:if>

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.