11540 sujets

JavaScript, DOM et API Web HTML5

Je me lance dans la conception d'une galerie d'image

Bonjour je suis entrain de faire une galerie à l'aide de différents codes récupéré à droite et à gauche que je combine ensemble. Je débute, donc je fais comme je peux Smiley lol .

Au final j'aimerai avoir une galerie de vignette, quand on clique sur la vignette, l'image apparait et quand on clique sur la croix de l'image, l'image se ferme (ça c'est ok).

Ensuite je veux une légende pour chaque image qui apparait avec un effet de glissement quand on survole avec la souris le bouton "info" (je suis entrain de bosser dessus) cet effet la marche mais des fois, la légende se bloque et je suis obligé de survoler à nouveau le bouton "info" pour qu'elle revienne à sa place, j'aurai besoin d'un peu d'aide pour ça. Il doit y avoir une erreur ou autre mais je ne vois pas quoi.

Après il faut que je trouve le moyen d'attribuer une légende à chaque image (pas encore réfléchi comment faire ). Je suis preneur de tuto...

Ensuite je veux rajouter les boutons images suivante et image précédente.(la dessus j'ai mon idée)

Une fois tout ça fini, j'aimerai que la galerie charge automatiquement les images dans le "div X" (ne pas être obliger de faire sa liste d'image à la main pratique pour la maintenance du site), mais il parait que ce n'est pas facile à faire, donc à voir.

Pour finir quand tout ça sera fait, rajouter un effet dynamique à l'apparition et la disparation des images. (ça c'est du gadget donc pas presser)

Certain vont me dire prend une lightbox ou autre, mais je dis non pour 3 raisons :
Je veux ma galerie adapté à mon site (puis si c'est moi qui l'ai faite je pourrais la modifier et la faire évoluer à souhait).
Le poids des galeries jquery ou autre.(trop lourd à télécharger)
Puis une galerie toute faite c'est pratique mais ça ne fait pas avancé en programmation.

Le code du début de gallerie :
Le .js

	function affiche_img(nom_image,largeur,hauteur)
  	{
    	var chemin = "./galerie/"+nom_image;
    	largeur = largeur+0;
    	hauteur = hauteur+0;
    	document.getElementById("bt_aff_photo").style.visibility="visible";
    	document.getElementById("bt_aff_photo").style.height=hauteur+"px";
    	document.getElementById("bt_aff_photo").style.width=largeur+"px";
    	document.getElementById("bt_aff_photo").style.backgroundImage="url("+chemin+")";
	document.getElementById("bt_aff_photo").style.backgroundPosition="0px 0px";
   	document.getElementById("bt_aff_photo").style.left="200px";
   	document.getElementById("bt_aff_photo").style.top="125px";
	document.getElementById("middle").style.visibility="hidden";
  	}
  	function enleve_img()
  	{
		document.getElementById("middle").style.visibility="visible";
 		document.getElementById("bt_aff_photo").style.visibility="hidden";
  		document.getElementById("bt_aff_photo").style.height="0px";
  		document.getElementById("bt_aff_photo").style.width="0px";

	}

 //-- effet d'apparition légende
var Timer;
var Pas = 8; // vitesse défilement
var H_Fenetre = -1;
var H_Bandeau;

function moveLayerl(Sens){
  var Obj;
  if( H_Fenetre < 0){
    //-- Recup largeur objet defilant
    Obj = document.getElementById( "Contenul");
    H_Bandeau = Obj.offsetRight;
    //-- Recup largeur zone de defilement
    Obj = document.getElementById( "Supportl");
    H_Fenetre = Obj.offsetTop;
  }
  //-- Recup Objet
  if(document.getElementById)
    Obj = document.getElementById("Contenul" );
  var Min_X = -(H_Bandeau -H_Fenetre);
  var Pos_X = parseInt(Obj.style.left) + (Pas*Sens); // prochaine position du DIV
  //-- Test des positions
  if( Pos_X > 150){
    Obj.style.left = "150px"; // Place a zero
  }
  else{
    if( Pos_X <  0)
      Obj.style.left = "0px";  // Place en positionmini
    else{
      //-- Deplacement autorise on deplace
      Obj.style.left = Pos_X + "px";
      //-- et on y retourne
      Timer = setTimeout("moveLayerl(" + Sens + " );", 25);
    }

  }
}


