3

I have jQuery static code that works well.

Code:

<!-- CSS -->
    <style type="text/css" media="screen">
        #slider1 {
            width: 720px; /* important to be same as image width */
            height: 300px; /* important to be same as image height */
            position: relative; /* important */
            overflow: hidden; /* important */
        }

        #slider1Content {
            width: 720px; /* important to be same as image width or wider */
            position: absolute;
            top: 0;
            margin-left: 0;
        }

        .slider1Image {
            float: left;
            position: relative;
            display: none;
        }

            .slider1Image span {
                position: absolute;
                font: 10px/15px Arial, Helvetica, sans-serif;
                padding: 10px 13px;
                width: 694px;
                background-color: #000;
                filter: alpha(opacity=80);
                -moz-opacity: 0.7;
                -khtml-opacity: 0.7;
                opacity: 0.7;
                color: #fff;
                display: none;
            }

        .clear {
            clear: both;
        }

        .slider1Image span strong {
            font-size: 14px;
        }

        .left {
            top: 0;
            left: 0;
            width: 220px !important;
            height: 280px;
        }

        .right {
            right: 0;
            bottom: 0;
            width: 350px !important;
            height: 284px;
        }

        ul {
            list-style-type: none;
        }
    </style>
    <!-- include extern jQuery  !-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/s3Slider.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 5000
        });
    });
    </script>

<table border="0">
<tr>
    <td valign="top">
        <!--  Outer wrapper for presentation only, this can be anything you like -->
        <div id="slider1">
            <ul id="slider1Content">
                <li class="slider1Image">
                    <a href="1.aspx"><img src="6.png" alt="6" />
                    <span class="left"><strong>News A</strong><br /><br />News A description </span></a>
                </li>
                <li class="slider1Image">
                    <a href="2.aspx"><img src="5.png" alt="5" />
                    <span class="left"><strong>News B </strong><br /><br />News A description</span></a>
                </li>

                <div class="clear slider1Image"></div>
            </ul>
        </div>                            
<!-- End outer wrapper -->
    </td>
</tr>
</table>

<br />

I am using SPServices jQuery to pull information from a list.

Code:

<!-- CSS -->
    <style type="text/css" media="screen">
        #slider1 {
            width: 720px; /* important to be same as image width */
            height: 300px; /* important to be same as image height */
            position: relative; /* important */
            overflow: hidden; /* important */
        }

        #slider1Content {
            width: 720px; /* important to be same as image width or wider */
            position: absolute;
            top: 0;
            margin-left: 0;
        }

        .slider1Image {
            float: left;
            position: relative;
            display: none;
        }

            .slider1Image span {
                position: absolute;
                font: 10px/15px Arial, Helvetica, sans-serif;
                padding: 10px 13px;
                width: 694px;
                background-color: #000;
                filter: alpha(opacity=80);
                -moz-opacity: 0.7;
                -khtml-opacity: 0.7;
                opacity: 0.7;
                color: #fff;
                display: none;
            }

        .clear {
            clear: both;
        }

        .slider1Image span strong {
            font-size: 14px;
        }

        .left {
            top: 0;
            left: 0;
            width: 220px !important;
            height: 280px;
        }

        .right {
            right: 0;
            bottom: 0;
            width: 350px !important;
            height: 284px;
        }

        ul {
            list-style-type: none;
        }
    </style>
    <!-- include extern jQuery  !-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/s3Slider.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 5000
        });
    });
    </script>

<table id="KTable" border=1 width="90%" align="center">
           <tr>
                <td valign="top">
                    <div id='slider1'>
                        <ul id='slider1Content'>

                        </ul>
                        <div class='clear slider1Image'></div>
                    </div>
                </td>
           </tr>        
    </table> 

<SCRIPT type=text/javascript>
getSliderNewsListData() ;

function getSliderNewsListData()
{                     
        var method = "GetListItems";                 
        var webURL =  $().SPServices.SPGetCurrentSite(); 
        var list = "Pages";                      
        var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";
        var query = "<Query><OrderBy><FieldRef Name='Modified'  Ascending='False' /></OrderBy></Query>";                       

        $().SPServices
        ({
                    operation: method,
                    async: false, 
                    webURL: webURL,
                    listName: list,
                    CAMLViewFields: "<ViewFields Properties='True' />",
                    CAMLQuery: query,    
                            CAMLRowLimit: 6,                                                                                 
                    completefunc: function (xData, Status)
                     {
                         $(xData.responseXML).SPFilterNode("z:row").each(function() 
                         {
                              var title = $(this).attr("ows_Title");
                              var byLine = $(this).attr("ows_ArticleByLine");
                              var uRL = $(this).attr("ows_LinkFilename");

                              var liHtml = "<li class='slider1Image'>" +
                                            "<a href='"+webURL+uRL+ "'><img src=/Icon/"+CAMLRowLimit+".png' alt='"+CAMLRowLimit+"' />" +
                                            "<span class='left'><strong>"+title+"</strong><br /><br />"+byLine+"</span></a>" +
                                            "</li>";

                               $("#slider1Content").append(liHtml);
                           });
                   }
       });
       };

      </script>

I cannot see any image or content. I pressed F12 and no data shows. Any one can tell me what mistake I have been made? I have been looking through the google searches all day but could not figure it out yet.

0

Kindly add below piece of code on the start of script:

ExecuteOrDelayUntilScriptLoaded(getSliderNewsListData, "sp.js");

0

Take the length of your items, then in a loop call item.splice(1,3) to get the look and feel

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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