Création d'un slider

**truser** · 21/02/2014, 17h04

Bonjour à tous,

Je possède un site web sous sharepoint.
Cependant j'aimerais créer un slider pour ma home page.

Avez vous des pistes pour entreprendre sa création svp? J'ai essayé plusieurs méthodes mais sans succès.

Je vous en remercie

Cordialement,
Aurélien

**ludojojo** · 24/02/2014, 09h02

Bonjour,

Si tu veux éviter des développement server (.Net) tu peux le faire en utilisant une "Content Editor WebPart" (Editeur de contenu).
Cela te permettra d'insérer ton code JavaScript pour la création de ton slider.

As-tu le code nécessaire pour créer le slider en javascript ?
Quelle version de SharePoint utilises-tu ?

**truser** · 24/02/2014, 09h51

Merci de ta réponse,

Concernant la version, il s'agit de la version 2007.

Pour le slider, non je n'ai pas de code javascipt précis et je n'y connais rien en ce langage (ça ne facilite pas la tache).
Mais sur ce site : http://blog.mastykarz.nl/images-slid...t-2007-jquery/
il donne un code à copier dans une web part.
Cependant je me demande comment ce code fais le lien avec ma bibliothèque d’images. Je dois modifier ca dans le code ou... ?

Merci d'avance

**ludojojo** · 24/02/2014, 13h56

Envoyé par truser

Cependant je me demande comment ce code fais le lien avec ma bibliothèque d’images. Je dois modifier ca dans le code ou... ?

Bah moi aussi, je pense pas que son exemple de code ne se connecte à sa bibliothèque...
Je t'invite plutôt à travailler en deux étapes !
Déjà essaye d'afficher un slider avec des liens vers tes images fixes, pour cela tu peux utiliser par exemple amazingslider. (gratuit avec de nombreux exemples !)
Ensuite pour ce qui est de la récupération des images depuis SharePoint, tu peux utiliser les sources de Microsoft : msdn.microsoft.com

**truser** · 24/02/2014, 17h48

Merci pour tes infos.

j'ai suivi un exercice sur le net pour comprendre la mise en place et j'en a arrive à un slider mais avec ses images.
Je suppose donc que pour les remplacer il faut faire le lien avec ma bibliothèque mais je ne comprends la mise en place du jquerty.

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<div id="carrousel">
    <ul>
        <li><img src="http://lorempixel.com/700/200/" /></li>
		<li><img src="http://lorempixel.com/g/700/200/" /></li>
		<li><img src="http://lorempixel.com/700/200/abstract/" /></li>
    </ul>
</div>
<!-- on inclut la bibliothèque depuis les serveurs de Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
 
<script>
$(document).ready(function(){
 
var $carrousel = $('#carrousel'), // on cible le bloc du carrousel
    $img = $('#carrousel img'), // on cible les images contenues dans le carrousel
    indexImg = $img.length - 1, // on définit l'index du dernier élément
    i = 0, // on initialise un compteur
    $currentImg = $img.eq(i); // enfin, on cible l'image courante, qui possède l'index i (0 pour l'instant)
 
$img.css('display', 'none'); // on cache les images
$currentImg.css('display', 'block'); // on affiche seulement l'image courante
 
$carrousel.append('<div class="controls"> <span class="prev">Precedent</span> <span class="next">Suivant</span> </div>');
 
$('.next').click(function(){ // image suivante
 
    i++; // on incrémente le compteur
 
    if( i <= indexImg ){
        $img.css('display', 'none'); // on cache les images
        $currentImg = $img.eq(i); // on définit la nouvelle image
        $currentImg.css('display', 'block'); // puis on l'affiche
    }
    else{
        i = indexImg;
    }
 
});
 
$('.prev').click(function(){ // image précédente
 
    i--; // on décrémente le compteur, puis on réalise la même chose que pour la fonction "suivante"
 
    if( i >= 0 ){
        $img.css('display', 'none');
        $currentImg = $img.eq(i);
        $currentImg.css('display', 'block');
    }
    else{
        i = 0;
    }
 
});
 
function slideImg(){
    setTimeout(function(){ // on utilise une fonction anonyme
 
        if(i < indexImg){ // si le compteur est inférieur au dernier index
	    i++; // on l'incrémente
	}
	else{ // sinon, on le remet à 0 (première image)
	    i = 0;
	}
 
	$img.css('display', 'none');
 
	$currentImg = $img.eq(i);
	$currentImg.css('display', 'block');
 
	slideImg(); // on oublie pas de relancer la fonction à la fin
 
    }, 7000); // on définit l'intervalle à 7000 millisecondes (7s)
}
 
slideImg(); // enfin, on lance la fonction une première fois
 
});
</script>
 
<style type="text/css">
#carrousel{
    position:relative;
    height:200px;
    width:700px;
    margin:auto;
}
#carrousel ul li{
    position:absolute;
    top:0;
    left:0;
}
</style>

**ludojojo** · 25/02/2014, 09h20

Le concept est simple.
Jquery est le framework (ensemble de fonction) te permettant de travailler plus facilement en javascript.
C'est ce qui te permet par exemple de construire facilement ton slider !

Maintenant, il ne te reste plus qu'à insérer dynamiquement tes images, pour cela, il faut modifier dans ce que tu as actuellement, uniquement cette partie du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<li><img src="http://lorempixel.com/700/200/" /></li>
        <li><img src="http://lorempixel.com/g/700/200/" /></li>
        <li><img src="http://lorempixel.com/700/200/abstract/" /></li>
</ul>

Pour cela, il te faut utiliser les webservices de SharePoint qui vont te permettre d'obtenir les informations nécessaires depuis ta bibliothèque d'image.
Voici un exemple extrait de MSDN :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var siteUrl = '/sites/MySiteCollection'; //Url de ta collection de site contenant la bibliothèque cible
function retrieveListItemsInclude() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Images'); //récupération de la bibliothèque

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>'); //requête vers la bibliothèque (actuellement les 10 premiers éléments)
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem, 'Include(Id, DisplayName)'); //ensemble des champs de la bibliothèque que tu souhaites utiliser

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

