IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

besoin d'aide en javascript


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2014
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2014
    Messages : 4
    Points : 1
    Points
    1
    Par défaut besoin d'aide en javascript
    Bonjour,

    J'ai un site en html et j'aimerai faire défiler des images sur un simple click et je pense que le javascript est vraiment adapté mais le probleme c'est que je n'y connais rien. Pourriez vous m'aider pour programmer une base et j'arriverai a me débrouiller a partir de là.

    L'idée c'est que j'ai plusieurs petites vignettes qui affiche une image en plus grand lorsque je click dessus. Mon probleme c'est que j'ai plus de 20 vignettes et j'aimerai en afficher que 9 sur ma pages. Donc l'idée serait de faire défiler les vignettes en cliquant sur les fleches ">" "<".

    Pourriez vous m'aider en me programmant une base en javascript qui serait affiché comme ceci sur l'écran:

    < 1 2 3 4 5 6 7 8 9 >

    Lorsque je clique sur > les variables serait déplacé vers la droite et le dernier chiffre passerait au début. ce qui donnerait ceci :

    < 9 1 2 3 4 5 6 7 8 >

    Idem pour < mais dans l'autre sens

    Est ce possible et si oui, peut on afficher cette ligne sans que la page se recharge a chaque fois ?

    Merci d'avance pour votre aide,
    Bon dimanche,
    Patrice.

  2. #2
    Futur Membre du Club
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 6
    Points : 8
    Points
    8
    Par défaut
    Salut

    regarde de ce coter la il y a plein de module sur le net disponible est très bien construit. Il te reste juste à modifier juste 1 valeur pour mettre le nombre d'image affiché

    http://flexslider.woothemes.com/basic-carousel.html

    ou

    kenwheeler.github.io/slick/

    ou encore:

    http://www.tripwiremagazine.com/2013...-carousel.html

    @+

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2014
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2014
    Messages : 4
    Points : 1
    Points
    1
    Par défaut
    Bonjour et merci
    Disons que le petit programme que j'aimerai réalisé (voir au dessus) c'est exactement ce qu'il me faut comme base de travaille.
    C'est surement trop compliquer a réaliser en javascript, je vais voir ce que je peux faire

    Bonne semaine,
    Patrice.

  4. #4
    Futur Membre du Club
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 6
    Points : 8
    Points
    8
    Par défaut
    Si tu préfère le créer par toi même voici un petit tuto qui te permettra de crée un pagination (ici utilisé pour afficher des commentaires) il suffit de l'adapter pour afficher des images à la place, le principe reste le même.
    bon courage.

    http://antoine-herault.developpez.co...atique-en-php/

  5. #5
    Membre à l'essai
    Femme Profil pro
    Autre
    Inscrit en
    Août 2014
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Août 2014
    Messages : 16
    Points : 18
    Points
    18
    Par défaut
    Bonsoir Bulletfigurine,


    Je suis débutante ou néophyte + selon comment on veut.

    J'ai eu l'occasion pendant mes cours à me frotter à du site web et de par mes recherches découvrir des outils vraiment complet et innovant.

    L'un d'eux pourrait t'intéresser je l'espère, c'est Primefaces et plus particulièrement cette page Galleria.

    J'espère que tu trouveras ton bonheur avec cette modeste contribution.

    Bonne soirée à toi et courage.

    Flo, Neogeekette 24h sur 24h

  6. #6
    Membre à l'essai
    Femme Profil pro
    Autre
    Inscrit en
    Août 2014
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Août 2014
    Messages : 16
    Points : 18
    Points
    18
    Par défaut
    Oups oublie mon message ci dessus, je suis hors sujet.

    Tu cherches du JavaScript, le site que je t'ai donné c'est pour du Java.

    J'ai fais ma blonde encore, désolée .

    Flo, Neogeekette et blonde à la fois, pff .

  7. #7
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Ceci dit il y a aussi un galleria qui lui est bel et bien du JavaScript et s'avère une excellente gallerie d'image : http://galleria.io/themes/
    One Web to rule them all

  8. #8
    Membre averti Avatar de SPACHFR
    Profil pro
    Paaaaaa
    Inscrit en
    Février 2004
    Messages
    557
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Paaaaaa

    Informations forums :
    Inscription : Février 2004
    Messages : 557
    Points : 400
    Points
    400
    Par défaut
    Il y a quelques années j'avais fait ce truc comme exercice perso. (voir ci-dessous)
    C'est le défilement (vertical) sans fin d'images. La direction du défilement (vers le haut ou le bas) et fonction de la position de la souris lorsque que l'on passe sur les images.
    Un clics sur l'une des images l'affiche au milieu de la page. Ce n'est pas parfais ça ne demande qu'a être retravaillé, modifié et amélioré voir corrigé .

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test images defilantes </title>
    <style type="text/css">
    .cexpand{display:block;width:100px;height:100px;background-color:#D1D8D8;}
    #newsbox { width: 110px; height: 300px; border: 1px solid #000000; position: relative; overflow: hidden;background-color:#000000;}
    #newslist { position: absolute;padding: 0 5px 0; }
    </style>
    <script language="javascript" type="text/javascript">
    var pos;
    var MNU_WAY = 0;																				//direction du menu: 0 on bouge pas  1 on descend  -1 on monte
    var MNU_SPEED = 2;																				// vitesse de defilement
    var TIMER;
    var SPEED=10;
     
    	function getElements(tag,attr,reg){
    			var tabReg=new Array();
    			var tabElts=document.body.getElementsByTagName(tag);
    			if(!(reg instanceof RegExp)){
    			   if(reg.indexOf("*")>-1){
    				  	reg=reg.replace(/\*/g,'.+');
    					reg=new RegExp(reg);
    				}else { return	tabReg; }	
    			}
     
    			i=0;
    			while(tabElts[i]){
    				if(tabElts[i][attr]){
    			         if(reg.test(tabElts[i][attr])){
    			         tabReg.push(tabElts[i]);}
    			         }
    			         reg.test("");
    			i++;         
    			}
    			return tabReg;
    		}
    //On ajoute l event en fonction du Browser (IE ou FF)
    function addEvent(Obj,evt,fonction){
     if(Obj.addEventListener){
    	Obj.addEventListener(evt,fonction,false);
     }else if(Obj.attachEvent) {
       Obj.attachEvent('on'+evt,fonction);
     }
    }
    // modif de la taille du div contenant l image
    function expandBox(){
    var t= document.getElementById("IdmBox");
    var img = document.getElementById("Idimg");
     if(t) {
    	if(parseInt(t.style.width)>400){clearInterval(TIMER);return false;}
        var step = 5;
        var cwidth = parseInt(t.style.width);
    	var cheight = parseInt(t.style.height);
    	if(cheight<=0){cheight=1;}
    	if(cwidth<=0){cwidth=1;}
    	var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
    	var pheight = parseInt((screen.availHeight/3)-(cheight/2));
    	t.style.left = pwidth+'px';
    	t.style.top = pheight+'px';
    	t.style.width = cwidth+step+'px';
    	t.style.height = cheight+step+'px';
    	t.style.border="solid";
    	t.style.borderWidth="5px";
    	t.style.borderColor="#000000";
    	t.style.backgroundColor="#FFFFFF";
    	img.style.width= cwidth+step+'px';
    	img.style.height = cheight+step+'px';
       } 
    }
    //creation du div centre contenant l image agrandie
    function callBox(){														// creation du Box image
    	var img = this.src.substring(this.src.lastIndexOf('/'));			// recup du nom de l image
    	var imgSrc = './img/'+img;												// a adapter suivant le rep de stockage
    	if(document.getElementById("IdmBox")){								// test si la box d affichage existe deja
    		if(TIMER){clearInterval(TIMER);}								//arret du timer
    		document.body.removeChild(document.getElementById("IdmBox"));	// suppression de la box
    	}
    	var mBox = document.createElement('div');							//creation du div de la box
    	mBox.id = "IdmBox";													// id de la box
        var cwidth = this.style.width;									
    	var cheight = this.style.height;
    	if(cheight<=0){cheight=1;}
    	if(cwidth<=0){cwidth=1;}
    	var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
    	var pheight = parseInt((screen.availHeight/3)-(cheight/2));
    	mBox.style.position="absolute";
    	mBox.style.left = pwidth+'px';
    	mBox.style.top = pheight+'px';
    	mBox.style.width = cwidth+'px';
    	mBox.style.height = cheight+'px';
    	mBox.style.border="solid";
    	mBox.style.borderWidth="5px";
    	mBox.style.borderColor="#000000";
     
    	var imgBox = document.createElement('img');						//creation element image
    	imgBox.id = "Idimg";
    	imgBox.src = imgSrc;
    	imgBox.style.width= cwidth+"px";
    	imgBox.style.height = cheight+"px";
    	addEvent(mBox,'click',closeBox);
     
    	mBox.appendChild(imgBox);										//ajout de element image a la Box
    	document.body.appendChild(mBox);								//ajout del la box dans la page
    	TIMER=setInterval("expandBox()", SPEED);						//appel de la fonction expand
    }
    function closeBox(){
     TIMER=setInterval("reduceBox()", SPEED);
    }
    function reduceBox(){
    var t= document.getElementById("IdmBox");
    var img = document.getElementById("Idimg");
     if(t) {
        var step = 10;
        var cwidth = parseInt(t.style.width);
    	var cheight = parseInt(t.style.height);
    	if(cheight<=10 || cwidth<=10){
    		clearInterval(TIMER);
    		document.body.removeChild(document.getElementById("IdmBox"));
    		return false;
    	}
    	if(cwidth<=0){cwidth=1;}
    	var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
    	var pheight = parseInt((screen.availHeight/3)-(cheight/2));
    	t.style.left = pwidth+'px';
    	t.style.top = pheight+'px';
    	t.style.width = cwidth-step+'px';
    	t.style.height = cheight-step+'px';
    	t.style.border="solid";
    	t.style.borderWidth="5px";
    	t.style.borderColor="#000000";
    	img.style.width= cwidth+step+'px';
    	img.style.height = cheight+step+'px';
       }
    }
     
    function startAnim() {
    	var t = document.getElementById('newslist');												//get du div newslist
    	var InitialListHeight = t.clientHeight;														// height de la zone images avant modif
    	var zoneHeight = document.getElementById('newsbox').clientHeight;							// hauteur de la zone d affichage de la liste d images
    	pos = t.offsetTop;;																			// position courante = position initiale
    	var tabImg = getElements('img','className',/cexpand/);										// recup des images de class cexpand  dans un tableau
    	if(tabImg.length==0){ return false;} else {var NbImg = tabImg.length;}						// si pas d image trouvee on arret tout
    	var ImgHeight = tabImg[0].height;															// on recupere la valeur height de l image (utile pour le calcul du rool-over)													
    	var ImgView = zoneHeight/ImgHeight;															//nombre d images visibles simultanément. (zone d affichage)
    	for(var a=NbImg-ImgView;a<=NbImg-1;a++){													// parcour du tableau d images depuis la fin111
    	   t.insertBefore(tabImg[a].cloneNode(true),tabImg[0]);
    	}
    	pos  = Math.floor(pos-(ImgHeight*ImgView));													//calcul de la nouvelle position de la liste pour afficher la premiere image user
    	t.style.top = pos + 'px';																	//repositionnement de la liste à sa position initial
    	tabImg = getElements('img','className',/cexpand/);											
    	for(a=0;a<tabImg.length-1;a++){addEvent(tabImg[a],'click',callBox);}
    	tabImg = undefined;																			//suppression du tableau (ne sert plus a rien)
    	setInterval(function(){anim(ImgHeight, zoneHeight,InitialListHeight);}, MNU_SPEED);			// appel de la fonction d animation a interval regulier (MUN_SPEED)						
    }
    function anim(ImgHeight, zoneHeight, InitialListHeight) {										//fonction du defilement PARM: @position debut,@hauteur 1 image,@taille de la zone d affichage							
    	var e = document.getElementById('newslist');
    	pos = pos - MNU_WAY;	
    	if(pos===0){ pos = pos -InitialListHeight+1; }												//tete de liste des images.
    	if(pos===-InitialListHeight){ pos = pos +InitialListHeight; }
    	e.style.top = Math.floor(pos) + 'px';
    }
    window.onload = function() {																	//attribution des evenements sourie
      var e = document.getElementById('newsbox');													// recup du div newsbox
      e.onmouseover = function(event) {																//event mouseover
    		if(window.event){m=window.event;}else{m=event;}											//gestion event en fonction du browser
    		if(m.clientY >e.offsetHeight/2){MNU_WAY = 1;}else{ MNU_WAY = -1;}       				// direction de defilement
    		};
      e.onmouseout = e.onclick = function() { MNU_WAY = 0;};										//arret du defilement sur click ou sourie hors du div
      setTimeout(function(){startAnim();},500); 													//pour atendre le chargement des tag img de la page
      };
    </script>
    </head>
     
    <body style="background-color:#002D47;">
    <div id='newsbox'>
      <div id='newslist' >
    		<img src="./img/04.jpg"  class="cexpand"/>
    		<img src="./img/66.gif"  class="cexpand"/>
    		<img src="./img/geekscottes_121.png"  class="cexpand"/>
    		<img src="./img/05.jpg"  class="cexpand"/>
    		<img src="./img/A06.jpg"  class="cexpand"/>
    		<img src="./img/A07.jpg"  class="cexpand"/>
    		<img src="./img/A08.jpg"  class="cexpand"/>
      </div>
    </div>
    </body>
    </html>
    S'il n'y a pas de solution c'est qu'il n'y a pas de problème.

Discussions similaires

  1. Réponses: 2
    Dernier message: 20/03/2015, 18h33
  2. Besoin d'aide en Javascript
    Par bulletfigurine dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 17/08/2014, 14h48
  3. besoin d'aide en javascript
    Par vivibrindacier dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 11/04/2007, 16h03
  4. Besoin d'aide pour mon rpg en javascript
    Par CyberTwister dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 07/04/2006, 14h26
  5. Changer le style en JavaScript [besoin d'aide]
    Par maximenet dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 13/09/2005, 18h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo