Codes pour un tableau

[mewtwo]

Voila j'ai une question svp. ='(
Je voudrais un codage pour mettre un tableau avec des images qui changent comme celui ci https://i.servimg.com/u/f48/15/98/30/11/llllll10.jpg qui est sur ce forum http://www.eternia-fr.net/forum/index.php

Merci d'avance =)

[kheino]

Bonjour mewtwo,

C'est un slideshow (une galerie) en script jQuery dont tu peux trouver des exemples et leur tuto ici.
Le 4 ou le 18 devrait correspondre.

[Invité]

Bonjour,


Tout les codes que trouve Eternia-fr viens tous d'un site et parfois leur neige sur le site viens de ici donc que leur forum/site son créer avec des code php HTML reviens au même.


Si tu trouve pas fait une suggestion si tu le veux dans le PA.


Amicalement.

[mewtwo]

Bonjours,

Final-Blonde si je veux par exemple la 1, c’est bien ca http://codecanyon.net/item/aviaslider-jquery-slideshow/105090?ref=Kriesi le tuto?
Donc les tutos sont en anglais?


pokemon-mario-kirby tu m'as mp un jour pour un partenariat j'ai pas pu te répondre car tu as mis l'option ''ne pas recevoir de mp''

[kheino]

Ah oui, je n'avais pas fait attention.

Mais il existe des tas de sites qui proposent des tutos en français aussi.
Il te suffit de chercher dans Google (ton ami) en français "installer un slideshow" et tu choisis l'option "uniquement les pages en français".

[mewtwo]

Euh je trouve pas ce que je cherche. Un tuto ressemblant a la 1 et la 2.

en fait les images conduisent bien a des liens?
parce que en regardant ce [url=http://codecanyon.net/item/aviaslider-jquery-slideshow/105090?clickthrough_id=41645761&redirect_back=true&ref=Kriesi&ref=Kriesi]tuto[/urlj'ai l'impression qu'il ne montrent que le liens des images a remplacer et non les liens vers lesquels ils conduisent avec.

[Gorgorbey]

Bonjour,

Voici un site avec tutoriel pour vous aider : http://www.snoupix.com/slideshow-jquery-accessible_tutorial_28.html

Cordialement.

[mewtwo]

j'ai deja vu ce tuto et je n'y comprends rien. de toute facon ce n'est pas ce que je cherche. les images dans la demo ne défilent pas toutes seules

Quelqu'un sait-il faire ce genre de chose et pourrait-il me dire exactement quoi faire?
(je veux faire 2 tableaux. Un qui ressemble au 1 et 2 ici
Et un qui ressemble au 4 et 18 ici )

[Psyaliah]

Dans aucun des cas elles ne défileront toutes seules, à toi de chercher ou trouver un script pour ce faire.

[mewtwo]

Quelqu'un sait-il faire ce genre de chose et pourrait-il me dire exactement quoi faire?
(je veux faire 2 tableaux. Un qui ressemble au 1 et 2 ici
Et un qui ressemble au 4 et 18 ici )

up

[mewtwo]

Bonjour,

Voici un site avec tutoriel pour vous aider : http://www.snoupix.com/slideshow-jquery-accessible_tutorial_28.html

Cordialement.

j'ai suivit a la lettre ce tuto et voila ce que ca donne http://pokemonsilver.pro-forum.fr/forum

j'ai mit ceci dans la CSS

Code:

#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* affiche une scrollbar au cas ou */
  position:relative;
}

.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}
#navDiapo{
    display:block;
    width:20px;
    height:20px;
    position:absolute;
    right:25px;
    bottom:10px;
    cursor:pointer;
}

Dans la page accueil le HTML

Code:

<!-- Slideshow HTML --><div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
      <!-- Contenu pour le slide 1 --><a href="http://pokemonsilver.pro-forum.fr/forum?tid=c1d807135d740556aef2e6fee250a619" class="postlink"><img src="http://aviathemes.com/aviaslider/images/slides/1.jpg" border="0" alt="" /></a>
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 2 --><a href="http://codecanyon.net/item/aviaslider-jquery-slideshow/105090?ref=Kriesi" class="postlink" target="_blank" rel="nofollow"><img src="http://aviathemes.com/aviaslider/images/slides/4.jpg" border="0" alt="" /></a>
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 3 --><a href="http://pokemonsilver.pro-forum.fr/forum?tid=c1d807135d740556aef2e6fee250a619" class="postlink"><img src="http://aviathemes.com/aviaslider/images/slides/1.jpg" border="0" alt="" /></a>
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 4 --><a href="http://codecanyon.net/item/aviaslider-jquery-slideshow/105090?ref=Kriesi" class="postlink" target="_blank" rel="nofollow"><img src="http://aviathemes.com/aviaslider/images/slides/4.jpg" border="0" alt="" /></a>
    </div>
  </div>
</div>
<!-- Slideshow HTML -->

dans le Javascript

Code:

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
 
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
 
  slides
  .wrapAll('<div id="slideInner"></div>')
  // on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
 
  // La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert les flèches de gauche et de droite
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');
 
  // Cache la flèche de gauche au début
  manageControls(currentPosition);
 
  // crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
  $('.control')
    .bind('click', function(){
    // Determine une nouvelle position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;
 
      //Cache ou montre les flèches
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });
 
  // manageControls: Cache ou montre les flèches de contrôles en fonction de la position
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });

      //Config
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 interval;
var lectureEnCours = false;
function start() {
    lectureEnCours = true;
        interval = setInterval(suivant, tempsAttente );
}
 
function suivant(){
    $('#rightControl').click();
}
 
function pause() {
    lectureEnCours = false;
        clearInterval(interval);
}
//Si le diapo est activé
if(lectureAutomatique == true){
  start();
}
if(affichePlayPause == true){
    $('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
    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();
        }
    });
}
// 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();
  }
 }
//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);
  });

Ou est le problème alors? ._.

[mewtwo]

up

[mewtwo]

up

[mewtwo]

a lock