begin process at 2013 05 25 18:21:01
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Réseau & Internet

 > FENÊTRE PSEUDO MODALE INCORPORÉE DANS UN SCRIPT PHP SIMPLIFIÉ AU MAXIMUM (SANS UTILISATION DE BIBLIOTHÈQUE JAVASCRIPT)

FENÊTRE PSEUDO MODALE INCORPORÉE DANS UN SCRIPT PHP SIMPLIFIÉ AU MAXIMUM (SANS UTILISATION DE BIBLIOTHÈQUE JAVASCRIPT)


 Information sur la source

Note :
Aucune note
Catégorie :Réseau & Internet Classé sous :fenêtre, modale, php, css, simple Niveau :Débutant Date de création :20/01/2013 Date de mise à jour :25/02/2013 11:36:33 Vu / téléchargé :2 870 / 230

Auteur : aladec2007

Ecrire un message privé
Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

 Description

Classique affichage d'une fenêtre pseudo modale. Lorsque l'on clique sur un image vignette, la fenêtre s'ouvre. Le code est simplifié au maximum (source récupérée sur Internet et simplifiée au maximum). Exemple de script php qui incorpore cette technique simple avec du css et un minimum de javascript pour ouvrir ou fermer la fenêtre (aucune bibliothèque javascript n'est nécessaire). Un autre exemple avec barre de navigation est proposé toujours sans prétention.

Source

  • Deux fichiers script php d'exemples simples avec un dossier images de 7 photos.
  • A tester en local sur un serveur web qui supporte le php.
  • Remplacer simplement les photos présentent dans le dossier images par vos photos au format JPG ou PNG.
  • exemple en ligne sur www.andelim.eu/carine/galerie/galerie.php
Deux fichiers script php d'exemples simples avec un dossier images de 7 photos.
A tester en local sur un serveur web qui supporte le php.
Remplacer simplement les photos présentent dans le dossier images par vos photos au format JPG ou PNG.
exemple en ligne sur www.andelim.eu/carine/galerie/galerie.php

 Conclusion

Les sources sont mises en partage car certaines parties ont été glanées sur Internet et adaptées.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

20 janvier 2013 20:07:24 :
Ajout d'un 2ème fichier php (exemple) afin de tenir compte de la remarque
21 janvier 2013 01:21:17 :
3 fichiers php au choix du client
21 janvier 2013 10:24:56 :
Ajout d'un 4ème exemple sans javascript et correction de quelques fautes signalées dans les commentaires (merci)
21 janvier 2013 16:00:19 :
Ajout de codes dans le css des exemples 2 et 3 suite au comportement "bizarre" de FireFox et Chrome. Cet ajout n'a pas été placé dans les exemples 1 et 4. Je cherche la raison ...
22 janvier 2013 00:46:34 :
Fautes corrigées dans les fichiers scripts 2 et 3 (mauvais placement des commentaires dans le code css)
23 janvier 2013 16:12:06 :
Ajout de l'exemple 5 (redimensionnement en fonction de la taille écran)
25 janvier 2013 10:43:48 :
Correction de la variable $_SERVER
31 janvier 2013 10:49:34 :
Tentative de répondre aux remarques en sachant que tous les objectifs ne sont pas remplis.
31 janvier 2013 12:29:07 :
rectifie le cas où l'image réelle à une taille très petite par rapport aux dimensions de la fenêtre du navigateur
02 février 2013 16:28:37 :
ajout d'un fichier exemple
05 février 2013 14:53:51 :
Défilement des photos en diaporama est maintenant possible.
08 février 2013 16:10:25 :
diaporama automatique (index.php) avec transitions possibles entre les images (attention au comportement des différents navigateurs)
10 février 2013 15:30:48 :
mise en conformité avec IE9 + identification du navigateur pour appliquer ou non les transitions entre images dans le diaporama
10 février 2013 15:36:49 :
oubli du dossier images dans l'archive zip
10 février 2013 20:22:46 :
simplification du code
13 février 2013 11:33:37 :
rectifie quelques erreurs minimes
17 février 2013 11:37:27 :
Ajoute la possibilité de présenter plusieurs galeries sur une même page avec un paramétrage relativement facile
17 février 2013 15:07:39 :
ajout d'une info-bulle sur chaque vignette + correction de quelques erreurs minimes
17 février 2013 17:02:43 :
rectifie erreur d'affichage au niveau du navigateur Chrome concernant z-index des info-bulles
18 février 2013 14:59:48 :
gestion des info-bulles pour les différents navigateurs
19 février 2013 11:34:03 :
le css gère maintenant les tableaux
25 février 2013 11:36:36 :
correction affichage des vignettes lors de l'ouverture de la fenêtre modale + réservation du nombre de lignes de texte sous l'image de la fenêtre modale

 Sources du même auteur

Source avec Zip GESTIONNAIRE DE SAUVEGARDE D'UNE BASE DE DONNÉES MYSQL
Source avec Zip MULTIMAILER
Source avec Zip RECHERCHE DES DOUBLONS DANS UNE TABLE MYSQL EN SÉLECTIONNANT...

 Sources de la même categorie

