I know that when we people use a screen saver or a slider on our Home Pages we need 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 learned the trick and soon you will too.

Here you see the following is an example of HTML code that we place in a content editor web part.

  1. <table cellpadding="0" cellspacing="0" class="slidingshell" style="width:25%;">
  2. <tr>
  3. <td>
  4. <a id="videoimg" ></a>
  5. </td>
  6. </tr>
  7. </table>
  8. <h2>
  9. <a id="videotitle" ></a>
  10. </h2>
  11. <h3>
  12. <p id ="videodescription"></p></br>
  13. <a id="clickurl"></a>
  14. </h3>
  15. </div>
  16. <!-- .slide-->
  1. $(document).ready(function() {
  2. var i=1;
  3. //Query your custom list here
  4. var query1 = "<Query><OrderBy><FieldRef Name='ID' Ascending='TRUE'/></OrderBy></Query>";

Assign the variables to an array, so that you don't need to call it every time.

  1. var valuedes=[];
  2. var valuetitle=[];
  3. var valueimgurl=[];
  4. var valuevideourl=[];
  5. var valueassettype=[];
  7. //Call SP Services to get all data from the list
  8. $().SPServices({
  9. operation: "GetListItems",
  10. listName: "CAROUSEL",
  11. async: false,
  12. CAMLQuery: query1,
  13. completefunc: function (xData, Status) {
  14. alert(xData.responseText);
  15. var test1 = xData.responseText;
  16. data1 = $.parseXML(test1),
  17. $test1 = $(data1);
  18. $(test1).find("z\\:row").each(function(){
  19. valuedescription[i]=$(this).attr("ows_Description");
  20. valuetitle[i]=$(this).attr("ows_LinkTitle");
  21. valueimgurl[i]=$(this).attr("ows_Preview_x0020_Picture_x0020_URL");
  22. valueimgurl[i]=valueimgurl[i].split(",")[0];
  23. valuevideourl[i]=$(this).attr("ows_Asset_x0020_URL");
  24. valuevideourl[i]=valuevideourl[i].split(",")[0];
  25. //It will start looping for all the IDs present in the group
  26. i=i+1;
  27. });
  28. }
  29. });

  31. var val1=[];
  32. var val2=[];
  33. var val3=[];
  34. var val4=[];
  35. var val5=[];
  37. for(var j=1;j<=i;j++)
  38. {
  39. val1[j]="<a id=\"videoimg"+j+"\" href=\"" + valuevideourl[j]+ "\" target=\"_blank\"><img src=\"" + valueimgurl[j] + "\" /></a>";
  40. val2[j]= "<a id=\"videotitle"+j+"\" href=\""+ valuevideourl[j] +"\" target=\"_blank\"> \""+ valuetitle[j] + "\"</a>";
  41. val3[j] = "<p id =\"videodescription"+j+"\">\""+ valuedescription[j] +"\"<a href=\""+ valuevideourl[j] +"\" target=\"_blank\"></a> </p>";
  42. val4[j] ="<a id=\"heading"+j+"\" href=\"#\">"+ valuetitle[j] +"</a>";
  43. }
  44. // Here the below code will append the HTML coding automatically, you need not everytime change the url and other details for every change in your Home Page.
  45. $('#videoimg').html(val1[1]);
  46. $('#videotitle').html(val2[1]);
  47. $('#videodescription').html(val3[1]);
  48. $('#clickurl').html(val5[1]);
  49. });

It will resolve many concerns, especially of the clients to pay the developers every time for making the HTML changes to their Home Pages so now they can change it on a list using a simple form and the result will exist directly on the Home Page without even touching the code.

For the developers it will save a lot of time especially when they don't have any.