Опрос с картинками (Sharepoint Survey Image Question)

Появилась задача по созданию голосования для выбора лучшей фотографии.
есть стандартный функционал голосования, но в нем нет возможности вставить изображения.


И пришлось прибегнуть к кастомизации страницы с помощью jQuery. Так же для зумирования изображения была использована библиотека ImageViewer.

И так к обзору решения.
Все достаточно просто. Пробегаем по всем вариантам ответов и в блок с вариантом ответа добавляем div с изображением.

!!! ВАЖНО название изображения должно совпадать с вариантом ответа и иметь расширение jpg.

Как пользоваться
В файле core.js поменять путь до места хранения фото

Добавить веб часть редактор контента и в нем указать ссылку на index.html

Код js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

'use strict' _spBodyOnLoadFunctionNames.push("getStarted"); function getStarted() {     // добавляем изображения    var spanArray = jQuery(".ms-RadioText");    spanArray.each(function( index ) {        var labelText = $( this ).text();         jQuery( this ).after('<div class="divImage"> <img alt="'+labelText + '" class="gallery-items" data-high-res-src="/SiteCollectionImages/Фото%20Баку%202017/'+ labelText +                         '.jpg" src="/SiteCollectionImages/Фото%20Баку%202017/'+ labelText +                         '.jpg"></div> ');               });     // активируем зумм      var viewer = ImageViewer();     $('.gallery-items').click(function () {         //console.log("clik")         var imgSrc = jQuery(this).attr("data-high-res-src");         var highResolutionImage = $(this).data('high-res-img');         //console.log(imgSrc, highResolutionImage);         viewer.show(imgSrc, highResolutionImage);     }); };

Css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.gallery-items {        width: 250px;         cursor: pointer;           border-width: 2px;     border-color: #92c0e0;     border-style: double;           } .ms-RadioText label{            font-size: large;           } .divImage{      text-align: right;          margin: 10px; } .divImage :hover {     box-shadow: 0 0 10px rgba(0,0,0,0.5);      } .ms-RadioText {     width: 250px!important; } .ms-formbody span table  tr:nth-child(2n){     background-color:  rgba(128, 128, 128, 0.15); } .ms-formbody span table tr td{     width: 450px; }

HTML

?

1 2 3 4 5 6 7 8

<script src="/Style%20Library/Js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="/Style%20Library/ImageViewer-master/imageviewer.min.js" type="text/javascript"></script> <script src="/Style Library/PhotoSurvey/core.js" type="text/javascript"></script>   <link href="/Style%20Library/ImageViewer-master/imageviewer.css" rel="stylesheet" type="text/css"> <link href="/Style Library/PhotoSurvey/style.css" rel="stylesheet" type="text/css">

вот результат

Весь проект можно скачать тут.

UPD
для оптимизации загрузки страницы можно использовать стандартный функционал позволяющий получать меньший размер изображения. подробнее можно почитать тут

я добавил свой размер изображения и превю будет иметь меньший размер