Problème : deux codages ''slideshow'' qui se gênent mutellement

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

Problème : deux codages ''slideshow'' qui se gênent mutellement

Message par DC Earth le Jeu 18 Aoû 2016 - 19:12

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://dc-earthtest.fra.co/

Description du problème

Bonjour.

Je tiens tout d'abord à remercier chaleureusement ceux qui se pencherons sur mon problème Smile

Puis ensuite à signaler que ne je suis pas capable de créer du codage.
Les codages que je vous présente ainsi et qui me pose soucis sont donc issus de recherches Internet et d'obtentions auprès d'un autre forum (les références suivent).
Des codages que j'ai bidouillés ensuite autant que j'ai pu.

--------------------------

Voilà mon problème :

Chaque codage séparément fonctionnent très bien.
- Il y a des images défilantes, un ''Wanted''.
- Il y a des news défilantes, un ''News''.

Mais les codages activés ensemble bugs et se gênent donc mutuellement.
Je pense qu'il s'agit du fait qu'ils utilisent les même termes du genre #slidesContainer ; #slideshow ... dans le CSS et dans le Javascript.

J'ai essayé de changer ces termes pour l'un, afin qu'il n'y ait plus de doublons entre les deux, mais ça ne marche pas.

Est-ce qu'un habitué du codage pourrait corriger ce problème ?
Je lui en serait éternellement reconnaissant Smile Merci.

--------------------------

Voilà les codages en questions :

