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

jQuery Discussion :

plugin GalleryView, comment dois-je l'insérer dans mon site ?


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre expérimenté
    Avatar de beegees
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2004
    Messages
    3 610
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : Mars 2004
    Messages : 3 610
    Par défaut plugin GalleryView, comment dois-je l'insérer dans mon site ?
    Bonjour tout le monde,

    J'aimerais mettre en place ce plugin jquery sur mon site :

    http://spaceforaname.com/galleryview

    Quand je teste ma page online, rien n'apparaît (en local).

    Voici ce que j'ai mis dans le head :

    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
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>
    		Gabarit 02: conteneur global aligné à gauche, largeur fixe 750px
    	</title>
    	<!-- La feuille de styles "base.css" doit être appelée en premier. -->
    	<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
    	<link rel="stylesheet" type="text/css" href="styles/modele02.css" media="screen" />
    	<link type="text/css" rel="stylesheet" href="jquery/galleryview-2.0/jquery-galleryview-2.0/galleryview.css" />
    	<script type="text/javascript" src="jquery/jquery-1.4.1.min.js"></script>
    	<script type="text/javascript" src="jquery/galleryview-2.0/jquery-galleryview-2.0/jquery.galleryview-2.0-pack.js"></script>
    	<script type="text/javascript" src="jquery/galleryview-2.0/jquery-galleryview-2.0/jquery.galleryview-2.0.js"></script>
    	<script type="text/javascript" src="jquery/galleryview-2.0/jquery-galleryview-2.0/jquery.timers-1.1.2.js"></script>
     
     
    	<script type="text/javascript">
    		$('#photos').galleryView({
    		panel_width: 800,
    		panel_height: 300,
    		frame_width: 100,
    		frame_height: 100,
    		});
    	</script>
     
    </head>
    Voici ce que j'ai mis dans le body :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="photos" class="galleryview">
    		<div class="panel">
    			<img src="img/gallery/02.jpg" />
    		<div class="panel-overlay">
    			<h2>Eden</h2>
    			<p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.
    			View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
    		</div>
     
    	</div>
     
    	</div>
    Je ne sais par contre pas où mettre ce code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul class="filmstrip">
    	<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
    	<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
    	<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
    	<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
    	<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
    	<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
    	<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
    	<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
    </ul>
    Merci d'avance pour votre aide précieuse et bon WE.

    beegees

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Il suffit de prendre exemple sur le code de la page : http://spaceforaname.com/gallery-light.html

    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
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    <!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" --> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <!-- InstanceBeginEditable name="doctitle" --> 
    <title>jQuery GalleryView - by Jack Anderson</title> 
    <!-- InstanceEndEditable --> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> 
    <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script> 
    <!-- InstanceBeginEditable name="head" --> 
    <script type="text/javascript"> 
    	$(document).ready(function(){
    		$('#photos').galleryView({
    			panel_width: 800,
    			panel_height: 300,
    			frame_width: 100,
    			frame_height: 100
    		});
    	});
    </script> 
    <!-- InstanceEndEditable --> 
    </head> 
     
    <body> 
    <!-- InstanceBeginEditable name="ContentRegion" --> 
    <h1>Photo Gallery - Light Theme</h1> 
    <p>This example shows how GalleryView can be used to display a photo gallery with slideshow functionality.  Clicking on a frame will jump to that photo, and the overlay caption for each photo contains links to the full image.</p> 
    <p>This gallery utilizes all default plugin options, setting only the dimensions of the panel and filmstrip frame.</p> 
    <div id="photos" class="galleryview"> 
      <div class="panel"> 
         <img src="img/gallery/01.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Effet du soleil sur le paysage</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>.  View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <div class="panel"> 
         <img src="img/gallery/02.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Eden</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.  View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <div class="panel"> 
         <img src="img/gallery/03.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Snail on the Corn</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>.  View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <div class="panel"> 
         <img src="img/gallery/04.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Flowers</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>.  View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <div class="panel"> 
         <img src="img/gallery/06.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Alone Beach 2B</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>.  View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <div class="panel"> 
         <img src="img/gallery/05.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Sunrise Trees</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>.  View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <div class="panel"> 
         <img src="img/gallery/07.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Waterfall</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>.  View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <div class="panel"> 
         <img src="img/gallery/08.jpg" /> 
        <div class="panel-overlay"> 
          <h2>Death Valley</h2> 
          <p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>.  View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p> 
        </div> 
      </div> 
      <ul class="filmstrip"> 
        <li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li> 
        <li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li> 
        <li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li> 
        <li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li> 
        <li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li> 
        <li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li> 
        <li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li> 
        <li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li> 
      </ul> 
    </div> 
    <h3>Function Call and Options</h3> 
    <pre>$('#photos').galleryView({
    	panel_width: 800,
    	panel_height: 300,
    	frame_width: 100,
    	frame_height: 100
    });</pre> 
    <!-- InstanceEndEditable --> 
    </body> 
    <!-- InstanceEnd --></html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre expérimenté
    Avatar de beegees
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2004
    Messages
    3 610
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : Mars 2004
    Messages : 3 610
    Par défaut
    Bonjour,

    Merci pour ta réponse.

    J'ai suivi le code de la page que tu as mentionné et un début de résultat apparaît.

    Merci encore.

    beegees

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Citation Envoyé par beegees Voir le message
    [...] J'ai suivi le code de la page que tu as mentionné et un début de résultat apparaît. [...]


    Je viens de tester les deux versions 1.1 et 2.0 de ce plug-in. J'ai pris soin de télécharger tous les éléments, css, js et photos comprises, et de tester à l'identique, mais chez moi rien ne fonctionne correctement sous jQuery 1.4.2.

    Utilisez une ancienne version, complètement dépassée de jQuery, n'étant pas envisageable pour moi, je classe provisoirement ce plug-in dans ma liste « les choses à oublier. »

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Comment intégrer votre mini-chat dans mon site
    Par ConceptInterWEB dans le forum AJAX
    Réponses: 8
    Dernier message: 08/04/2013, 20h49
  2. [Joomla!] Comment garder mes anciens liens dans mon site
    Par developper2006 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 02/01/2011, 15h53
  3. Comment faire fonctionner ce script dans mon site ?
    Par beegees dans le forum jQuery
    Réponses: 4
    Dernier message: 02/01/2010, 23h01
  4. Comment insérer un chatroom dans mon site ?
    Par boudch dans le forum IRC / mIRC
    Réponses: 6
    Dernier message: 02/11/2007, 11h54
  5. [MySQL] Comment créer une sous catégorie dans mon site ?
    Par plex dans le forum PHP & Base de données
    Réponses: 5
    Dernier message: 18/08/2006, 09h59

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