Problème de Widget (Slider)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème de Widget (Slider)

Message par soul.eater le Jeu 29 Mai 2014 - 1:55

Bonjour,

Je fais appel à vos lumières car je rencontre un problème avec un code de slider vidéo, quand j'en met un en place il fonctionne très bien mais lorsque j'en rajoute un deuxième celui-ci n'apparaît pas et je n'en comprend pas la raison.

Merci d'avance pour vos retours à ce sujet.

Voici mes deux codes :

Code:
<script src="http://rdlm.free-h.net/V/Sareth/amazingslider.js"></script>
    <script src="http://rdlm.free-h.net/V/Sareth/initslider-1.js"></script>
    <!-- End of head section HTML codes -->
    
</head>
<body>
<div style="margin:30px auto;max-width:350px;">
    
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 56px;">
        <ul class="amazingslider-slides" style="display:none;">
            <li><img src="http://rdlm.free-h.net/V/Sareth/srtB_Klgzvc.jpg" alt="Violent ce jeu ?!?! Pas du tout ! - Hotline Miami Gameplay (FR)" />
                <video preload="none" src="http://www.youtube.com/embed/srtB_Klgzvc"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/Sareth/QPLgW-_aySs.jpg" alt="Soyez maître de l'esprit plutôt que maîtrisé par l'esprit - Shadow Warrior Gameplay (FR)" />
                <video preload="none" src="http://www.youtube.com/embed/QPLgW-_aySs"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/Sareth/tX_dFYJyLRY.jpg" alt="Tout est bruit pour qui a peur - Outlast Gameplay (FR) - Episode 2" />
                <video preload="none" src="http://www.youtube.com/embed/tX_dFYJyLRY"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/Sareth/3uPShA_CLPY.jpg" alt="BOUH ! Ça fait peur ! - Outlast Gameplay (FR)" />
                <video preload="none" src="http://www.youtube.com/embed/3uPShA_CLPY"></video>
</li>
        </ul>
        <div class="amazingslider-engine" style="display:none;"><a href="http://amazingslider.com">jQuery Slideshow</a></div>
    </div>

Code:
<script src="http://rdlm.free-h.net/V/BFBC2/amazingslider.js"></script>
    <script src="http://rdlm.free-h.net/V/BFBC2/initslider-1.js"></script>
    <!-- End of head section HTML codes -->
    
</head>
<body>
<div style="margin:30px auto;max-width:350px;">
    
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 56px;">
        <ul class="amazingslider-slides" style="display:none;">
            <li><img src="http://rdlm.free-h.net/V/BFBC2/scByc6KRK6I.jpg" alt="Les Ramollis De La Molette 2" />
                <video preload="none" src="http://www.youtube.com/embed/scByc6KRK6I"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/BFBC2/nk9qY37dizI.jpg" alt="cascade RdLm.mpg" />
                <video preload="none" src="http://www.youtube.com/embed/nk9qY37dizI"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/BFBC2/A2fFE3a5wGQ.jpg" alt="RdLm quad jump .mpg" />
                <video preload="none" src="http://www.youtube.com/embed/A2fFE3a5wGQ"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/BFBC2/iOJcAl4qWsk.jpg" alt="lapin oasis 2 sur 2" />
                <video preload="none" src="http://www.youtube.com/embed/iOJcAl4qWsk"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/BFBC2/BUQi5VJkxj0.jpg" alt="lapin oasis 1 sur 2" />
                <video preload="none" src="http://www.youtube.com/embed/BUQi5VJkxj0"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/BFBC2/67p6lmqnhao.jpg" alt="LAPIN1 2 sur2" />
                <video preload="none" src="http://www.youtube.com/embed/67p6lmqnhao"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/BFBC2/4SkkyNaUQVE.jpg" alt="LAPIN1 1sur2" />
                <video preload="none" src="http://www.youtube.com/embed/4SkkyNaUQVE"></video>
</li>
            <li><img src="http://rdlm.free-h.net/V/BFBC2/fqGP9NbE3Fk.jpg" alt="BBC2 - Un soir avec les Ramollis De La Molette" />
                <video preload="none" src="http://www.youtube.com/embed/fqGP9NbE3Fk"></video>
</li>
        </ul>
        <div class="amazingslider-engine" style="display:none;"><a href="http://amazingslider.com">jQuery Slideshow</a>
</div>
    </div>

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème de Widget (Slider)

Message par Self le Jeu 29 Mai 2014 - 2:07

Bonsoir,

C'est certainement parce que les deux ont le même id dans cette ligne :
Code:
<div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 56px;">