le .html


<body>

<div id="bt_aff_photo">
		<div id="navigation_image" style="float:right; width:20px;">
			<img src="./design/croix.png" style="float:right; margin:5px;" alt=""  onclick="javascript:enleve_img();"/>
<!--testdefilement-->
			<img src="./design/info.jpg" style="float:right; margin:5px;" alt="information" onmouseover="moveLayerl(-1);" onmouseout="clearTimeout(Timer), moveLayerl(1);" />
		</div>

		<div id="Supportl" style="position:relative; width:150px; height:150px; float:right; margin-top:150px; margin-right:-10px;  overflow:hidden;">
		<div id="Contenul" style="position:absolute; width:150px; height:150px; left:150px; top:0;">
<!--fintestdefilement-->


<p class="legende" style="width:150px; height:150px; padding:5px;  background-image: url(./design/backinfo.png);">Ceci et l'image de blabla</a></p>
		</div>
		</div>
	</div>
</body>


Merci...

PS : Je n'est pas mis les images croix et info dans des liens, est ce obligatoire ou ça marche très bien comme ça??
Modifié par Olivierb (13 Apr 2010 - 09:33)
salut

<< Puis une galerie toute faite c'est pratique mais ça ne fait pas avancé en programmation.

avant tout, javascript, html et autres du même accabit çà n'à rien à voir avec de la programmation. et puis un ensemble de code tout prêt qui fonctionne et qui est correctement codé en apprend bien plus que les trois "médaillons" que tu nous livre là.

<< Certain vont me dire prend une lightbox ou autre, mais je dis non pour 3 raisons

hé bé tu sais ce qu'il te reste à faire...
Je sais je vais m'acharner merci pour ton aide précieuse...
Modifié par Olivierb (13 Apr 2010 - 15:02)
Modérateur
Bonjour,

keran a écrit :

avant tout, javascript, html et autres du même accabit çà n'à rien à voir avec de la programmation


D'accord pour le HTML, mais en ce qui concerne le Javascript, c'est bel et bien un langage de programmation, ne serait-ce qu'en sachant qu'on peut faire de la programmation orientée objet avec le langage JavaScript.

Bon après, chacun peut jouer sur les mots aussi, comme dire que c'est du scripting et non de la programmation. Smiley rolleyes

Fin du hors-sujet.
salut

<< comme dire que c'est du scripting et non de la programmation

t'as viser juste Smiley cligne javascript n'est pas java...et ce n'est pas jouer sur les mots.
Modérateur
Bonsoir,

Définitivement, je ne suis pas d'accord d'exclure le Javascript des langages de programmation. Je ne dis pas que ceux qui réalisent un rollover en Javascript sont des programmeurs, mais plutôt que le Javascript est un langage de programmation au même titre que les autres et qu'il existe bel et bien des programmeurs Javascript.

Je n'ai jamais entendu d'arguments concrets permettant d'exclure ce langage du domaine de la programmation. Les recherches que je fais à ce sujet sur Internet ne réussissent qu'à me convaincre de rester sur mes positions. Fais quelques recherches sur Javascript Programming Language, Programmeur Javascript, etc... Tu seras étonné du nombre impressionnant de gens, incluant des auteurs, qui catégorisent le Javascript dans la Programmation.

Bref, à chacun sa définition!

Cela dit, je crois qu'on pollue beaucoup le sujet d'Olivierb. Mes excuses à ce dernier! Promis, je m'arrête là!
Sujet clos
Aller à