Home Page Image Banner with simple configuration in SPServices.
Simple way to create Home page banner in Jquery and SPServices.
Create a document Library with below fields.
- Doc Lib Name: HomeSlide
- Fields Name: RequiredField - internal field
- ImgCaption: can be either single line of text or multi line of text
Please refer below code for implementation.
<link rel="stylesheet" type="text/css" href="/SiteAssets/responsiveslides.css" />
<link rel="stylesheet" type="text/css" href="/SiteAssets/themes.css" />
<script type="text/javascript" src="/SiteAssets/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/SiteAssets/responsiveslides.js"></script>
<script type="text/javascript" src="/SiteAssets/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var vReqField;
var count = 0;
$().SPServices({
debug: true,
operation: "GetListItems",
async: false,
webURL: 'http://localhost/',
listName: "HomeSlide",
CAMLQuery: "<Query><Where></Where></Query>",
completefunc: function(xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var HTMLLink = $(this).attr("ows_LinkURL");
vReqField = "http://localhost/" + $(this).attr("ows_RequiredField");
var Desc = $(this).attr("ows_ImgCaption");
var imgtag = "<a href='" + HTMLLink + "' target='_blank' ><img src='" + vReqField + "' alt=''><center><H3><p class='caption'>" + Desc + "</p></H3></center></a>";
$('<li />', {
html: imgtag
}).appendTo('ul.rslides');
});
}
});
$(".rslides").responsiveSlides({
auto: true,
speed: 1000,
timeout: 4000,
pager: true,
nav: true,
maxwidth: 700,
namespace: "centered-btns"
});
});
</script>
<ul class="rslides">
</ul>