//Fonction qui sera appelée si tout se passe bien, c'est ici que tu récupèreras tes images
function onQuerySucceeded(sender, args) {

    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator(); //récupère tous les éléments issue de ta requête
        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();

        //Exploitation des informations        listItemInfo += '\nID: ' + oListItem.get_id() +             '\nDisplay name: ' + oListItem.get_displayName() +             '\nUnique role assignments: ' + oListItem.get_hasUniqueRoleAssignments();    }    alert(listItemInfo.toString()); //élément qu'il faudra modifier par la suite pour insérer tes images dans le DOM et remplacer le code static}//Fonction appelée si jamais une erreur se produit lors de l'exécution de l'appel au webservicefunction onQueryFailed(sender, args) {    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }

**truser** · 25/02/2014, 09h27

Merci de ta réponse et surtout de ton aide.

Si je comprends bien je remplace la partie avec les <ul> et <li> par celle que tu m'as donné en ne remplaçant que l'url ou se situe mes images ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var siteUrl = '/sites/MySiteCollection'; //Url de ta collection de site contenant la bibliothèque cible
function retrieveListItemsInclude() {

**ludojojo** · 25/02/2014, 12h18

Envoyé par truser

Merci de ta réponse et surtout de ton aide.

De rien.

Envoyé par truser

Si je comprends bien je remplace la partie avec les <ul> et <li> par celle que tu m'as donné en ne remplaçant que l'url ou se situe mes images ?

Pas encore mais oui c'est l'idée ! Malheureusement je n'ai pas le temps de tester ce code, en revanche ce dernier devrait t'afficher à l'écran un message (les "alert" du code) avec des informations te permettant de savoir si le code arrive à récupérer les images ou pas.
Donc ne remplace pas encore tes ul/li, juste ajoute le code que je t'ai donnée avant ton script pour vérifier que cela fonctionne.
Si tout se passe bien, on regardera comment insérer les images pour reconstruire ton UL/LI. Dans le cas contraire, comment corriger le problème...

**truser** · 25/02/2014, 16h06

Merci !
Je viens d'essayer mais cela ne change rien et je n'obtiens pas le message.

voici ce que j'ai fais :
Une autre question, qui n'a rien à voir, la fonction display sert à quoi ? car j'aurai aimé changer l’effet quand il y a un changement de slide et je suppose que cela provient de mon display block none mais je ne vois pas comment le modifier.

En tout cas 1000 merci pour ta patience et tes explications

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
		<div id="carrousel">
    <ul>
        <li><img src="http://lorempixel.com/700/200/" /></li>
		<li><img src="http://lorempixel.com/g/700/200/" /></li>
		<li><img src="http://lorempixel.com/700/200/abstract/" /></li>
    </ul>
</div>
<!-- on inclut la bibliothèque depuis les serveurs de Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
 
<script>
<script>
var siteUrl = 'PublishingImages/banner/'; //Url de ta collection de site contenant la bibliothèque cible
function retrieveListItemsInclude() {
 
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Images'); //récupération de la bibliothèque
 
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>'); //requête vers la bibliothèque (actuellement les 10 premiers éléments)
    this.collListItem = oList.getItems(camlQuery);
 
    clientContext.load(collListItem, 'Include(Id, DisplayName)'); //ensemble des champs de la bibliothèque que tu souhaites utiliser
 
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
 
//Fonction qui sera appelée si tout se passe bien, c'est ici que tu récupèreras tes images
function onQuerySucceeded(sender, args) {
 
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator(); //récupère tous les éléments issue de ta requête
 
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
 
        //Exploitation des informations        listItemInfo += '\nID: ' + oListItem.get_id() +             '\nDisplay name: ' + oListItem.get_displayName() +             '\nUnique role assignments: ' + oListItem.get_hasUniqueRoleAssignments();    }    alert(listItemInfo.toString()); //élément qu'il faudra modifier par la suite pour insérer tes images dans le DOM et remplacer le code static}//Fonction appelée si jamais une erreur se produit lors de l'exécution de l'appel au webservicefunction onQueryFailed(sender, args) {    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
 
 
 
$(document).ready(function(){
 
var $carrousel = $('#carrousel'), // on cible le bloc du carrousel
    $img = $('#carrousel img'), // on cible les images contenues dans le carrousel
    indexImg = $img.length - 1, // on définit l'index du dernier élément
    i = 0, // on initialise un compteur
    $currentImg = $img.eq(i); // enfin, on cible l'image courante, qui possède l'index i (0 pour l'instant)
 
$img.css('display', 'none'); // on cache les images
$currentImg.css('display', 'block'); // on affiche seulement l'image courante
 
$carrousel.append('<div class="controls"> <span class="prev">Precedent</span> <span class="next">Suivant</span> </div>');
 
$('.next').click(function(){ // image suivante
 
    i++; // on incrémente le compteur
 
    if( i <= indexImg ){
        $img.css('display', 'none'); // on cache les images
        $currentImg = $img.eq(i); // on définit la nouvelle image
        $currentImg.css('display', 'block'); // puis on l'affiche
    }
    else{
        i = indexImg;
    }
 
});
 
$('.prev').click(function(){ // image précédente
 
    i--; // on décrémente le compteur, puis on réalise la même chose que pour la fonction "suivante"
 
    if( i >= 0 ){
        $img.css('display', 'none');
        $currentImg = $img.eq(i);
        $currentImg.css('display', 'block');
    }
    else{
        i = 0;
    }
 
});
 
function slideImg(){
    setTimeout(function(){ // on utilise une fonction anonyme
 
        if(i < indexImg){ // si le compteur est inférieur au dernier index
	    i++; // on l'incrémente
	}
	else{ // sinon, on le remet à 0 (première image)
	    i = 0;
	}
 
	$img.css('display', 'none');
 
	$currentImg = $img.eq(i);
	$currentImg.css('display', 'block');
 
	slideImg(); // on oublie pas de relancer la fonction à la fin
 
    }, 7000); // on définit l'intervalle à 7000 millisecondes (7s)
}
 
slideImg(); // enfin, on lance la fonction une première fois
 
});
</script>
 
<style type="text/css">
#carrousel{
    position:relative;
    height:200px;
    width:700px;
    margin:auto;
}
#carrousel ul li{
    position:absolute;
    top:0;
    left:0;
}
</style>

**ludojojo** · 26/02/2014, 08h55

Envoyé par truser

Merci !
Je viens d'essayer mais cela ne change rien et je n'obtiens pas le message.

Alors y'a un problème avec le code...

Envoyé par truser

Une autre question, qui n'a rien à voir, la fonction display sert à quoi ? car j'aurai aimé changer l’effet quand il y a un changement de slide et je suppose que cela provient de mon display block none mais je ne vois pas comment le modifier.

Chaque chose en sont temps. Mais pour répondre rapidement à ta question, le display block permet de définir la façon dont l'image sera disposé dans ta page. Pour changer l'effet de transition, il faudra utiliser une fonction jQuery de type fadein ou fadeout par exemple.
Mais on s'attardera sur ce point quand tu arriveras à récupérer les informations depuis ta liste...
Essaye plutôt ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
        <div id="carrousel">
    <ul>
        <li><img src="http://lorempixel.com/700/200/" /></li>
        <li><img src="http://lorempixel.com/g/700/200/" /></li>
        <li><img src="http://lorempixel.com/700/200/abstract/" /></li>
    </ul>
</div>
<!-- on inclut la bibliothèque depuis les serveurs de Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
 
<script type="text/javascript">
var siteUrl = '/';
function retrieveListItemsInclude() {
 
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Images');
 
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);
 
    clientContext.load(collListItem, 'Include(Id, DisplayName)');
 
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
 
function onQuerySucceeded(sender, args) {
 
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
 
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
 
         listItemInfo += '\nID: ' + oListItem.get_id() + '\nDisplay name: ' + oListItem.get_displayName();
}
alert(listItemInfo.toString());
}
function onQueryFailed(sender, args) {    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
 
 
$(document).ready(function(){
  retrieveListItemsInclude();
var $carrousel = $('#carrousel'), // on cible le bloc du carrousel
    $img = $('#carrousel img'), // on cible les images contenues dans le carrousel
    indexImg = $img.length - 1, // on définit l'index du dernier élément
    i = 0, // on initialise un compteur
    $currentImg = $img.eq(i); // enfin, on cible l'image courante, qui possède l'index i (0 pour l'instant)
 
$img.css('display', 'none'); // on cache les images
$currentImg.css('display', 'block'); // on affiche seulement l'image courante
 
$carrousel.append('<div class="controls"> <span class="prev">Precedent</span> <span class="next">Suivant</span> </div>');
 
$('.next').click(function(){ // image suivante
 
    i++; // on incrémente le compteur
 
    if( i <= indexImg ){
        $img.css('display', 'none'); // on cache les images
        $currentImg = $img.eq(i); // on définit la nouvelle image
        $currentImg.css('display', 'block'); // puis on l'affiche
    }
    else{
        i = indexImg;
    }
 
});
 
$('.prev').click(function(){ // image précédente
 
    i--; // on décrémente le compteur, puis on réalise la même chose que pour la fonction "suivante"
 
    if( i >= 0 ){
        $img.css('display', 'none');
        $currentImg = $img.eq(i);
        $currentImg.css('display', 'block');
    }
    else{
        i = 0;
    }
 
});
 
function slideImg(){
    setTimeout(function(){ // on utilise une fonction anonyme
 
        if(i < indexImg){ // si le compteur est inférieur au dernier index
        i++; // on l'incrémente
    }
    else{ // sinon, on le remet à 0 (première image)
        i = 0;
    }
 
    $img.css('display', 'none');
 
    $currentImg = $img.eq(i);
    $currentImg.css('display', 'block');
 
    slideImg(); // on oublie pas de relancer la fonction à la fin
 
    }, 7000); // on définit l'intervalle à 7000 millisecondes (7s)
}
 
slideImg(); // enfin, on lance la fonction une première fois
 
});
</script>
 
<style type="text/css">
#carrousel{
    position:relative;
    height:200px;
    width:700px;
    margin:auto;
}
#carrousel ul li{
    position:absolute;
    top:0;
    left:0;
}
</style>

var siteUrl = 'PublishingImages/banner/'; //Url de ta collection de site contenant la bibliothèque cibleC'est une mauvaise configuration je pense, es-tu certains que ce soit l'url de ta collection de site ? J'en doute fortement...
Ton url doit être la partie en gras sur un exemple de ce type : http://mon.site.com/sites/MaCollectionDeSite/MaBibliothequeDimages/monimage.jpg

Si tu n'es pas sur de ton coup, donne nous l'adresse de ta bibliothèque cible, on te donnera la collection de site à mettre dans ton script.
Pense également à vérifier le nom de la bibliothèque (dans les paramètre de cette dernière).

**truser** · 26/02/2014, 12h40

J'ai regardé où se trouvait ma bibliothèque cible et son adresse est :
www....com/direct/PublishingImages/banner/

dedans ne se trouve que 2 images dont voici l'url :
http://www.../PublishingImages/banner/banner1.jpg
http://www.../direct/PublishingImage...er/banner2.jpg

Du coup j'ai essayé avec le code en modifiant l'url de ma bibliothèque mais cette fois ci toujours pas de message d'erreur et le slider ne défile aucune image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 <div id="carrousel">
    <ul>
        <li><img src="http://lorempixel.com/700/200/" /></li>
        <li><img src="http://lorempixel.com/g/700/200/" /></li>
        <li><img src="http://lorempixel.com/700/200/abstract/" /></li>
    </ul>
