Introduction
I know when we use a screen saver or a slider in our home page, we have to hard code our URLs for images or videos in our sliders to get it working.
Here, I bring you a new concept of doing it without hardcoding the values.
I know it’s tricky, but I learnt the trick and soon you will too.
- Here, you see below is an example of HTML code which we place in a content editor web part:
<table cellpadding="0" cellspacing="0" class="slidingshell" style="width:25%;">
<tr>
<td>
<a id="videoimg" ></a>
</td>
</tr>
</table>
<h2>
<a id="videotitle" ></a>
</h2>
<h3>
<p id ="videodescription"></p></br>
<a id="clickurl"></a>
</h3>
</div>
<!--
- Prepare a SharePoint Custom List where you can have columns for Video/Image URL, a Title column and a Description column.
- Go to the page where you have placed the following HTML code.
- Add a JavaScript file there shown as below:
$(document).ready(function() {
var i=1;
var query1 = "<Query><OrderBy><FieldRef Name='ID' Ascending='TRUE'/></OrderBy></Query>";
Assign the variables to an array, so that you don’t have to call it everytime.
var valuedes=[];
var valuetitle=[];
var valueimgurl=[];
var valuevideourl=[];
var valueassettype=[];
$().SPServices({
operation: "GetListItems",
listName: "CAROUSEL",
async: false,
CAMLQuery: query1,
completefunc: function (xData, Status) {
alert(xData.responseText);
var test1 = xData.responseText;
data1 = $.parseXML(test1),
$test1 = $(data1);
$(test1).find("z\\:row").each(function(){
valuedescription[i]=$(this).attr("ows_Description");
valuetitle[i]=$(this).attr("ows_LinkTitle");
valueimgurl[i]=$(this).attr("ows_Preview_x0020_Picture_x0020_URL");
valueimgurl[i]=valueimgurl[i].split(",")[0];
valuevideourl[i]=$(this).attr("ows_Asset_x0020_URL");
valuevideourl[i]=valuevideourl[i].split(",")[0];
i=i+1;
});
}
});
var val1=[];
var val2=[];
var val3=[];
var val4=[];
var val5=[];
for(var j=1;j<=i;j++)
{
val1[j]="<a id=\"videoimg"+j+"\" href=\"" + valuevideourl[j]+ "\"
target=\"_blank\"><img src=\"" + valueimgurl[j] + "\" /></a>";
val2[j]= "<a id=\"videotitle"+j+"\" href=\""+ valuevideourl[j] +"\"
target=\"_blank\"> \""+ valuetitle[j] + "\"</a>";
val3[j] = "<p id =\"videodescription"+j+"\">\""+ valuedescription[j] +
"\"<a href=\""+ valuevideourl[j] +"\" target=\"_blank\"></a></p>";
val4[j] ="<a id=\"heading"+j+"\" href=\"#\">"+ valuetitle[j] +"</a>";
}
$('#videoimg').html(val1[1]);
$('#videotitle').html(val2[1]);
$('#videodescription').html(val3[1]);
$('#clickurl').html(val5[1]);
});
It will resolve lot of concerns especially of the clients to pay the developers every time for making the HTML changes to their home page so now they can change it on a list using simple form and the result will come up directly on the home page without even touching the code.
For developers, it will save lot of time especially which they don’t have any.