1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  2. <script type="text/javascript" src="/sites/LMS/SiteAssets/Dashboard/jquery.min.js"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  4. <style type="text/css">
  5. .bla {
  6. display: inline-block;
  7. font-weight: bold;
  8. }
  10. ​ .divimage {
  11. width: 50% !important;
  12. float: left !important;
  13. }
  15. div#container {
  16. width: 100%;
  17. }
  19. .divDetails {
  20. float: right;
  21. width: 50%;
  22. }
  24. img.img-responsive.img-align {
  25. width: 35%;
  26. height: 260px;
  27. float: left;
  28. border-radius: 10px;
  29. }
  31. p.txt-align {
  32. margin-left: -50px;
  33. padding-top: 13px;
  34. font-size: 16px;
  35. }
  36. </style>
  37. <script type="text/javascript">
  38. $(document).ready(function() {
  39. var MyParameter = getParameterByName("itemid");
  41. function getParameterByName(name, url) {
  42. if (!url) url = window.location.href;
  43. name = name.replace(/[\[\]]/g, "\\$&");
  44. var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
  45. results = regex.exec(url);
  46. if (!results) return null;
  47. if (!results[2]) return '';
  48. return decodeURIComponent(results[2].replace(/\+/g, " "));
  49. }
  50. var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
  51. //var urlString = "YourUrl/_api/web/lists/getbytitle('Icons')/Items?$select=Title,Url,Image,ID";
  52. var getuserstsring = "YourUrl/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,ownername,phonenumber,description,city,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=Id%20eq%20" + MyParameter + "";
  53. $.ajax({
  54. url: getuserstsring,
  55. dataType: "json",
  56. type: "GET",
  57. headers: {
  58. "Accept": "application/json;odata=verbose"
  59. },
  60. success: GetSuccessMethod,
  61. error: onError
  62. });
  64. function GetSuccessMethod(data, request) {
  65. var contents = "";
  66. $.each(data.d.results, function(key, val) {
  67. $.each(val.AttachmentFiles.results, function(key1, val1) {
  68. contents += "<div class='divimage'>";
  69. /*console.log(val1.ServerRelativeUrl);
  70. contents +="<a href='" + val1.ServerRelativeUrl+ "'><img title='" + val.Title + "' src='"+val1.ServerRelativeUrl+"' class='img-responsive img-align' alt='Responsive image'>"; */
  71. contents += "<img title='" + val.subcategory + "' src='" + val.AttachmentFiles.results.ServerRelativeUrl + "' class='img-responsive img-align' alt='Responsive image'>";
  72. contents += "</div>"
  73. contents += "<div class='divDetails'>"
  74. contents += "<p class='txt-align'><a href='https://UrUrl.aspx?itemid=" + MYParameter + "'class='txt-align'>" + MyParameter + "</a></p>";
  75. contents += "<p class='txt-align'><span class='bla'>Details : </span>" + val.Title + "</p>";
  76. contents += "<p class='txt-align'><span class='bla'>Owner Name : </span>" + val.ownername + "</p>";
  77. contents += "<p class='txt-align'><span class='bla'>Mobile : </span>" + val.phonenumber + "</p>";
  78. contents += "<p class='txt-align'><span class='bla'>City : </span>" + val.city + "</p>";
  79. contents += "<p class='txt-align'><span class='bla'>Description : </span>" + val.description + "</p>";
  80. contents += "</div>";
  81. });
  82. });
  83. $("div[id='container']").append(contents);
  84. }
  86. function onError(error) {}
  88. function RedirectURL(URL) {
  89. alert(URL);
  90. }
  91. });
  92. </script>
  93. <div id="container"> </div>