Discussion :

[tex73]

Bonjour à tous
je suis entrain de realiser un slider, à partir des bout de codes que j'ai trouvé par ci par là
sur le web.(lol je maitrise mieux le PHP mais suis debutant en js=>jquery).
pour l'instant mon slider fonctionne plutot bien mais je souhaite effectuer qque changements au niveau du caption.
le code html du slider est le suivant:

Code html :

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

1
2
3
4
5
6
7
8
<div id="slider">
    <div>
        <img scr="image1.jpg" title="mon caption 1"/>
    </div>
    <div>
        <img scr="image2.jpg" title="mon caption 2"/>
    </div>
</div>

la function qui permet de recuperer le caption est la suivante:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * Appends image captions to the DOM
 */
var appendCaptions = function () {
    // cycle through each child
    slider.children.each(function (index) {
        // get the image title attribute
        var title = $(this).find('img:first').attr('title');
        // append the caption
        if (title != undefined && ('' + title).length) {
            $(this).append('<div class="ircaption"><span>' + title + '</span></div>');
        }
    });
}

je souhaiterai modifier le code html pour qu'il se presente comme suit:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="slider">
    <div>
        <img scr="image1.jpg"/>
        <h1>le titre de mon caption 1</h1>
        <p> mon petit commentaire 1</p>
    </div>
    <div>
        <img scr="image2.jpg"/>
        <h1>le titre de mon caption 2</h1>
        <p> mon petit commentaire 2</p>
    </div>
</div>

mais pour cela il faut que la fonction ci dessus au lieu de recuperer l'attribut "title" de la balise "img"
recupere plutot le contenus de la balise div courante sauf la balise "img".
donc voici la ligne à modifier:

Code :

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

var title = $(this).find('img:first').attr('title');

merci de m'aider à faire cette modification car je ne vois pas comment m'y pendre.

[Sylvercis]

tu n'as pas dit où se trouve les données que tu veut ajouter (h1 et p) a chaque div de ton slider.

sinon avec la fonction que tu as trouvé tu peut acceder au "title" de chaque img, ce qui te permettra que la supprimer (d'après ton 2eme code HTML).

Code :

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

1
2
 
$(this).find('img:first').prop('title', 'your new title');

En y ajoutant la fonction ".parent" tu retrouve le div qui contient l'image.
https://api.jquery.com/parent/

Code :

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

1
2
3
4
5
6
 
var madiv = $(this).find('img:first').parent();
 
// ensuite tu peut ajouter le code que tu veut dans la div:
 
$(madiv).append('<p>blabla></p>');

[tex73]

merci pour votre reponse.
le code html est generé coté serveur par du php avec des données que je recupere soit depuis une bdd, soit depuis un fichier xml.
ton exemple, me donne une idée mais je ne sais pas si elle est bonne:

Code :

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

1
2
3
4
var madiv = $(this).find('img:first').parent();
var title = $(madiv).html();
if(title.match('/<img(.*)\/>/gi'))
 title = title.replace('/<img(.*)\/>/gi', '');

ne pouvant tester cela pour l'instant, je le ferrai plus tard.

[tex73]

l'exemple ci-dessus ne fonctionne pas. j'ai donc choisi de presenter
le html du slider coe suit:

Code html :

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
<div id="slider">
    <div>
        <img scr="image1.jpg"/>
<span>
        <h1>le titre de mon caption 1</h1>
        <p> mon petit commentaire 1</p>
</span>
    </div>
    <div>
        <img scr="image2.jpg"/>
<span>
        <h1>le titre de mon caption 2</h1>
        <p> mon petit commentaire 2</p>
</span>
    </div>
</div>

et du coup notre fonction a été modifiée comme suit:

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
/**
 * Appends image captions to the DOM
 */
var appendCaptions = function(){
	// cycle through each child
	slider.children.each(function(index){
		var title = $(this).find('span:first').html();
		if(title.match(/<img(.*)\/>/gi))
		 title = title.replace(/<img(.*)\/>/gi, '');
		// append the caption
		if (title != undefined && ('' + title).length) {
                   $(this).append('<div class="ircaption"><span>' + title + '</span></div>');
                }
	});
}

dans le fichier css j'ai posé

Code css :

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

.sliderwrapper span{display:none;}

pour eviter l'affichage systématique du caption car le slider possede une propiété booléenne "showcaption" et la çà marche, seulement je ne sais pas si la structure du code html dans ce cas ci est correcte. merci de m'en dire plus.

[Sylvercis]

Je ne vois pas de problème avec le code HTML.
Tu peux juste rajouter la balise l'attribut "alt" dans la balise IMG pour être conforme.