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.