Source avec Zip WEBSERVICE AVEC PHP par sitoumbaz
Source avec Zip ESPACE MEMBRE AVEC IDENTIFICATION par floflode69
INSPECTEUR DE PAGES (VÉRIFIEZ SI DES SITES AFFICHENT UN TEXT... par pablo836
Source avec Zip Source avec une capture GÉOLOCALISATION par pgl10
Source avec Zip TAPI : METTRE EN RELATION DEUX POSTES TELEPHONIQUES par ravery

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture PAGINATION + FICHIER CSS par profdi
Source avec une capture PAGINATION EN PHP par Orangina
Source avec Zip Source avec une capture GALERIE PHOTO SIMPLE À GÉRER par francky6691
Source avec Zip Source avec une capture CAPTCHA PHP SIMPLE par toutoos
Source avec Zip Source avec une capture BLOG COMPLET : NEWS, IMAGES, COMS. SIMPLE D'UTILISATION ET D... par lucas34990

Commentaires et avis

Commentaire de ghuysmans99 le 20/01/2013 16:19:07

Désolé de te le dire, mais le code PHP est tout simplement illisible avec tous ces echo.
C'est pas pour rien que <?php et ?> existent...

Commentaire de stay le 21/01/2013 09:16:15

Salut aladec2007, Le but sur phpcs.com, c'est de présenter du code PHP pour rendre service ou se faire aider.
Tu proposes une fenêtre modale, donc si tu supprimes tout le code PHP et que tu présentes ton code sur www.javascriptfr.com, c'est mieux :). Mais attends-toi à des retours négatifs sur ton HTML car tu essayes de présenter un code complet en y mettant une doctype. Par exemple, tu utilises la doctype HTML5 et on ne retrouve aucun tag HTML5 dans le code (c'est dommage). Ou bien que le tag h3 n'est imbriqué nulle par.

Commentaire de aladec2007 le 21/01/2013 10:31:39

Bonjour stay,
Le but est d'afficher plusieurs images en utilisant une boucle réalisée en php avec récupération de toutes les images présentent dans un dossier images. J'ai retiré le doctype HTML5 en suivant tes conseils. J'ai ajouté un 4ème exemple qui risque de provoquer des réactions ...

Commentaire de stay le 21/01/2013 12:01:46

Re, oui mais le hic c'est que si je dois critiquer le code source, il ne reste plus que le JavaScript voir le CSS.
Un exemple très important dans la source à optimiser, car sinon tel-quelle serait inutilisable.
Le redimensionnement automatique des images par rapport à la fenêtre du navigateur n'est pas géré par le script.
De plus, si tu veux rivaliser avec une librairie open-source niveau simplicité.
Le code HTML devrait être approximativement comme ceci :

<a class="lib-aladec2007" href="img-big-1.jpg" title="Photo n° 1"><img src="img-small-1.jpg" alt="Chateau de Saive - Belgique, côté nord" /></a>
<a class="lib-aladec2007" href="img-big-2.jpg" title="Photo n° 2"><img src="img-small-2.jpg" alt="Chateau de Saive - Belgique, côté sud" /></a>

Par la suite, la libraire prend le relai et ajoute les strong, class CSS, etc...

Comprends-tu :) ?

Commentaire de aladec2007 le 21/01/2013 12:39:48

Re bonjour stay,
Je veux simplement proposer un exemple de code simple, utilisable en combinaison avec une base de données dans laquelle sont stockées les caractéristiques des images (chemin des fichiers et autres). L'idée de réaliser une librairie capable de rivaliser avec d'autres librairies n'entre pas dans mes objectifs. C'est vrai qu'il serait intéressant d'introduire dans le script, un redimensionnement des images en fonction de la fenêtre du navigateur (à voir plus tard). Merci pour ces commentaires constructifs.

Commentaire de stay le 21/01/2013 13:30:55

No problemo :)

Commentaire de emilia123 le 28/01/2013 10:15:10

en fait le problème vient de cette phrase :
------------------------------------
Je veux simplement proposer un exemple de code simple, >>>>>>>utilisable<<<<< en combinaison
------------------------------------
Les différents codes présentés ne sont en rien "utilisable" simplement.
Pourquoi se priver d'un simple fichier JS qui réaliserait l'ensemble des interactions?
Sachant que ton fichier PHP n'est pas autonome (il te faut l'image "fermer.png" en plus), pourquoi ne pas inclure aussi un script JS qui intercepte le clic sur une des images, fabrique la fenêtre modale et l'affiche avec un bouton de fermeture de la fenêtre modale?

Pour être dans le conseil constructif :