Petit précision, supposant que les deux codes sont sur la même page (comme pour l'id), il n'est pas nécessaire d'appeler deux fois les code javascript :
Code:
<script src="http://rdlm.free-h.net/V/BFBC2/amazingslider.js"></script>
<script src="http://rdlm.free-h.net/V/BFBC2/initslider-1.js"></script>

Et petite correction, il faut enlever la balise fermante head et la balise ouvrante body (dans les deux codes) :
Code:
</head>
<body>

et ajouter un balise fermante div à la fin du code (toujours dans les deux codes) :
Code:
</div>

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de Widget (Slider)

Message par soul.eater le Jeu 29 Mai 2014 - 15:56

Merci pour ton aide une nouvelle fois SeLfde.

J'ai modifier l'id d'un des div, il a fallu que je modifie un script qui comporte l'id (http://rdlm.free-h.net/V/BFBC2/initslider-1.js).

Tout fonctionne désormais, je propose les deux codes fonctionnels ici, il suffit de modifier les liens youtube et les images (je doute que quelqu'un remarque mon message mais bon sait-on jamais :

Code:
<script src="sliderengine/jquery.js"></script> <script src="http://rdlm.free-h.net/V/BFBC2/amazingslider.js"></script> <script src="http://rdlm.free-h.net/V/BFBC2/initslider-1.js"></script>
<!--  End of head section HTML codes  -->
<div style="margin:30px auto;max-width:350px;">
 
<!--  Insert to your webpage where you want to display the slider  -->
<div style="display:block;position:relative;margin:16px auto 56px;" id="amazingslider-1">
 
<ul style="display:none;" class="amazingslider-slides">
 
<li>
 <img alt="Les Ramollis De La Molette 2" src="http://rdlm.free-h.net/V/BFBC2/scByc6KRK6I.jpg" /> <video src="http://www.youtube.com/embed/scByc6KRK6I" preload="none"></video>
 </li>
 
<li>
 <img alt="cascade RdLm.mpg" src="http://rdlm.free-h.net/V/BFBC2/nk9qY37dizI.jpg" /> <video src="http://www.youtube.com/embed/nk9qY37dizI" preload="none"></video>
 </li>
 
<li>
 <img alt="RdLm quad jump .mpg" src="http://rdlm.free-h.net/V/BFBC2/A2fFE3a5wGQ.jpg" /> <video src="http://www.youtube.com/embed/A2fFE3a5wGQ" preload="none"></video>
 </li>
 
<li>
 <img alt="lapin oasis 2 sur 2" src="http://rdlm.free-h.net/V/BFBC2/iOJcAl4qWsk.jpg" /> <video src="http://www.youtube.com/embed/iOJcAl4qWsk" preload="none"></video>
 </li>
 
<li>
 <img alt="lapin oasis 1 sur 2" src="http://rdlm.free-h.net/V/BFBC2/BUQi5VJkxj0.jpg" /> <video src="http://www.youtube.com/embed/BUQi5VJkxj0" preload="none"></video>
 </li>
 
<li>
 <img alt="LAPIN1 2 sur2" src="http://rdlm.free-h.net/V/BFBC2/67p6lmqnhao.jpg" /> <video src="http://www.youtube.com/embed/67p6lmqnhao" preload="none"></video>
 </li>
 
<li>
 <img alt="LAPIN1 1sur2" src="http://rdlm.free-h.net/V/BFBC2/4SkkyNaUQVE.jpg" /> <video src="http://www.youtube.com/embed/4SkkyNaUQVE" preload="none"></video>
 </li>
 
<li>
 <img alt="BBC2 - Un soir avec les Ramollis De La Molette" src="http://rdlm.free-h.net/V/BFBC2/fqGP9NbE3Fk.jpg" /> <video src="http://www.youtube.com/embed/fqGP9NbE3Fk" preload="none"></video>
 </li>
 
</ul>
 
<div style="display:none;" class="amazingslider-engine">
 <a href="http://amazingslider.com">JavaScript Image Slider</a>
 </div>
 
</div>
 
<!--  End of body section HTML codes  -->
</div>

Code:
<script src="http://rdlm.free-h.net/V/Sareth/initslider-2.js"></script>
<div style="margin:30px auto;max-width:350px;">
 
<!--  Insert to your webpage where you want to display the slider  -->
<div style="display:block;position:relative;margin:16px auto 56px;" id="amazingslider-2">
 
<ul style="display:none;" class="amazingslider-slides">
 
<li>
 <img alt="Violent ce jeu ?!?! Pas du tout ! - Hotline Miami Gameplay" src="http://rdlm.free-h.net/V/Sareth/srtB_Klgzvc.jpg" /> <video src="http://www.youtube.com/embed/srtB_Klgzvc" preload="none"></video>
 </li>
 
<li>
 <img alt="Soyez maître de l'esprit plutôt que maîtrisé par l'esprit - Shadow Warrior Gameplay" src="http://rdlm.free-h.net/V/Sareth/QPLgW-_aySs.jpg" /> <video src="http://www.youtube.com/embed/QPLgW-_aySs" preload="none"></video>
 </li>
 
<li>
 <img alt="Tout est bruit pour qui a peur - Outlast Gameplay - Episode 2" src="http://rdlm.free-h.net/V/Sareth/tX_dFYJyLRY.jpg" /> <video src="http://www.youtube.com/embed/tX_dFYJyLRY" preload="none"></video>
 </li>
 
<li>
 <img alt="BOUH ! Ça fait peur ! - Outlast Gameplay" src="http://rdlm.free-h.net/V/Sareth/3uPShA_CLPY.jpg" /> <video src="http://www.youtube.com/embed/3uPShA_CLPY" preload="none"></video>
 </li>
 
</ul>
 
<div style="display:none;" class="amazingslider-engine">
 <a href="http://amazingslider.com">jQuery Slideshow</a>
 </div>
 
</div>
 
</div>

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum