IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Slideshow : aide à la modification du code


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Juillet 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juillet 2013
    Messages : 7
    Par défaut Slideshow : aide à la modification du code
    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.

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Octobre 2009
    Messages
    175
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France, Seine et Marne (Île de France)

    Informations forums :
    Inscription : Octobre 2009
    Messages : 175
    Par défaut
    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>');

  3. #3
    Membre habitué
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Juillet 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juillet 2013
    Messages : 7
    Par défaut
    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.

  4. #4
    Membre habitué
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Juillet 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juillet 2013
    Messages : 7
    Par défaut
    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.

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Octobre 2009
    Messages
    175
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France, Seine et Marne (Île de France)

    Informations forums :
    Inscription : Octobre 2009
    Messages : 175
    Par défaut
    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.

Discussions similaires

  1. [XL-2010] Aide pour modification d'un code VBA (Fonction Ping sous Excel)
    Par osiris13010 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 08/07/2012, 14h16
  2. [Toutes versions] Erreur 3048 Aide pour modif code
    Par Aladin_23 dans le forum VBA Access
    Réponses: 7
    Dernier message: 10/02/2011, 11h37
  3. Je besoin d'aide pour terminer mon code
    Par Paulinho dans le forum C++
    Réponses: 7
    Dernier message: 06/11/2005, 23h30
  4. Aide pour modification de script
    Par cryptorchild dans le forum Langage
    Réponses: 3
    Dernier message: 04/10/2005, 15h59
  5. Aide pour modification d'un menu dynamique
    Par GarGamel55 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/09/2005, 18h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo