Possible formatting conflicts with jQuery content slider

Nicole Foster's Avatar

Nicole Foster

30 Sep, 2014 02:30 PM


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:


<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>


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

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

<script type="text/javascript">
    $(document).ready(function() {

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

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

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

  <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"/>

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?


  1. 1 Posted by Ryan Griffith on 02 Oct, 2014 02:46 PM

    Ryan Griffith's Avatar

    Hi Nicole,

    If you view your browser's console while loading your page, are you getting any JavaScript errors or missing resource messages? It looks like the images are loaded correctly within the slider's navigation, so I'm curious if there is some issue when the plugin tries to load the image within the slide area.

    Also, while looking over your Format and Data Definition I noticed you are referencing a field within the top level of the Data Definition called image, but that field does not exist.

    Please let me know if you have any questions.


  2. Ryan Griffith closed this discussion on 15 Oct, 2014 02:33 PM.

Discussions are closed to public comments.
If you need help with Cascade CMS please start a new discussion.

Keyboard shortcuts


? 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


26 Aug, 2016 01:19 PM
25 Aug, 2016 03:02 PM
25 Aug, 2016 12:50 PM
24 Aug, 2016 08:43 PM
24 Aug, 2016 07:20 PM
21 Aug, 2016 01:20 PM