Wanted
(code issu de http://gotham-city.actifforum.com/, créateur Battypa)
Voir le codage en action (il est activé sur la PA) : http://dc-earthtest.fra.co/ (section Prenez un personnage...)

HTML
Code:
<div class="battypa_contenent"><div class="battypa_blocleft"><div class="battypa_slidshow"><div class="slideshow" id="slideshow"><div id="slideshow-container"><div class="slide"><span><br /><span style="color: #6600FF;">Deathstroke</span></span><br /><br /><div class="battypa_descslidshow"><span><em><span style="font-size: 14px; line-height: normal">Mercenaire n°1 dans le monde. Stratège et combattant d'exception.<br /><br /><br />Jouable dans la faction <span style="color: #6600FF;">The Network</span><br /></span></em></span></div><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><img src="http://img15.hostingpics.net/pics/161705Deathstroke1.png" /></a>
</div><div class="slide"><span><br /><span style="color: #006600;">Martian Manhunter</span></span><br /><br /><div class="battypa_descslidshow"><span><em><span style="font-size: 14px; line-height: normal">Dernier descendant de Mars, coordinateur de la Justice League.<br /><br /><br />Jouable dans la faction <span style="color: #006600;">Justice League</span></span></em></span><a href="http://dc-earth.fra.co/t3841-bloodlines"></a></div><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><img src="http://img15.hostingpics.net/pics/732741manhunter.png" /></a></div><div class="slide"><span><br /><span style="color: #FFFF00;">Loïs Lane</span></span><br /><br /><div class="battypa_descslidshow"><span><em><span style="font-size: 14px; line-height: normal">Journaliste intrépide du Daily Planet que rien ne fait reculer.</span></em></span></div><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><img src="http://img11.hostingpics.net/pics/661562Lois.png" /></a></div></div></div></div></div></div>

CSS
Code:
/*Battypa slidshow*/

.battypa_contenent {
width: 180px;
overflow: hidden;
padding-top:5px;
margin-left:auto;
margin-right:auto;
}

.battypa_blocleft {
width: 180px;
float: left;
}

.battypa_slidshow{
width:175px;
height:250px;
display:inline-block;
transition:0.5s;
  font-family: bookman old style;
font-size:10px;
 text-align:center;
 transition: 0.5s;
}

.battypa_descslidshow{
 font-family: bookman old style;
 font-size:15px;
 color:white;
 text-align:center;
 transition: 0.5s;
 }
 
.battypa_slidshow img{
 position: absolute;
 left: 0;
 top: 0;
 transition:0.5;
 }

.battypa_slidshow:hover img{
opacity: 0.2;
}
.slideshow,
.slide {
  width:175px;
height:250px;
  font-family: bookman old style;
font-size:10px;
}

.slideshow {
  overflow: hidden;
  font-family: bookman old style;
font-size:10px;
}

.slideshow div{
  position: relative;
  top: 0;
  left: 0;
  font-family: bookman old style;
      font-weight: bold;
font-size:20px;
}
 
.slide {
  margin-top: 0;
  display: inline-block;
  vertical-align: middle;
  font-family: bookman old style;
font-size:10px;
 top: 0;
  left: 0;
  text-shadow: 1px 1px 2px black;
 
}
.verticalalign {
    display: table-cell;
  vertical-align: middle;
 }

Java
Code:
$(function () {
  //VARIABLES MODIFIABLES
  var delaiSwitch    = 5500;                    // Délai (en ms) d'affichage d'un slide
  var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
  var direction      = 'left';                  // Sens (left ou right) du défilement
  var idSlideshow    = '#slideshow';            // ID du slideshow
  var idContainer    = '#slideshow-container';  // ID du container
 
  //VARIABLES SYSTEME
  var slideshowWidth  = parseInt($(idSlideshow).css('width'));
  var slideshowHeight  = parseInt($(idSlideshow).css('height'));
  var nbSlides        = $(idContainer+' > .slide').length;
 
  //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
  $(idContainer).css('width', slideshowWidth*nbSlides+'px');

     
  //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
  if(direction==='right') {
      var decalageLeft = -slideshowWidth*(nbSlides-1);
      $(idContainer).css('left', decalageLeft+'px');
     
      $(idContainer+' > .slide').each(function() {
          var el = $(this).remove();
          $(idContainer).prepend(el);
      }, this);
  } else {
      $(idContainer+' > .slide').each(function() {
          var el = $(this).remove();
          $(idContainer).append(el);
      }, this);
  }
 
  //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
  $(idSlideshow+' img').css('max-width', slideshowWidth);
  $(idSlideshow+' img').css('max-height', slideshowHeight);
 
  //LANCEMENT DE L'ANIMATION
  setInterval(function() {
      slideshow()
  }, delaiSwitch);
 
  //FONCTION DE DEFILEMENT
  function slideshow() {
      var compteur = 0;      // Compte les slides ayant bougé
     
      if(direction==='right') {
          $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
              compteur++;
             
              // Lorsque le dernier slide à bougé, on crée la boucle
              if(compteur===nbSlides) {
                  var el = $(idContainer+' > .slide:last').remove();
                  $(idContainer).prepend(el);
                  $(idContainer+' > .slide').css('left', '0');
                 
                  compteur = 0;
              }
          });
      } else {
          $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
              compteur++;
             
              // Lorsque le dernier slide à bougé, on crée la boucle
              if(compteur===nbSlides) {
                  var el = $(idContainer+' > .slide:first').remove();
                  $(idContainer).append(el);

                  $(idContainer+' > .slide').css('left', '0');
                 
                  compteur = 0;
              }
          });
      }       
  }
})


