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

Bibliothèques & Frameworks Discussion :

La bibliothèque lightbox


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut La bibliothèque lightbox
    J'ai l'image dans ma page du chat. Par contre quand je clique dessus ça m'envoie sur une autre page avec ma photo. Je me demande si je ne me suis pas trompé. En fait je voulais que quand on clique dessus le fond devient noir et il y la photo en plus grand avec un bouton pour fermé. Je sais pas si j'ai était claire.

    voila mon code

    Code xhtml : 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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Jour J</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
     
     
    <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
     
     
           </head>
     
       <body>
           <div id="rubrique">        
     
               <?php
    include("menu.php");
    ?> 
               <div id="texte"> 
               <br>
    <h2>Toffee</h2>
     
               <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d’amour ».</P>
     
    <p>Toffee a débarqué un soir de juillet 2002 dans la vie d’Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
     
    <p>A l’époque elle avait à peine 5 semaine.</p>
    <div id="toffe">
     
    <a href="image/toffe.jpg" rel="lightbox" title="toffe"><img src="image/toffe.jpg" alt="tofee" /></a>
     
    </div>
     <p>Comment ne pas craquer devant cette petite boule de poil !</p>
     
     
    <p>Elle a d’abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s’est installée à Rueil Malmaison où elle a rencontré Julien !</p>
     
    <p>Elle a commencé a apprécié le balcon dans le premier appartement d’Emeline et Julien (0019) et continue aujourd’hui à Chatou sa vie de chat ou plutôt de PACHA !</p>
     
    <p>Mais bon, ses maîtres lui pardonne car elle est d’une aide particulièrement active dans les préparatifs du mariage </p>
     
     
     
     
     
               </div>
     
     
               </div>
               <script type="text/javascript">
        initMenu();
    </script>
     
                   <script type="text/javascript">
                var imgs = document.getElementsByTagName('img');
                
                for (var i = 0; i < imgs.length; i++)
                {
                    if (imgs[i].className == 'rollOver')
                    {
                        imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
                        imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
                        imgs[i].className = '';
                    }
                }
                
                </script>
       </body>
    </html>

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Et tu l'appelles comment la lightbox ?

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    en fait je suis allé la

    http://www.lokeshdhakar.com/projects/lightbox2/

    et j'ai suivi les démarches.

  4. #4
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    sinon je te propose celle ci : http://mbox.tuxfamily.org/ ( regarde la démo sous firefox )

    la version téléchargeable et fonctionnelle sous ie6/7/8 FF2/3 chrome et safari est terminé mais je n'ai aps fait la mise a jour du site

    une seule ligne de code pour gèré tes images ...

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    je suis allée voir et c'est exactement ce que je cherche.

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    c'est possible d'avoir la version téléchargeable?

  7. #7
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    en tout début d'après midi

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    j'ai fait une recherche et j'ai vu que tu avais mis un post avec une demonstration. J'ai fait affiché la source et j'ai vu ton code. ESt ce que cela suffit?
    Par contre le lien que tu ma donné ca ne marche pas sous IE6 avec les photos c'est normal?
    En tout cas merci de ton aide

  9. #9
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    justement , la dernière version corige TOUS les bugs connu donc :
    - compatible IE 6/7/8 FF2/3 safari et chrome
    - ajout de la gestion des flèches + echap pour quitté
    - amélioration du code

    Je te fournis ça dès que j'ai finit mon taff ( une urgence ) donc au plus tard début d'après midi

  10. #10
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    merci vraiment de ton aide. PAs de problème je peux attendre

  11. #11
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    Voila

    La démo finale avec les explications pour l'intégration ...

    Malgrès le fait qu'elle est été testé et retesté il s'agit d'une version BETA je tiens a le rappeler.

    La version finale sera plus légère ( compressée ) et sera fournis avec le fichier de license ( GPL ) ainsi qu'une faq.

    N'hésite pas à me faire ton retour et impression
    Fichiers attachés Fichiers attachés

  12. #12
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    ok merci je vais tester ca

  13. #13
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    En fait j'ai fait des essaie et ca ne marche pas

    voila le code de ma page

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Jour J</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <link rel="stylesheet" type="text/css" href="css/demo1.css" />
    <script type="text/javascript" src="scripts/JsonPropre.js"></script>
    <script type="text/javascript" src="scripts/demo1.js"></script>
     
     
    <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
     
    	   <script type="text/javascript">
    			Objet.AddEvent(window, 'load',
    			function() {
    			    Galery('toffe')
    			});
     
    		</script>
    	   </head>
     
       <body>
           <div id="rubrique">        
     
    		   <?php
    include("menu.php");
    ?> 
               <div id="texte"> 
    		   <br>
    <h2>Toffee</h2>
     
    		   <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d’amour ».</P>
     
    <p>Toffee a débarqué un soir de juillet 2002 dans la vie d’Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
     
    <p>A l’époque elle avait à peine 5 semaine.</p>
    <div id="toffe">
     
    <a href="image/toffe.jpg" rel="lightbox" title="toffe"><img src="image/toffe.jpg" alt="tofee" /></a>
    </div>
     
    <p>
    				<ul id="toffe">
    					<li><img src="image/toffe.jpg" alt="image/toffe.jpg" /></li>
     
    				</ul>
    			</p>	
     
     <p>Comment ne pas craquer devant cette petite boule de poil !</p>
     
     
    <p>Elle a d’abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s’est installée à Rueil Malmaison où elle a rencontré Julien !</p>
     
    <p>Elle a commencé a apprécié le balcon dans le premier appartement d’Emeline et Julien (0019) et continue aujourd’hui à Chatou sa vie de chat ou plutôt de PACHA !</p>
     
    <p>Mais bon, ses maîtres lui pardonne car elle est d’une aide particulièrement active dans les préparatifs du mariage </p>
     
     
     
     
     
    		   </div>
     
     
    		   </div>
    		   <script type="text/javascript">
        initMenu();
    </script>
     
    		   	<script type="text/javascript">
    			var imgs = document.getElementsByTagName('img');
     
    			for (var i = 0; i < imgs.length; i++)
    			{
    				if (imgs[i].className == 'rollOver')
    				{
    					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
    					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
    					imgs[i].className = '';
    				}
    			}
     
    			</script>
       </body>
    </html>
    j'ai laisser volontairement la première photo pour garder une trace de la première méthode au cas ou.

  14. #14
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    les images qui sont dans le dossier image je les met avec toutes mes images ou dans un dossier à part?

  15. #15
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    si tu regarde la source tu peux voir que les images se trouve dans un conteneur :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <ul id="demo1">
    					<li><img src="demo1/01_mini.jpg" alt="demo1/01.jpg" /></li>
    ...
    tu dois donc mettre tes images dans un conteneur ( une div par exemple )

  16. #16
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    je sais si j'ai bien compris ce que tu m'as mis car j'ai repris en fait ton code source et je n'ai pas vu de DIV

  17. #17
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    mais tout a l'heure quand je te parlais du dossier image c'est celui qui est joint avec le zip.

  18. #18
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    ha ok , non les images ne sont pas passé car trop gros en fichier joint mais en regardant les sources qui sont assez clair tu devrais t'en sortir en créeant un dossier image et en mettant les tienns

    pour le conteneur , la div était un exemple moi j'ai utilisé une liste

  19. #19
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    montre moi un exemple de ta galerie ?

  20. #20
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 204
    Points : 58
    Points
    58
    Par défaut
    pour le moment j'ai qu'une photo.

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Jour J</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <link rel="stylesheet" type="text/css" href="css/demo1.css" />
    <script type="text/javascript" src="scripts/JsonPropre.js"></script>
    <script type="text/javascript" src="scripts/demo1.js"></script>
     
     
    <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
     
    	   <script type="text/javascript">
    			Objet.AddEvent(window, 'load',
    			function() {
    			    Galery('toffe')
    			});
     
    		</script>
    	   </head>
     
       <body>
           <div id="rubrique">        
     
    		   <?php
    include("menu.php");
    ?> 
               <div id="texte"> 
    		   <br>
    <h2>Toffee</h2>
     
    		   <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d’amour ».</P>
     
    <p>Toffee a débarqué un soir de juillet 2002 dans la vie d’Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
     
    <p>A l’époque elle avait à peine 5 semaine.</p>
    <div id="toffe">
     
    <a href="image/toffe.jpg" rel="lightbox" title="toffe"><img src="image/toffe.jpg" alt="tofee" /></a>
    </div>
     
    <p>
    				<ul id="toffe">
    					<li><img src="image/toffe.jpg" alt="image/toffe.jpg" /></li>
     
    				</ul>
    			</p>	
     
     <p>Comment ne pas craquer devant cette petite boule de poil !</p>
     
     
    <p>Elle a d’abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s’est installée à Rueil Malmaison où elle a rencontré Julien !</p>
     
    <p>Elle a commencé a apprécié le balcon dans le premier appartement d’Emeline et Julien (0019) et continue aujourd’hui à Chatou sa vie de chat ou plutôt de PACHA !</p>
     
    <p>Mais bon, ses maîtres lui pardonne car elle est d’une aide particulièrement active dans les préparatifs du mariage </p>
     
     
     
     
     
    		   </div>
     
     
    		   </div>
    		   <script type="text/javascript">
        initMenu();
    </script>
     
    		   	<script type="text/javascript">
    			var imgs = document.getElementsByTagName('img');
     
    			for (var i = 0; i < imgs.length; i++)
    			{
    				if (imgs[i].className == 'rollOver')
    				{
    					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
    					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
    					imgs[i].className = '';
    				}
    			}
     
    			</script>
       </body>
    </html>
    Mais je ne comprend toujours pas se que je dois faire de ton fichier image. Désolé je suis encore une débutante. Pour le moment j'ai déjà créé un dossier image dans lequel j'ai déjà mis toutes les images de mon site.

    si tu veux voir se que ca donne

    http://julienetemeline.free.fr/toffe.php

    Par contre j'ai mis la librairie que sur la 2eme photo.

Discussions similaires

  1. [MFC]bibliothèques Jpeg
    Par kor dans le forum MFC
    Réponses: 3
    Dernier message: 06/01/2004, 15h08
  2. Bibliothèque Gcc/mingw 2.95.3.6
    Par richard dans le forum Autres éditeurs
    Réponses: 5
    Dernier message: 11/10/2003, 22h54
  3. Réponses: 8
    Dernier message: 03/09/2003, 00h47
  4. Bibliothèques et documentation
    Par Anonymous dans le forum OpenGL
    Réponses: 4
    Dernier message: 01/04/2002, 12h24

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