merci Nico c'est pas mal. dans ma version ça change un peu : ça se rapproche plus de galleriffic , sans thumbnails ( les images en petit format ) , et le zoom ne vient pas lorsqu'on clique sur l'image ( un click sur l'image amènerait à l'image suivante ) , mais quand on clique sur une icône zoom près des chiffres. mais c'est presque pareil, c'est pas grand chose à changer.

 

par contre je suis en train de me demander ce qui serait le plus intelligent en mode responsive, si on lit ce site sur un téléphone par exemple. là le zoom et les chiffres seraient peut-être trop petits, et alors est-ce qu'on passerait d'une image à une autre en slidant ( ce qui remplacerait le click ) , Est-ce qu'on pourrait toujours zoomer ...

mais bon, c'est des questions pour plus tard, je vais essayer de faire simple déjà, et un jour peut-être j'irai plus loin dans les fonctions de cette galerie.

J'ai finalement un ancien projet où j'aimerais adapté ta galerie Nico, si tu as le temps de fournir ce que tu as fait. Merci d'avance

 

effectivement, en faisant F12 sur Google chrome on a accès à plein de choses, et même un visionnage version smartphone, pratique.

je suis encore en train de voir si je retrouve le code de gallerific, lorsqu'on l'observe sous Google chrome, mais je ne suis pas encore à ce niveau de compréhension, c'est désespérant.

pour le reste, je comprend le principe.

je vois néanmoins le header html qu'on retrouve sur le site de galerific, mais je ne vois que lui, pas le reste. ça a l'air dispatché.

 

 

3. Add container elements to your page. All container elements are optional, so you may choose to not include an area (such as the loading or caption container elements). Here is an example of all the elements needed for a full-featured setup:

<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
    ... graceful degrading list of thumbnails (specific format specified below) ...
</div>

pour moi ça veut dire qu'il faut ajouter un ou des panneaux d'éléments, 

mais c'est optionnel. 

si on ne veut pas le faire, alors on entre le code ci-dessus ... 

en endbody ( à la suite du header ) précédent appelant 

le javascript gallerific, 

importé précédemment dans les ressources d'OE.

4. Within the thumbnails container element, build your graceful degrading unordered list of thumbnails linking to the image slides as such:						 
<div id="thumbs">
    <ul class="thumbs noscript">
        <li>
            <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
                <img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
            </a>
            <div class="caption">
                (Any html can go here)
            </div>
        </li>
        ... (repeat for every image in the gallery)
    </ul>
</div>

... ça pour moi ça veut dire .. je ne sais pas, 
mais c'est lié aux déclencheurs ( thumbnail ) . je suppose qu'il faut le 
mettre à la suite de ce qu'il y a déjà dans le bloc de code html de départ.
 
5. Initialize the gallery by calling the galleriffic initialization function on the thumbnails container, passing in optional settings.  The following example shows the default options:						 
jQuery(document).ready(function($) {
    var gallery = $('#thumbs').galleriffic({
        delay:                     3000, // in milliseconds
        numThumbs:                 20, // The number of thumbnails to show page
        preloadAhead:              40, // Set to -1 to preload all images
        enableTopPager:            false,
        enableBottomPager:         true,
        maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
        imageContainerSel:         '', // The CSS selector for the element within which the main slideshow image should be rendered
        controlsContainerSel:      '', // The CSS selector for the element within which the slideshow controls should be rendered
        captionContainerSel:       '', // The CSS selector for the element within which the captions should be rendered
        loadingContainerSel:       '', // The CSS selector for the element within which should be shown when an image is loading
        renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
        renderNavControls:         true, // Specifies whether the slideshow's Next and Previous links should be rendered
        playLinkText:              'Play',
        pauseLinkText:             'Pause',
        prevLinkText:              'Previous',
        nextLinkText:              'Next',
        nextPageLinkText:          'Next &rsaquo;',
        prevPageLinkText:          '&lsaquo; Prev',
        enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
        enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
        autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads
        syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
        defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
        onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
        onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
        onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
        onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
        onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
        onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
        onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
    });
});
 
alors, ça, c'est le code d'initialisation de la gallerie, qui contient les 
paramètres spécifiques de gallerific.
comme c'est du jquery, il faut ajouter un bloc de code, en mode javascript, et ... 
header ou endbody. 
et là, il devrait se passer quelque chose dans la page, et il faut reporter 
les ID des images qui sont dans la bibliothèque, enfin c'est quand même le brouillard.
je vais attaquer le chapitre html de la w3school prématurémment ( je n'ai pas fini 
le chapitre jquery ) , je devrais y trouver des réponses.

 

tout ce code est à adapter .

si je comprend bien, dans le body du bloc de code html, on insère ce code, tout ou partie - ce sont des éléments de contenu, on peut par exemple ne prendre que

 

et on complète ce code par plus de "détails" :