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.
