Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

Pages : 1

#1 Le 02/03/2009, à 17:44

MiNiShOoTeR

[Javascript] Présentation d'images

Bonjour à tous,

Pour commencer, je précise que je ne connais pas grand chose en Javascript, mais j'en ai réellement besoin pour ce que je veux réalisé, je suis en train d'apprendre ce langage mais au rythme où j'apprends, je serais trop en retard par rapport à mon site donc je viens voir si quelqu'un peut me filer un petit coup de main! tongue

Donc je souhaite réaliser une petite application qui permet de présenter des photos, si possible de façon automatique.

Je voudrais afficher une page avec mes différentes miniatures, puis lors d'un clique de souris, agrandir l'image dans une fenêtre comme ici :

Alapage (cliquez sur la loupe en dessous de l'illustration)

J'ai tout d'abord penser à utiliser la fonction window.open() (pour un popup) mais ça ouvre une nouvelle fenêtre et ce n'est pas très agréable à utiliser.

Je pensais réaliser une fonction : 

function agrandir_image(chemin_image)
{
...
}

Puis appeler cette fonction avec :

<img src="chemin_image_miniature" alt="..." onclick="agrandir_image(chemin_de_l'image_taille_réelle)" />

Je ne sais pas si ma démarche est bonne...

Pour réaliser mon application il me manque donc essentiellement la fonction permettant d'agrandir l'image comme sur alapage, et également une petite astuce pour automatiser tout ceci (avec une BDD en PHP peut-être? Si c'est possible, je suis partant étant donné que je suis bien plus à l'aise avec du PHP). Ensuite, je l'améliorerais dans le temps lorsque je serais un peu plus connaisseur de ce langage.

Merci d'avance! smile

EDIT :

Apparemment, mon topic n'attire pas les foules! sad

J'ai un peu réfléchis au différents moyens que j'aurais pour rendre ça plus facile (quasi automatique), voila mon idée :

- Je crée une BDD qui référence toutes les images, avec comme champs (provisoires) :
ID, Nom_Image, Chemin_Image, Taille_Image (Taille dimension et pas poids), Chemin_Miniature
(Je crée un formulaire -privé- pour faciliter l'ajout et l'envoi d'images)

- Ensuite, j'initie une variable qui contient les "Chemin_Miniature" de ma BDD, puis j'affiche tout avec une boucle :

<img src="<?$Chemin_Miniature?> alt="" onclick="agrandir_image(<?$Chemin_Image?>)" />

Je pense que la méthode est bonne, reste plus que faire ma fonction agrandir_image() en javascript, donc le plus compliqué reste à faire... hmm

Dernière modification par MiNiShOoTeR (Le 02/03/2009, à 21:22)

Hors ligne

#2 Le 03/03/2009, à 00:35

MiNiShOoTeR

Re : [Javascript] Présentation d'images

Un petit remontage du topic...

Je le vois s'enfoncer, et je me vois passer des heures à trouver pleins de trucs, sauf ce que je recherche... sad

Hors ligne

#3 Le 03/03/2009, à 03:12

Angelius

Re : [Javascript] Présentation d'images

Alors je te propose 3 solutions. 1 propre en ajax, 1 potable en javascript et 1 moche en php.

La méthode en javascript :
Essaye de faire un div en hidden, il te suffira de l'afficher selon l'évenement de ton choix et de changer de photo selon un autre événement. Pour stocker tes images, tu les mets dans le bloc div caché.

La méthode pas propre en php :
-Ici c'est beaucoup plus barbare, dés que tu détectes l'évenement ( un clic par exemple ), tu envois une requete à ton serveur php qui va créer une nouvelle page avec l'affichage de la photo. Mais je te préviens, c'est moche, pas propre et lent ! Mais entièrement php.

La bonne solution avec ajax :
- C'est le must pour se genre de chose, mais il avoir des bases ( en gros, 1h de pratique/tuto ^^ ). Tu va lancer ta page html et si tu détectes un événement, tu va chercher les photos sur le serveur et tu les affiches quand elle sont recu. Et même mieux, tu les cherches pendant qu'il navigue !

Voila, si tu veux un peu plus de détail n'hésite pas. Il existe des tutos à ce niveau, je verais si je peux retrouver 2 3 lien qui traine.

Un moteur de recherche qui respecte votre vie privée ?--> Ixquick
Une messagerie instantanée libre et décentralisée ?--> Jabber
Ecouter et télécharger de la musique libre ?--> Jamendo

Hors ligne

#4 Le 03/03/2009, à 13:59

MiNiShOoTeR

Re : [Javascript] Présentation d'images

Tout d'abord, merci pour ta réponse! smile

Angelius a écrit :

Alors je te propose 3 solutions. 1 propre en ajax, 1 potable en javascript et 1 moche en php.

La méthode en javascript :
Essaye de faire un div en hidden, il te suffira de l'afficher selon l'évenement de ton choix et de changer de photo selon un autre événement. Pour stocker tes images, tu les mets dans le bloc div caché.

Je ne suis pas sur de parfaitement comprendre la démarche mais ça consisterait à appliquer la photo en background (avec du CSS) dans le div (qui serait caché par défaut) puis de modifier le CSS à chaque clic sur une miniature, c'est effectivement faisable avec mes connaissances actuelles. Seul petit soucis, j'aimerais pouvoir ajouter un commentaire à chaque photo, est-ce possible avec cette méthode?

La méthode pas propre en php :
-Ici c'est beaucoup plus barbare, dés que tu détectes l'évenement ( un clic par exemple ), tu envois une requete à ton serveur php qui va créer une nouvelle page avec l'affichage de la photo. Mais je te préviens, c'est moche, pas propre et lent ! Mais entièrement php.

Oui effectivement, je pourrais réaliser ça sans trop de soucis, mais ce n'est pas pratique du tout et c'est lent... donc je préfère oublier cette solution.

La bonne solution avec ajax :
- C'est le must pour se genre de chose, mais il avoir des bases ( en gros, 1h de pratique/tuto ^^ ). Tu va lancer ta page html et si tu détectes un événement, tu va chercher les photos sur le serveur et tu les affiches quand elle sont recu. Et même mieux, tu les cherches pendant qu'il navigue !

Je ne suis qu'un débutant! neutral ^^
Mais bon toujours prêt à apprendre également (c'est pourquoi je me refuse d'utiliser des scripts tout prêt, j'irais jamais bien loin avec ça...)
Donc si tu as un tutoriel pour cette méthode, je veux bien essayer! smile
(Et au pire, j'ai la première solution pour me rabattre)
Et même problème que pour la solution en Javascript, je pourrais insérer des commentaires?

Merci pour ta réponse! smile

Hors ligne

#5 Le 03/03/2009, à 22:04

MiNiShOoTeR

Re : [Javascript] Présentation d'images

J'ai opté pour la solution Javascript.

Mais j'ai un soucis (je m'en serais douté un peu...)

Voici mon code generé par le serveur (donc sans PHP) :

[...]
	<head>
            [...]
		
 	<script type="text/javascript">
		
		function agrandir_image(chemin_image)
			{
			// On va "chercher" la class 'cadre_photo'
			var cadre_photo = document.getElementByClassName("cadre_photo");
			
			// On modifie ce qui nous interesse : la visibilité et le fond
			cadre_photo.style.display= "block";
			cadre_photo.style.background = "url(\"chemin_image\")";
			}
		
		</script>
	</head>

	<body>
           [...]
<div class=corps>
	<p class="centrer"><img src="../images/photo_big.png" alt="Photos" /></p>
	
	<div class="cadre_photo"> <!--- Cadre photo! ---> </div>

	<p>
	<img src="personnel/divers/miniatures/01.jpg" alt="01.jpg" onclick="agrandir_image(/web/photos/personnel/divers/01.jpg)" />
        <!--- Ici, je mettrais toutes les autres images selon le même modèle --->
	</p>	
</div>
[...]
	</body>
</html>

Voici également le code css de la class "cadre_photo" :

.cadre_photo
{
display:none;
background:none;
max-width:750px;
height:auto;
border:#000CA7 thin solid;
}

L'indentation n'est pas parfaite et on s'y retrouve mal sans coloration donc j'ai gardé le necessaire.

Lors d'un clique gauche sur la miniature, il ne se passe absolument rien, or j'aimerais que le bloc ayant pour class "cadre_photo" deviennent visible et qu'il affiche en fond l'image précisé comme argument dans ma fonction.

Je cherche le problème, et donc je serais content si quelqu'un pouvait m'aider! smile

________________________________

Après réflexion, j'ai essayé, en utilisant une balise img dans mon div que je repérais grâce à ID, et où je modifiais l'attribut src en javascript, toujours avec cette même fonction, et le résultat est bien meilleur! smile

Sa fonctionne enfin, ce n'est pas exactement ce que j'esperais, mais c'est déjà pas mal, j'améliorerais ça lorsque que je serais plus à l'aise avec le javascript! smile

(Je pense que le problème venait du fait que je n'ai pas utilisé de guillement pour le chemin de l'image dans ce que j'ai posté au dessus)

En tout cas, merci Angelius pour m'avoir mis sur la piste! smile

Dernière modification par MiNiShOoTeR (Le 04/03/2009, à 01:28)

Hors ligne

Pages : 1