[Whymsun]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.9.4.2
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour à tous,

Existe t-il un module Jquery de gallery déjà développé qui permette :

d'afficher une image principale par exemple 200px x 200px ;
avec en dessous 3 images de la même gallery (répertoire) sous forme de thumb ;
lorsque l'on clique sur l'une des vignettes elle apparait dans l'image principale ;
lorsque l'on clique sur l'image principale elle apparait zoomé avec fancybox par exemple ?

Je fouille les modules et le net mais pour le moment nada !

Merci d'avance si l'un de vous a une piste.

[bess]

pas de mémoire mais tu devrais t'en sortir avec gallery, beaucoup de connaissance smarty et un peu d'imagination

L'idée serait de prendre un template existant et de le modifier évidement

[Whymsun]

Bonjour Bess,

En fait c'est ce que je fait avec le template AE-Gallery qui ressemble le plus à ce que je recherche.

J'avais déjà utilisée la fonction d'appel à un champ dans une image pour créer un lien externe dans l"image principale, ce qui fonctionne à merveille :

Code :

{$image->fields.nomduchamp.value}

Dans la mesure ou l'affichage de l'image principale est déjà un appel à un script Jquery, je me suis dit qu'il serait judicieux d'insérer l'appel à un autre script (Fancybox) dans le lien de ce champ.

Je ne sais pas si cette démarche est valable, pour l'instant je cherche, mes connaissances Smarty sont ce quelles sont !

[bess]

Dans la mesure ou l'affichage de l'image principale est déjà un appel à un script Jquery, je me suis dit qu'il serait judicieux d'insérer l'appel à un autre script (Fancybox) dans le lien de ce champ.

tu es sur la bonne voie je dirais, faudras juste que les deux scripts se marchent pas dessus

[Whymsun]

Pour donner suite à ma tentative de lier Fancybox à AE-Gallery, j'y suis presque, mais grosse frustration.

Cela fonctionne sur la première image dans le wrapper d'AE-Gallery, mais dès que l'on y charge une autre image, le script Fancybox ne fonctionne plus.

Voilà ce que j'ai fait :

Code :

<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.js"></script>
<script type="text/javascript" src="modules/JQueryTools/lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/ae-gallery/jquery.ae-gallery.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></script>

<script type="text/javascript">
  $(function() {
    var galleries = $('.ae-gallery').aeGallery({
      loader_image: 'modules/Gallery/templates/ae-gallery/loader.gif',
      slideshow: {
        autostart: false,
        speed: 4000,
        start_label: 'Start',
        stop_label: 'Stop',
        stop_on_scroll: false,
      }
    });
  });
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $("a.group").fancybox({
        'speedIn':        300,
        'speedOut':    300,
        'overlayColor':    '#000',
        'overlayOpacity':    0.7
    });
});
</script>

Le script Fancybox est chargé en dernier,

dans le gabarit d'AE-Gallery, j'ai modifié le longdesc de manière à ce qu'il crée un lien en faisant appel à l'image chargée dans le wrapper, c'est ok :

Code :

{else}
{capture name=images assign=imgs}
{$imgs}
        <li>
          <a href="{$image->file}">
<img src="{$image->thumb}" title="{$image->title}" alt="{if empty($image->comment)}{$image->titlename}{else}{$image->comment}{/if}" longdesc="{$image->file}" />
          </a>
        </li>

Ensuite, dans le fichier jquery.ae-gallery.js, j'ai ajouté ligne 550, la class="group", pour faire appel à Fancybox :

Code :

if(image.link) {
          var link = $('<a href="'+ image.link +'" class="group" target="_blank"></a>');
          link.append(img);
          img_container.append(link);

Dès la deuxième image dans le wrapper, le script Fancybox ne fonctionne plus.

Je suis sur qu"à ce stade, il est possible de faire fonctionner ce script.

Si l'un d'entre vous à une idée ?

[bess]

voir le code HTML généré serait un plus pour t'aider. une page dispo ?