Partage

Agrandir et reduire une image clic souri

Sujet résolu

FrancescoMarino

19 juillet 2019 à 10:10:14

Bonjour,

Je suis novice et je fait appel à une bonne âme pour compléter le code suivant.

Le script fonctionne très bien.

En cliquant sur la petite image, la grande image s'affiche ce que je souhaiterai c'est

qu'en cliquant dessus (grande), je puisse revenir à l'affichage de la petite image.

Je vous remercie d'avance.

Francesco Marino

voici le code:

<!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" xml:lang="fr" lang="fr">
<head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <script src="js/jquery-1.10.2.min.js" type="text/javascript">
</script>
    <script src="js/lightbox-2.6.min.js" type="text/javascript">
</script>
     
    
    <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    <a href="http://grandoupeye.lescigales.org/gfx/G5.jpg" data-lightbox="Jeux Annuel" title="Jeux annuel"><img src=
    "http://grandoupeye.lescigales.org/gfx/G5.jpg" width="203" height="134" alt="img" /></a>
</body>
</html>

AbcAbc6

19 juillet 2019 à 13:16:59

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Liens conseillés

Règles générales du forum

Bonjour, normalement avec une lightbox quand tu cliques en dehors de l'image, c'est à dire dans la zone légèrement grisée, la lightbox doit ce fermer.

Aurais-tu une page en ligne pour voir le comportement avec les scripts?

Tu as également une erreur au validateur https://validator.w3.org/ . Tu utilises un ancien doctype, tu peux franchement utiliser celui de l'HTML5, soit

<!DOCTYPE html>
<html lang="fr">

pour les 2 premières lignes.

FrancescoMarino

19 juillet 2019 à 13:57:09

Bonjour,

Merci beaucoup d'avoir répondu aussi vite.

Voici le lien : http://grandoupeye.lescigales.org/Page022.html

Sur mon site je voudrai mettre quelques photos et pouvoir cliquer

sur une d'elle ensuite revenir au menu la où j'étais..

Pour le changement de <!DOCTYPE html> <html lang="fr">

ça ne pose aucun problème, je peux le remplacer.

Merci

AbcAbc6

19 juillet 2019 à 14:20:43

j'ai sorti ton dernier message des spams.

Il y a des erreur 404 sur cette page, les scripts ne sont pas lier. Voir cette capture.

Je regarde le reste du site pour voir,

Tu as deux doctype sur cette page, tu ne peux en avoir qu'un et un seul. Passe ton code au validateur pour corriger les erreurs avant de poster sur le forum.

ÉDIT As tu déjà vus ta page d’accueil ?? c'est quoi tous ces compteurs de visites qui ne servent à rien? et des contenus qui défile?? c'est un site réalisé il y a plus de 20 ans?

voici ce que je vois.

-
Edité par AbcAbc6 19 juillet 2019 à 14:32:22

FrancescoMarino

19 juillet 2019 à 15:30:55

Bonjour,

Je garde cet hébergeur uniquement pour faire des essais, comme tu as pu le constater il y a du n'importe quoi..

Dès que j'aurais le code qui fonctionne bien, je le mettrai dans mon site.

Peux-tu m'aider à faire fonctionner comme je le demande.

Merci d'avance.

Francesco

AbcAbc6

19 juillet 2019 à 16:29:17

>> Je garde cet hébergeur uniquement pour faire des essais, comme tu as pu le constater il y a du n'importe quoi..

Ha bien je préfère ça. Bien que http://oupeyeinfo.be/ ne soit pas si terrible que ça. Voir un site de la sorte ça me retourne le cœur de Liégeois . Que dirait notre tchantchès national!!

>> Peux-tu m'aider à faire fonctionner comme je le demande.

Oui, cela fait un temps que je n'ai pas intégrer de lightbox, j'essaie d’abord de déterminer si le problème est plus du HTML ou du JavaScript (auquel cas je déplacerais dans le bon forum.)

Pour l'instant c'est un problème HTML puisque tes scripts ne sont pas lié à la page, donc cela ne peut pas fonctionner en l'état.

Résous les problèmes de 404 en lient correctement tous les fichiers nécessaire au fonctionnement de la lightbox. Si après cela ET correction du code avec le validateur, il y a encore un problème je regarderais de quoi il en retourne.

FrancescoMarino

19 juillet 2019 à 19:46:47

Je te remercie de prendre mon problème au sérieux.

Ciao

Francesco

JosselinRobin

19 juillet 2019 à 21:00:40