- il ne faut pas écrire tout un fichier HTML ligne par ligne avec un écho (cela rend le code illisible, source d'erreur, et mauvais au niveau des performances),
- si il n'y a pratiquement que du code HTML/CSS/JS, il faut essayer de passer par un fichier template pour séparer au maximum le code PHP du reste,
- externaliser le code JS et CSS (car l'internaute n'a pas besoin des les re-télécharger à chaque affichage de page contrairement à une présence "dans la page",
- il faut penser à une navigation sans JS (donc le href des liens doit "pointer" vers l'image et seul le "onclick" doit contenir le javascript)
- il ne faut JAMAIS faire un "echo" d'une variable récupérée par $_GET ou $_POST sans la traiter avant l'affichage. L'exemple 5 ne devrait pas être laissée entre les mains de débutants car il contient un problème de sécurité dans ce style.
EM.

Commentaire de aladec2007 le 30/01/2013 17:24:44

Merci à emilia123 pour les commentaires constructifs qui me permettront d'évoluer.

Commentaire de stay le 31/01/2013 08:52:09

Salut, pour moi parler de code avant même d'avoir une idée qui tient la route, ne sert à rien.
Quand je t'ai dit, no problemo :), ça voulais dire, c'est pas grave (ta pas envie, ta pas envie).
Les méthodes de travail (librairies et applications) et syntaxe sont une chose, parler d'un projet dans un langage humain est bien plus important au départ.

emilia123 t'a dit :
Les différents codes présentés ne sont en rien "utilisable" simplement.
Pourquoi se priver d'un simple fichier JS qui réaliserait l'ensemble des interactions?

Moi j'ai dit :
De plus, si tu veux rivaliser avec une librairie open-source niveau simplicité.
Le code HTML devrait être approximativement comme ceci :
*...
*...
Par la suite, la libraire prend le relai et ajoute les strong, class CSS, etc...

----
Mise à part que emilia123 à confirmé ce que j'ai dit, il à sauté une étape, il t'a parlé de code alors que tu n'a rien à présenté.
Voici une personne qui réfléchit comme toi et la plupart des débutants :
http://www.phpcs.com/codes/SYSTEME-ADMINISTRATION-CREATION-ARTICLES_54920.aspx

Penses-tu que j'aurai du lui parler de son code avant de comprendre c'est réelle motivation ? :)

Commentaire de aladec2007 le 19/02/2013 11:38:44

Bonjour,
Toujours sans prétention voici une évolution du code en tentant de répondre aux remarques précédentes.
Ceux qui utilisent sont invités à donner leur avis. (merci d'avance)
Un exemple en ligne est visible à l'adresse suivante : www.andelim.eu/carine/galerie/galerie.php

Commentaire de stay le 19/02/2013 12:04:59

Je suis désolé pour toi mais tu n'as rien compris aux postes précédents.
Et même ci tu développes un site avec ce module, cela ne change en rien à ce que j'ai dit.

bonne chance

Commentaire de aladec2007 le 19/02/2013 12:26:05

Bonjour,
Il faudra donc que je retire ce code dans quelques temps puisqu'il n'apporte rien de bien.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Help me....travaille en php "simple" mais payé.....!! [ par Maniac ] Salut,voila je n'y connais rien du tout en php, mais je dois "simplement" faire un forum pour un client pour qui je developpe son site...Si qq1 savait css et php [ par deer ] bonjour,mon probleme est le suivant.j'affiche une serie d'occurences (depuis une base sql) sur lequelles on peut cliquer pour telecharger un document Code php simple en asp ou cfm... [ par fabiin ] Salut,je ne programme ni en asp ni en cfm, mais j'ai besoin de ce code php en asp et cfm :)&lt;?$date1 = mktime(18,33,0,10,30,2003);$date2 = mktime(18 PHP & WANADOO... [ par lard ] Bonjour !Simple question:Pour l'instant, je suis abonné à Wanadoo (personne n'est parfait...) et j'ai voulu mettre en ligne une simple page Web conten ouvrir une fenêtre en PHP ou HTML [ par antoineklein ] Bonjour,pourriez vous me donner le code, si c'est possible, pour ouvrir une fenetre sans barre, juste un bouton (X) pour fermer et avec comme contenu Question simple, php chez FREE [ par bubble44 ] Je suis developpeur asp (lol on me jete pas de cailloux merci) et je vais devoir coder en php un truc car apparement c'est pas possible en asp.Est ce php et css [ par nezdeboeuf62 ] bonjour les ami(e)s!!!!Juste une petite question rapide. Peut generer des css avec du php???(c juste pour eviter que je perde mon tps a essayer de tro Comment utiliser les styles css [ par Roc ] Bonjour à tous je commence tout doucement à utiliser php. Un ami m'a conseillé d'utiliser les styles php. En fait c'est pour avoir la meême présentati php:c'est simple,j'arrive à rien! [ par peterbud ] Bonjour à tous,Celà fait quelques jours que j'ai décidé de me mettre au php et j'utilise easy php1.7....et là ca va plus du tout.En effet je teste des PHP to Flash [ par nashoy ] Bonsoir &#224; tous,apres de nombreuses recherches, je n'ai jamais vraiment pu comprendre l'erreur..En effet, lorsque je cr&#233;&#233; un simple scri


Nos sponsors


Sondage...

CalendriCode

Mai 2013
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,858 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales