11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je suis en plein programmation d'un site pour un projet scolaire. Et je veux le faire très dynamique pour me faire la main avec le Jquerry

J'ai fait une LightBox, le script qui récupère l'adresse d'une image, puis l'affiche dans la lightbox.
J'aimerais récupérer aussi un titre et le mettre dans ma lightbox juste avant L'image.

Voici à quoi ressemble un article type :

<li value="0">
                            <ul class="licontenue">
                                <li>
                                    <div class="bandenoirehaut"></div>
                                    <div class="filtreviolet"></div>
                                    <h3 class="titrecarre">Tuto :</br>Faire un Webdesign</h3>
                                    <div class="image"><img src="images/mini-webdesign.jpg" alt="" /></div>
                                    <div class="bandenoirebas"></div>
                                </li > 
                                <div class="titreduli">
                                    <h3>
                                        Tuto : Faire un Webdesign
                                    </h3>
                                </div>
                                <div>
                                    <p>
                                        Voici un petit tutorial qui vous apprendras quelsques bases pour faire un jolie Webdesign et propre
                                    <br /><p class="apercus"  value="<iframe width='560' height='315' src='http://www.youtube.com/embed/8Uee_mcxvrw' frameborder='0' allowfullscreen></iframe>"><--------Voir l'aperçu---------></p>
                                    </p>
                                </div>
                            </ul class="clear">
</li>


et voici mon script pour faire apparaitre ma LightBox et qui récupére l'adresse de l'image ou vidéo

$(".apercus").click(function(){
            var lelien = $(this);
            
              $("#lightbox").animate({ 
                marginLeft: "0in",
              }, 1500,function()
              {
                    var adresse = $(lelien).attr('value');
                    $('#lighboxdedans>h3').after(adresse);
              } );
        });

        $("#lightbox").click(function(){
            $("#lightbox").animate({ 
                     marginLeft: "-15in",
            }, 1500,function() {
                    $('#lighboxdedans>img, #lighboxdedans>iframe').remove();
            });
});


Alors j'aimerais bien sélectionner le H3 de mon article, puis le copier dans ma LightBox, mon gros soucis et comment sélectionner le h3 qui correspond à mon image ou vidéo

Voici l'adresse du site pour vous faire une petite idée, le script c'est les premiers carrés

http://www.serecomhills.fr/lesite/
Hello,

je pense qu'a la base, il y a un problème avec le value de <p class="apercus">.

Mettre une autre balise comme ça qui elle même contient des attributs ce n'est pas bon. Pourquoi ne pas tout simplement mettre ton iframe en display:none ?

Sinon pour ta sélection de h3, ne serait t'il pas plus simple de rajouter le titre dans un attribut de apercus ? (avec data-title-image=" Tuto : Faire un Webdesign" par exemple)
Ba j'ai réécrit mon code, pour que chaque article est son id=au titre, c'est plus simple pour le mettre ensuite dans la base base donnée

<li value="0">
                           <?php echo"<ul class='licontenue' value='".$donnees['TitreArticle']."'> ";?>
                                <li>
                                    <div class="bandenoirehaut"></div>
                                    <div class="filtreviolet"></div>
                                    <h3 class="titrecarre"><?php echo $donnees['TitreArticle']; ?></h3>
                                    <div class="image"><img src=<?php echo "'".$donnees['LienPhotoMini']."'"; ?> alt="" /></div>
                                    <div class="bandenoirebas"></div>
                                </li >
                                <div class="pourletexte">

                                    <div class="titreduli">
                                        <h3>
                                            <?php echo $donnees['TitreArticle']; ?>
                                        </h3>
                                    </div>
                                    <div class="letexte">
                                        <p>
                                            <?php echo $donnees['Texte']; ?>
                                        </p>
                                    </div>
                                    <div class="apercus" value=<?php echo "'".$donnees['LienGrandePhoto']."'";?><p>L'aperçu</p></div>
                                    <div class="ressource"><p><?php echo $donnees['Ressource']; ?></p></div>
                                    <div class="ecritele"><p><?php echo $donnees['DateDeCreation']; ?></p></div>
                                </div> 
                            </ul class="clear">
         </li>
Salut,

Tu devrais trouver ton bonheur parmi ces méthodes...
Sinon, tant qu'à réécrire ton code, il reste quelques trucs superflus (div vides, classes à gogo) ou incorrects (hiérarchie de tes titres, div directement dans ul pas valides)...

Bien à toi,
tm