Salut, Je ne sais pas si c'est faisable en HTML/CSS. à mon avis tu auras besoin de JS. Il existe des solutions avec bootstrap. C'est créer des fenêtres modals (modaux ?) bref je te donne un lien. https://getbootstrap.com/docs/4.0/components/modal/.

Cordialement

FrancescoMarino

19 juillet 2019 à 22:35:31

Salut,

C'est très gentil d'avoir répondu mais ce que tu me demandes c'est trop difficile pour moi.

Merci beaucoup

Cordialement

Francesco

JosselinRobin

19 juillet 2019 à 22:50:04

C'est surement le plus simple, tu importes bootstrap et tu utilises le code donné par bootstrap. Tu as ce cour si tu veux : https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap/1885777-mise-en-route

AbcAbc6

20 juillet 2019 à 1:30:32

FrancescoMarino a écrit:

Je te remercie de prendre mon problème au sérieux.

Je prends ce problème très sérieusement. Vous ne dite pas ou exactement vous bloquez pour réaliser ce que vous voulez, donc je tâtonne.

Pour l’instant le code n'est pas fonctionnel car les fichiers JavaScript nécessaire au fonctionnement ne sont pas présent. Sur ce point vous avez compris?

Il faut lier les fichiers JS absolument. Soit vous le faite sur la page que vous avez mentionné plus haut, soit (et je veux bien faire ce geste) vous placer tous les fichiers dans une archive .zip et je regarderais ce qui ne vas pas.

FrancescoMarino

20 juillet 2019 à 10:37:04

Salut,

C'est un code que j'ai pris sur internet.

Personnellement je ne comprend pas grand chose dans la programmation.

Comme tu indiques que tu veux faire un bon geste, je suis d'accord.

Merci beaucoup.

Francesco

AbcAbc6

20 juillet 2019 à 16:35:27

FrancescoMarino a écrit:

C'est un code que j'ai pris sur internet.

Bonjour, ce n'est pas comme cela que ça fonctionne, surtout si vous prenez seulement 1/3 des fichiers nécessaires. Il faut vous documenter sur ce que vous allez implémenter.

La documentation de cette fonctionnalité est ici https://lokeshdhakar.com/projects/lightbox2/

Personnellement je ne comprend pas grand chose dans la programmation.

Il va falloir s'y mettre, vous n’y arriverez pas si vous ne vous lancer pas dans l’apprentissage des langages. C'est vraiment pas compliqué il faut lire la documentation. Lire la doc c'est plus de la moitié du travail effectuer.

Je vous ai fait un exemple fonctionnel. Malheureusement j'ai des soucis pour l'envoyer sur serveur distant. Je vous ai envoyer un mail (en priant pour que gmail ne me jette pas car il y a un .JS dans le .zip)

Si vous avez une autre adresse que gmail, pourriez vous me la communiquer par message privé.

-
Edité par AbcAbc6 20 juillet 2019 à 16:37:36

FrancescoMarino

20 juillet 2019 à 20:33:42

Oui, j'ai une adresse mail.

Tu me demandes de communiquer par message privé.

Je suis désolé mais comment faire pour te l'envoyer

je ne connais pas ton adresse.

Merci

AbcAbc6

20 juillet 2019 à 23:11:38

Bonsoir, pas besoin de connaitre mon adresse pour m'envoyer un message privé, c'est tout l'intérêt d'une messagerie privée interne. Vous pouvez envoyer un message à n'importe quel membre inscrit sur openclassrooms, en cliquant sur son pseudo ou son avatar.

Vous arrivez sur la page profile du membre, ensuite cliquer sur "envoyer un message", vous arrivez sur la page de création de message, soit la messagerie privée du site.

Comme je crains fort que mon mail envoyé cette aprem soit bloquer par gmail, je vous ai envoyer un MP avec un lien pour que vous puissiez télécharger le .zip que j'ai réalisé.

FrancescoMarino

21 juillet 2019 à 9:34:50

Bonjour,

j'ai bien reçu le fichier zip, je viens de faire un essai

en ajoutant d'autres images et ça fonctionne très bien.

Je te remercier fortement pour avoir sacrifier un peu

de ton temps pour moi.

Je suis désolé de te dire, ce que je voulais, un code

pour une seule image et ce code le recopier sur d'autre images.

Encore un grand merci à toi, bonne journée et bon dimanche.

Francesco Marino

AbcAbc6

21 juillet 2019 à 10:31:28

Bonjour, de rien , au plaisir

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e