</div>
<!-- on inclut la bibliothèque depuis les serveurs de Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
 
<script type="text/javascript">
var siteUrl = 'www.com/direct/PublishingImages/banner/';
function retrieveListItemsInclude() {
 
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Images');
 
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);
 
    clientContext.load(collListItem, 'Include(Id, DisplayName)');
 
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
 
function onQuerySucceeded(sender, args) {
 
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
 
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
 
         listItemInfo += '\nID: ' + oListItem.get_id() + '\nDisplay name: ' + oListItem.get_displayName();
}
alert(listItemInfo.toString());
}
function onQueryFailed(sender, args) {    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
 
 
$(document).ready(function(){
  retrieveListItemsInclude();
var $carrousel = $('#carrousel'), // on cible le bloc du carrousel
    $img = $('#carrousel img'), // on cible les images contenues dans le carrousel
    indexImg = $img.length - 1, // on définit l'index du dernier élément
    i = 0, // on initialise un compteur
    $currentImg = $img.eq(i); // enfin, on cible l'image courante, qui possède l'index i (0 pour l'instant)
 
$img.css('display', 'none'); // on cache les images
$currentImg.css('display', 'block'); // on affiche seulement l'image courante
 
$carrousel.append('<div class="controls"> <span class="prev">Precedent</span> <span class="next">Suivant</span> </div>');
 
$('.next').click(function(){ // image suivante
 
    i++; // on incrémente le compteur
 
    if( i <= indexImg ){
        $img.css('display', 'none'); // on cache les images
        $currentImg = $img.eq(i); // on définit la nouvelle image
        $currentImg.css('display', 'block'); // puis on l'affiche
    }
    else{
        i = indexImg;
    }
 
});
 
$('.prev').click(function(){ // image précédente
 
    i--; // on décrémente le compteur, puis on réalise la même chose que pour la fonction "suivante"
 
    if( i >= 0 ){
        $img.css('display', 'none');
        $currentImg = $img.eq(i);
        $currentImg.css('display', 'block');
    }
    else{
        i = 0;
    }
 
});
 
function slideImg(){
    setTimeout(function(){ // on utilise une fonction anonyme
 
        if(i < indexImg){ // si le compteur est inférieur au dernier index
        i++; // on l'incrémente
    }
    else{ // sinon, on le remet à 0 (première image)
        i = 0;
    }
 
    $img.css('display', 'none');
 
    $currentImg = $img.eq(i);
    $currentImg.css('display', 'block');
 
    slideImg(); // on oublie pas de relancer la fonction à la fin
 
    }, 7000); // on définit l'intervalle à 7000 millisecondes (7s)
}
 
slideImg(); // enfin, on lance la fonction une première fois
 
});
</script>
 
<style type="text/css">
#carrousel{
    position:relative;
    height:200px;
    width:700px;
    margin:auto;
}
#carrousel ul li{
    position:absolute;
    top:0;
    left:0;
}
</style>

**ludojojo** · 26/02/2014, 16h23

Essaye avec un simple "/" ou "<a href="http://www...com/direct/PublishingImages/banner/" target="_blank">/direct/</a>".

Création d'un slider

Développement Sharepoint .NET

Discussions similaires

Partager

Partager