ساخت اسلاید شو داینامیک برای شیرپوینت

شاید برای شما پیش آمده باشد که برای سایت شیرپوینت خود نیاز به اسلاید شو داینامیک داشته باشید. به این صورت که عکس های شما از یک لیست یا کتابخانه تصاویر خوانده شود. البته این موضوع در شیرپوینت 2019 با قراردادن یک وب پارت اسلاید شو رفع شده و شما براحتی و بدون نیاز به کد می توانید هر تعداد اسلاید شو و یا گالری تصاویر که نیاز داشته باشید در صفحات خود اضافه کنید. در این مقاله قصد داریم نحوه ساخت اسلاید شو داینامیک با استفاده از کد جاوا اسکریپت در صفحه شیر پوینت را  به شما توضیح دهیم.

اسلاید شو در شیرپوینت

این اسلاید شو علاوه بر کد اصلی که شما باید در صفحه مورد نظر خود قرار دهید یک فایل css و js نیز دارد که قبل از هرچیز باید در سایت خود Upload کنید و در صفحه ای که می خواهید در آنجا اسلاید شو قرار گیرد فراخوانی کنید. بهتر است این دو فایل را در کنار فایل های CSS و JS صفحه اصلی (Masterpage) خود Upload دهید و کد فراخوانی آنها را نیر در فایل HTML صفحه اصلی (Master page) قرار دهید تا در صورتی که خواستید در یک site collection دیگر از این اسلاید شو استفاده کنید هر بار نیار به بارگزاری و فراخوانی این کدها نداشته باشید، در غیر این صورت می توانید در پوشه SiteAssets یا همان دارایی های سایت فایل ها را Upload  کنید.

از طریق لینک های زیر دو فایل  را دانلود کنید

craftyslide.js

craftyslide.css

قبل از اینکه کد اسلاید شو را در صفحه خود قرار دهید ابتدا باید یک مخزن تصاویر ایجاد کرده و عکس های خود را  در این مخزن Upload کنید. دقت داشته باشید هر عنوانی که شما برای عکس خود قرار دهید در اسلاید شو به نمایش در می آید.

پس از ساخت مخزن تصاویر و Upload  عکس ها به صفحه ای که قصد دارید اسلاید شو به نمایش درآید رفته و کد زیر را در صفحه خود قرار دهید.

<div id="slideshow"></div>
<script>
var requestUrl = "https://yoursiteaddress/_api/web/lists/getbytitle('List Title')/items?$select=Title,Description,EncodedAbsUrl";
 
$.ajax({
    url: requestUrl,
    type: "GET",
    contentType: "application/json;odata=verbose",
    headers: {
     "Accept": "application/json;odata=verbose",
     "X-RequestDigest": $("#__REQUESTDIGEST").val()
    },
    success: function(data) {
     var ulNews = "";
for (var i = 0; i < data.d.results.length; i++) {
            var objNews = data.d.results[i];
var objTitle = objNews.Title;
var objDesc = objNews.Description;
var objImageSrc = objNews.EncodedAbsUrl;
//var liNews = "<li><img src='" + objImageSrc +"' alt='" + objTitle + "'></li>";                        
var liNews = "<li><img src='" + objImageSrc +"' title='" +objTitle + "'></li>";
ulNews += liNews;
}
$("#slideshow").append("<ul>" + ulNews +"</ul>");
$("#slideshow").craftyslide({
  'pagination': false,
  'fadetime': 500,
  'delay': 3000,
  'width': '100%',
  'height': 300, 
          
});
    },
    error: function(data) {
     failure(data);
    }
   });
   
 
</script>

Yoursiteaddress باید آدرس سایت و در List Title عنوان مخرن تصاویر  را وارد کنید. در صورتی که ظاهر و اندازه اسلاید شو برای شما مورد پسند نمی باشد می توانید با تغییر در فایل css و js اسلاید شو را بنا به سلیقه خود تغییر دهید.

یک دیدگاه در “ساخت اسلاید شو داینامیک برای شیرپوینت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *