Codes pour un tableau

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

Résolu Codes pour un tableau

Message par mewtwo le 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://i48.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
****

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

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

Résolu Re: Codes pour un tableau

Message par Final-Blonde le 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.

Final-Blonde
# Tropactif #

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

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

Résolu Re: Codes pour un tableau

Message par Invité le 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.

Invité
Invité


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

Résolu Re: Codes pour un tableau

Message par mewtwo le 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
****

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

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

Résolu Re: Codes pour un tableau

Message par Final-Blonde le 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".

Final-Blonde
# Tropactif #

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

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

Résolu Re: Codes pour un tableau

Message par mewtwo le 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
****

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

http://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 le 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
+ Hyperactif +

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 le 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
****

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

http://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 le 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
# Tropactif #

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

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codes pour un tableau

Message par mewtwo le 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
****

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

http://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 le 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
****

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

http://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 le Jeu 19 Jan 2012 - 22:10

up

mewtwo
****

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

http://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 le Dim 22 Jan 2012 - 20:19

up

mewtwo
****

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

http://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 le Mar 24 Jan 2012 - 22:46

a lock

mewtwo
****

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

http://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


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