Hi,

I'm trying to implement this PgwSlider on my sites and I believe my format is causing problems.

With how I have it set it up, it looks like this and only displays the right side when a full image with text should appear on the left, like in the example.

I am calling the CSS and Javascript through a xml block called CSS. This is what it contains:

<system-xml> 

<link href="/_assets/css/normalize.css" rel="stylesheet"/>
<link href="/_assets/css/main.css" rel="stylesheet"/>
<link href="/_assets/css/dropdown.css" rel="stylesheet"/>
<link href="/_assets/css/dvn.css" rel="stylesheet"/>
<link href="/_assets/css/mediaq.css" rel="stylesheet"/>
<link href="/_assets/css/modules.css" rel="stylesheet"/>
<link href="/_assets/fonts/stylesheet.css" rel="stylesheet"/>
<link href="/_assets/css/spotlight.css" rel="stylesheet"/>
<link href="/_assets/css/ui.tabs.css" rel="stylesheet"/>
<link href="/_assets/css/gallery.css" rel="stylesheet"/>
<link href="/_assets/css/pgwslider.min.css" rel="stylesheet"/>

<script src="/_assets/js/libs/modernizr-2.5.3.min.js"></script>
<script src="/_assets/js/libs/jquery-1.11.1.min.js"></script>
<script src="/_assets/js/libs/slides.min.jquery.js"></script>
<script src="/_assets/js/ui.core.js"></script>
<script src="/_assets/js/ui.tabs.js"></script>
<script src="/_assets/js/libs/jquery.innerfade.js" type="text/javascript"></script>
<script src="/_assets/js/libs/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="/_assets/js/script.js"></script>
<script src="/_assets/js/plugins.js"></script>
<script src="/_assets/js/jquery.fancybox.js"></script>
<script src="/_assets/js/pgwslider.min.js"></script>
<!-- Enable media queries for old IE -->
  <!--[if lt IE 9]>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->

</system-xml>

I initialize the script at footerscript_xml. This is what it contains:

<system-xml>
<script type="text/javascript">
$(".fancybox").attr('rel', 'gallery').fancybox('arrows', 'true');
</script>

<script type="text/javascript">
    $(document).ready(function() {
    $('.pgwSlider').pgwSlider();
});
</script>
</system-xml>

The format is located within page-modules.xml and this is what is being called:

<!-- Spotlight -->
        <xsl:if test="content/system-data-structure/spotlight">
            <div>
                <xsl:attribute name="class">sidebarmod</xsl:attribute>
                <xsl:choose>
                    <xsl:when test="content/system-data-structure/title != ''">
                        <h2>
                            <xsl:value-of select="content/system-data-structure/title"/>
                        </h2>
                    </xsl:when>
                </xsl:choose>
                <xsl:choose>
                    <xsl:when test="content/system-data-structure/image/path != '/'">
                        <img>
                            <xsl:attribute name="src">
                                <xsl:value-of select="content/system-data-structure/image/path"/>
                            </xsl:attribute>
                        </img>
                    </xsl:when>
                </xsl:choose>
                <xsl:choose>
                    <xsl:when test="content/system-data-structure/content != ''">
                        <xsl:copy-of select="content/system-data-structure/content/node()"/>
                        <br/>
                        <br/>
                    </xsl:when>
                </xsl:choose>
                <ul class="pgwSlider">
                     <xsl:for-each select="content/system-data-structure/spotlight">
                            <li>
                                <img src="{image/path}"/>
                                 <xsl:choose>
                                        <xsl:when test="pg/path != '/'">
                                                <a href="{pg/path}">
                                                    <span><xsl:value-of select="title"/></span>
                                                </a>
                                        </xsl:when>
                                        <xsl:when test="contains(link, 'http://')and(link != 'http://')">
                                                <a href="{link}" target="_blank">
                                                    <span><xsl:value-of select="title"/></span>
                                                </a>
                                        </xsl:when>
                                    </xsl:choose>
                            </li>
                            </xsl:for-each>
                </ul>
            </div>
        </xsl:if>

The data definition for this is module-spotlight and the xml for that is:

<system-data-structure>
  <text identifier="title" label="Page Title"/>
  <text wysiwyg="true" identifier="content" label="Page Content"/>
  <group identifier="spotlight" label="Spotlight" multiple="true" maximum-number="3" minimum-number="3">
    <text identifier="title" label="Title" required="true"/>
    <asset type="file" identifier="image" label="Large Image" required="true"/>
    <text identifier="link" label="Link to External URL" default="http://"/>
    <asset type="page" identifier="pg" label="Link to Local Page"/>
  </group>
</system-data-structure>

I don't believe I am missing something from the plugin. I believe that the format is conflicting somehow.

Could I get a second look at this?

Thanks,
Nicole