Sys-Admin Forum

Слайдер для SharePoint - создаем адаптивный JQuery слайдер в несколько шагов

Весь этап внедрения слайдера для SharePoint состоит из нескольких шагов:

  • Создание библиотеки с изображениями
  • Копирование файлов слайдера на сервер SP
  • Создание скрипта

В качестве слайдера будет использоваться SlidesJS, итак поехали:

Создание библиотеки изображений SharePoint

  • Site Contents - add an app - Picture Library
  • Далее необходимо указать имя библиотеки - Slider
  • Загужаем в библиотеку изображения

Копирование скриптов и стилей на сервер SharePoint

  • Здесь все просто, необходимо создать папку slidesjs в каталоге:
c:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/15/TEMPLATE/LAYOUTS/slidesjs
  • Скопировать файлы, папки слайдера

Создать файл - slides.js с кодом (в стиле указаны изображения из первого попавшегося экзампла):


<!-- Slider design-->
<style>
  body {
   -webkit-font-smoothing: antialiased;
   font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #232525;
   /*padding-top:70px;*/
}

#slides {
   display: none
}

#slides .slidesjs-navigation {
   margin-top:5px;
}

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
   background-image: url(/_layouts/15/slidesjs/examples/playing/img/btns-next-prev.png);
   background-repeat: no-repeat;
   display:block;
   width:12px;
   height:18px;
   overflow: hidden;
   text-indent: -9999px;
   float: left;
   margin-right:5px;
}

a.slidesjs-next {
   margin-right:10px;
   background-position: -12px 0;
}

a:hover.slidesjs-next {
   background-position: -12px -18px;
}

a.slidesjs-previous {
   background-position: 0 0;
}

a:hover.slidesjs-previous {
   background-position: 0 -18px;
}

a.slidesjs-play {
   width:15px;
   background-position: -25px 0;
}

a:hover.slidesjs-play {
   background-position: -25px -18px;
}

a.slidesjs-stop {
   width:18px;
   background-position: -41px 0;
}

a:hover.slidesjs-stop {
   background-position: -41px -18px;
}

.slidesjs-pagination {
   margin: 7px 0 0;
   float: right;
   list-style: none;
}

.slidesjs-pagination li {
   float: left;
   margin: 0 1px;
}

.slidesjs-pagination li a {
   display: block;
   width: 13px;
   height: 0;
   padding-top: 13px;
   background-image: url(/_layouts/15/slidesjs/examples/playing/img/pagination.png);
   background-position: 0 0;
   float: left;
   overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
   background-position: 0 -13px
}

.slidesjs-pagination li a:hover {
   background-position: 0 -26px
}

#slides a:link,
#slides a:visited {
   color: #333
}

#slides a:hover,
#slides a:active {
   color: #9e2020
}

.navbar {
   overflow: hidden
}
</style>
<!-- End Slider design -->

<!-- Responsive style -->
<style>
#slides {
display: none
}

.container {
margin: 0 auto
}

/* For tablets & smart phones */
@media (max-width: 767px) {
body {
 padding-left: 20px;
 padding-right: 20px;
}
.container {
 width: auto
}
}

/* For smartphones */
@media (max-width: 480px) {
.container {
 width: auto
}
}

/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
.container {
 width: 724px
}
}

/* For larger displays */
@media (min-width: 1200px) {
.container {
 width: 1170px
}
}
</style>
<!-- End Responsive style -->

<!-- Slider -->
<div class="slide-container">
<div id="slides">
</div>
</div>
<!-- End Slider -->

<!-- Slider script -->
<script type="text/javascript" src="/_layouts/15/slidesjs/examples/playing/js/jquery.slides.min.js"></script>

<!-- Retrieve images from gallery-->
<script type="text/javascript">
jQuery(document).ready(function() {
var basePath = "/_api/";
jQuery.ajax({
   url: basePath + "lists/GetByTitle('Slider')/items?$select=EncodedAbsUrl,Title",
   type: "GET",
   headers: { "Accept": "application/json;odata=verbose" },
   success: function (data) {
//script to build UI HERE
jQuery.each(data.d.results, function (index, value) {
   jQuery("#slides").append("<img src='" + value.EncodedAbsUrl + "'" + " alt='" + value.Title + "'/>");
});

// Slider settings
jQuery(function () {
   jQuery('#slides').slidesjs({
      play: {
         active: true,
         auto: true,
         interval: 5000,
         swap: true
      }
   });
});
},
error: function (data) {
// output error HERE
alert(data.statusText);
}
});
});

</script>

Использование скрипта и самого слайдера

  • Загрузить файл в библиотеку SiteAssets
  • Открыть страницу на редактирование (где будет крутиться слайдер)
  • Добавить WebPart (Media and Content - Content Editor)

В свойствах парта указать:

../SiteAssets/slides.js

Спасибо:
http://bastiaanjacobs.nl/2014/04/09/sharepoint-2013-rest-slideshow/