Sharepoint 2013 - un slider JSSOR sur bib Images

Emmanuel Sotter
Sharepoint 2013
webpart recherche de contenu
Créer un modèle d’affichage

Webpart recherche de contenu
Insérer composant webpart type « recherche de contenu ». Modifier les propriétés de la
webpart et cliquer sur « changer la requête »
Pointer sur l’url de votre bibliothèque d’images

Voici le résultat en utilisant le contrôle « liste », l’ élément «grande image », et en modifiant le
mappage de propriétés comme suit
Nous allons créer un contrôle et élément d’affichage pour avoir un slider

Vue d’ensemble
Master Page
Master Page
Mise en page
Mise en page 1
Contrôle de champ
Contrôle de
champ
webpart
Webpart Recherche de
contenu
Modèle d’affichage
contrôle
Modèle
d’élément
Modèle
d’élément
Mise en page 2
Contrôlede
champ
Webpart Recherche de contenu
Modèle de controle
Modèle d’élément
modèle de contrôle
+
modèle d‘élément
= Modèle d’affichage

Modèle d’affichage contrôle
Fixe le caneva générique de l’affichage des éléments.
Webpart Recherche de contenu
Récupère le résultat et transmet au modèle

L’objectif est d’avoir un affichage type slider, j’ai choisi d’utiliser le script javascript disponible
gratuitement sur http://www.jssor.com/.
Nous allons dans un premier temps, installer un modèle d’affichage que j’ai préparé pour vous.

Sources du modèle d’affichage
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Controle Slider Shareproject</title>

</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script>
$includeScript(this.url, "~sitecollection/Style%20Library/js/jquery-1.9.1.min.js");
$includeScript(this.url, "~sitecollection/Style%20Library/js/jssor.slider.mini.js");
</script>
<div ID="list-slider">

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(~sitecollection/Style%20Library/img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>

<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">

_#= ctx.RenderItems(ctx) =#_
</div>
</div>
</div>
</body>
</html>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Elements Slider Shareproject</title>

</head>
<body>
<div id="Item_SlideImage" >

<div id="_#= encodedId =#_" data-displaytemplate="ItemSlideList">
<a href="_#= linkURL =#_" title="_#= $htmlEncode(title) =#_" target="_blank"><img u="image" src="_#= pictureURL =#_" /></a>
<div u="caption" t="transition_name2" t2="transition_name1" style="position: absolute; top: 250px; left: 30px; min-width:100px;
height: 25px; background:orange;">
<p><a href="_#= linkURL =#_" title="_#= $htmlEncode(title) =#_" target="_blank">_#= $htmlEncode(title) =#_ </a></p>
</div>
</div>

</div>
</body>
</html>
contrôle-slider-list.html
element-slider-list.html
Et télécharger les sources de www.jssor.com

Déposer dans le répertoire « js » de votre bibliothèque de
style les fichiers:
• Jquery-1-9-1.js, ou utiliser jquery de v1 à v2
• Jssor.js
• Jssor.slider.mini.js
Via Webdav ou sharepoint, Créer un répertoire à l’adresse
http://monserveur/_catalogs/masterpage/ , dans la galerie des
master page
Déposer les fichiers contrôle-slider-list.html et element-slider-
list.html

contrôle
Aller dans la galerie des master page, modifier les propriétés de
control-list-image.html
Permet de générer un fichier .JS complet qu’utilise SP
Content Web Parts suffit…il s’agit de la liste des contrôles
De recherche sur lesquels ce modèle pourra être appliqué

Elément
Aller dans la galerie des master page, modifier les propriétés de
Element-list-image.html
Archiver puis Publier les pages html : le modèle est
disponible dans les paramètres de la webpart.
On remarque les .js générés

Application du modèle d’affichage
Ouvrir la page contenant la webpart de recherche de contenu, modifier, et paramètres de la webpart.
Dans les propriétés de la webpart recherche de contenu, mettre
les options de contrôle et élément comme suit:

Emmanuel Sotter
Merci, oleti,
malo,maruru,thanks

Et voilà!
Copier les fichiers javascript « slides.min.jquery » et « jquery-1.8.3.min » dans le répertoire « js » de style library
Copier les fichiers CSS « global » dans le répertoire « slider/css/ » de style library.
Copier les fichiers html fourni dans _catalogs/masterpage/Display Templates/Search
Ouvrir le gestionnaire de conception, menu 5 modifier les modèles.
Vous apercevez vos fichiers html convertis avec succès.
Modifiez les propriétés de html pour lui donner les types de contrôles cibles et publiez.
Un autre Modèle d’affichage

Sharepoint 2013 - un slider JSSOR sur bib Images

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (8)

Similar to Sharepoint 2013 - un slider JSSOR sur bib Images

Similar to Sharepoint 2013 - un slider JSSOR sur bib Images (20)

Recently uploaded

Recently uploaded (20)

Sharepoint 2013 - un slider JSSOR sur bib Images