News
(code issu de ce sujet http://forum.forumactif.com/t337739-slideshow-jquery?highlight=slideshow, créé par Snoupix)
Voir ce codage en action (il n'est pas activé, c'est à dire que le CSS n'est pas mis et que la page Java n'est pas active, sinon l'un ou l'autre fera buggé le codage ''Wanted'') : http://dc-earthtest.fra.co/t24-wanted-de-personnages#30

HTML
Code:
<!-- Slideshow HTML --><div id="slideshow"><div id="slidesContainer"><div class="slide"><div align="center"><a rel="nofollow" target="_blank" href="https://www.facebook.com/pages/DC-Earth-RPG/284294981731541"><img style="width:400px;height:125px;" src="http://i35.servimg.com/u/f35/19/50/24/58/bl10.jpg" /></a></br><table><tbody><tr><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Présentation de l'Event</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Les personnages issus de Bloodlines</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Donnez votre avis sur l'Event</strong></span></a></div></td></tr></tbody></table></div></div><div class="slide"><div align="center"><a rel="nofollow" target="_blank" href="https://www.facebook.com/pages/DC-Earth-RPG/284294981731541"><img style="width:400px;height:125px;" src="http://i35.servimg.com/u/f35/19/50/24/58/bl10.jpg" /></a></br><table><tbody><tr><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Présentation de l'Event</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Les personnages issus de Bloodlines</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Donnez votre avis sur l'Event</strong></span></a></div></td></tr></tbody></table></div></div><div class="slide"><div align="center"><a rel="nofollow" target="_blank" href="https://www.facebook.com/pages/DC-Earth-RPG/284294981731541"><img style="width:400px;height:125px;" src="http://i35.servimg.com/u/f35/19/50/24/58/bl10.jpg" /></a></br><table><tbody><tr><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Présentation de l'Event</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Les personnages issus de Bloodlines</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Donnez votre avis sur l'Event</strong></span></a></div></td></tr></tbody></table></div></div><div class="slide"><div align="center"><a rel="nofollow" target="_blank" href="https://www.facebook.com/pages/DC-Earth-RPG/284294981731541"><img style="width:400px;height:125px;" src="http://i35.servimg.com/u/f35/19/50/24/58/bl10.jpg" /></a></br><table><tbody><tr><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Présentation de l'Event</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Les personnages issus de Bloodlines</strong></span></a></div></td><td><div align="center"><a rel="nofollow" target="_blank" href="http://dc-earth.fra.co/t3841-bloodlines"><span style="font-size: 11px;"><strong>Donnez votre avis sur l'Event</strong></span></a></div></td></tr></tbody></table></div></div></div></div><!-- Slideshow HTML -->

CSS
Code:
/*News défilant Slid*/

    #slideshow {
      margin:0 auto;
      width:400px;
      height:175px;
      background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
      position:relative;
    }
    #slideshow #slidesContainer {
      margin:0 auto;
      width:400px;
      height:175px;
      position:relative;
    }
    #slideshow #slidesContainer .slide {
      margin:0 auto;
      width:400px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
      height:175px;
    }
#navDiapo{
  display:block;
  width:20px;
  height:20px;
  position:absolute;
  right:25px;
  bottom:10px;
  cursor:pointer;
}
    .control {
      display:block;
      width:39px;
      height:100px;
      text-indent:-20000px;
      position:absolute;
      cursor: pointer;
    }
#leftControl {
  position:absolute;
  left:2px;
  bottom:35px;
  background:transparent url(http://www.kozak.com/images/arrow_left.png) no-repeat 0 0;
      z-index: 3
}
    #rightControl {
  position:absolute;
  left:373px;
  bottom:35px;
      background:transparent url(http://www.kozak.com/images/arrow_right.png) no-repeat 0 0;
    }

