Codes pour un tableau

4 participants

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

Résolu Codes pour un tableau

Message par mewtwo Dim 15 Jan 2012 - 8:03

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 =)


Dernière édition par mewtwo le Mar 24 Jan 2012 - 22:47, édité 1 fois
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par kheino Dim 15 Jan 2012 - 13:01

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.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par Invité Dim 15 Jan 2012 - 14:20

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.
Anonymous

Invité
Invité


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

Résolu Re: Codes pour un tableau

Message par mewtwo Dim 15 Jan 2012 - 20:09

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''
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par kheino Dim 15 Jan 2012 - 20:22

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".
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo Lun 16 Jan 2012 - 7:53

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.
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par Gorgorbey Lun 16 Jan 2012 - 8:02

Bonjour,

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

Cordialement.
Gorgorbey

Gorgorbey
Membre actif

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo Mar 17 Jan 2012 - 2:17

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 )
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par Psyaliah Mar 17 Jan 2012 - 6:01

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

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo Mer 18 Jan 2012 - 1:10

mewtwo a écrit:
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

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo Mer 18 Jan 2012 - 22:51

Gorgorbey a écrit: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

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo Jeu 19 Jan 2012 - 22:10

up
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo Dim 22 Jan 2012 - 20:19

up
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo Mar 24 Jan 2012 - 22:46

a lock
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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