Java
Code:
$(document).ready(function(){
      //Configuration
            var retour = true;
            var tempsTransition = 1000;
            var affichePlayPause = true;
            var lectureAutomatique = false;
              var tempsAttente = 6000;
           
            var icones = new Array();
                  icones['play'] = 'img/play_slider.png';
                  icones['pause'] = 'img/pause_slider.png'; 
           
            var currentPosition = 0;
            var slideWidth = 400;
            var slides = $('.slide');
            var numberOfSlides = slides.length;
            var interval;
            var lectureEnCours = false;
      // Supprime la scrollbar en JS
$('#slidesContainer').css('overflow', 'hidden');
   
      // Attribue  #slideInner  à toutes les div .slide
      slides
        .wrapAll('<div id="slideInner"></div>')
        // Float left to display horizontally, readjust .slides width
      .css({
          'float' : 'left',
          'width' : slideWidth
        });
   
      // Longueur de #slideInner égale au total de la longueur de tous les slides
      $('#slideInner').css('width', slideWidth * numberOfSlides);
   
      // Insert controls in the DOM
      $('#slideshow')
        .prepend('<span class="control" id="leftControl">Précédent</span>')
        .append('<span class="control" id="rightControl">Suivant</span>');
   
   
     
      // Hide left arrow control on first load
      manageControls(currentPosition);
   
      //Crée un écouteur d'évènement de type clic sur les classes .control
      $('.control')
        .bind('click', function(){
         
        // Determine la nouvelle position
      currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
       
      if(currentPosition == numberOfSlides && retour == false ){
          currentPosition--;
          pause();
      }
     
      // Cache ou montre les controles
        manageControls(currentPosition);
        // Fais bouger le slide
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        },tempsTransition);
      });
   
      // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
      function manageControls(position){
        // Cache la fleche "précédent" si on est sur le premier slide
      if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
      // Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
        if(position==numberOfSlides-1 && retour == false){
          $('#rightControl').hide();
      } else {
          $('#rightControl').show();
      }
      if(position == numberOfSlides && retour == true){
          currentPosition = 0;
          $('#leftControl').hide();
      }
      }
      function suivant(){
      $('#rightControl').click();
      }
      function start() {
        lectureEnCours = true;
        interval = setInterval(suivant, tempsAttente );
      }
      function pause() {
        lectureEnCours = false;
      clearInterval(interval);
      }

    //Si le diapo est activé
    if(lectureAutomatique == true){
      start();
    }
    if(affichePlayPause == true){
      $('#slidesContainer').prepend('<img id="navDiapo" src="http://capp-asia.com/images/play.png" alt="" />');
      if(lectureAutomatique == true){
          $('#navDiapo').attr('src',icones['pause']);
      }else{
          $('#navDiapo').attr('src',icones['play']); 
      }
      $('#navDiapo').bind('click', function(){
          if(lectureEnCours == true){
            $(this).attr('src',icones['play']);
            pause();
          }else{
            $(this).attr('src',icones['pause']);
            start();
          }
     
      });
    }
   
   
       
    });

Encore merci ! Smile

DC Earth
Nouveau membre

Messages : 11
Inscrit(e) le : 19/07/2015

http://dc-earth.fra.co/
DC Earth a été remercié(e) par l'auteur de ce sujet.

Re: Problème : deux codages ''slideshow'' qui se gênent mutellement

Message par DC Earth le Sam 20 Aoû 2016 - 8:59

Up ! Smile

DC Earth
Nouveau membre

Messages : 11
Inscrit(e) le : 19/07/2015

http://dc-earth.fra.co/
DC Earth a été remercié(e) par l'auteur de ce sujet.

Re: Problème : deux codages ''slideshow'' qui se gênent mutellement

Message par DC Earth le Ven 26 Aoû 2016 - 13:25

Up ! (:

DC Earth
Nouveau membre

Messages : 11
Inscrit(e) le : 19/07/2015

http://dc-earth.fra.co/
DC Earth a été remercié(e) par l'auteur de ce sujet.

Re: Problème : deux codages ''slideshow'' qui se gênent mutellement

Message par DC Earth le Mer 31 Aoû 2016 - 15:08

Up ! Smile

DC Earth
Nouveau membre

Messages : 11
Inscrit(e) le : 19/07/2015

http://dc-earth.fra.co/
DC Earth a été remercié(e) par l'auteur de ce sujet.

Re: Problème : deux codages ''slideshow'' qui se gênent mutellement

Message par DC Earth le Mar 6 Sep 2016 - 15:27

Up Smile

DC Earth
Nouveau membre

Messages : 11
Inscrit(e) le : 19/07/2015

http://dc-earth.fra.co/
DC Earth a été remercié(e) par l'auteur de ce sujet.

Re: Problème : deux codages ''slideshow'' qui se gênent mutellement

Message par DC Earth le Ven 9 Sep 2016 - 11:30

Up Smile

DC Earth
Nouveau membre

Messages : 11
Inscrit(e) le : 19/07/2015

http://dc-earth.fra.co/
DC Earth a été remercié(e) par l'auteur de ce sujet.

Re: Problème : deux codages ''slideshow'' qui se gênent mutellement

Message par Chacha le Sam 17 Sep 2016 - 10:35

Bonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49718
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha 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