Choisir son diaporama d'ouverture (Isotope)

**dhillig** · 16/01/2015, 16h59

Bonjour à tous,
Je commence tout juste des diaporama avec Isotope (et Fancybox), le problème est que je n'arrive pas à choisir le diaporama d'ouverture, l'ouverture se faisant pas défaut sur toutes les photos des diaporama.
J'ai tenté de tripoter le code (à un très bas niveau

... rien à faire

Si une personne savait si cela est possible, voici mon 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
<div id="filters" class="button-group">
    <ul>
      <li class="button is-checked" data-filter=".divers">Divers</li>
      <li class="button" data-filter=".test2">Test_2</li>
  </ul>
</div>
<div id="main">
    <div class="isotope">
	    <a class="fancybox" href="img/kgbig.jpg" data-fancybox-group="gallery" title="Kenny Garrett"><img src="img/kg.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/jcbig.jpg" data-fancybox-group="gallery" title="Jeff Coffin"><img src="img/jc.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/jcbig2.jpg" data-fancybox-group="gallery" title="Jeff Coffin"><img src="img/jc-2.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig2.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb-2.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig3.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb-3.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/dcbig.jpg" data-fancybox-group="gallery" title="Dennis Chambers"><img src="img/dc.jpg" alt="" class="vignette divers"/></a>        
	    <a class="fancybox" href="img/dcbig2.jpg" data-fancybox-group="gallery" title="Dennis CHambers"><img src="img/dc-2.jpg" alt="" class="vignette divers" border="0"/></a>
	    <a class="fancybox" href="img/bmbig.jpg" data-fancybox-group="gallery" title="Brandford Marsalis"><img src="img/bm.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/bfbig.jpg" data-fancybox-group="gallery" title="Bela Fleck"><img src="img/bf.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/bfbig2.jpg" data-fancybox-group="gallery" title="Bela Fleck"><img src="img/bf-2.jpg" alt="" class="vignette divers"/></a>
 
	    <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img src="2_b.jpg" alt="" class="vignette test2" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>
 
	    <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img src="2_b.jpg" alt="" class="vignette test2" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>
 
 
</div>

Quelle serait donc la solution (si elle existe) pour qu'en ouvrant la page html, la diaporama affiché soit "divers" ou "test_2" et son button donc checked ?
Voici le JS (de la page) d'Isotope et des button :

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
docReady( function() {
  // init Isotope
  var iso = new Isotope( '.isotope', {
    itemSelector: '.vignette',
    layoutMode: 'fitRows'
  });
  // bind filter button click
  var filtersElem = document.querySelector('#filters');
  eventie.bind( filtersElem, 'click', function( event ) {
    // only work with buttons
    if ( !matchesSelector( event.target, 'li' ) ) {
      return;
    }
    var filterValue = event.target.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
  // change is-checked class on buttons
  var buttonGroups = document.querySelectorAll('.button-group');
  for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
    var buttonGroup = buttonGroups[i];
    radioButtonGroup( buttonGroup );
  }
});
function radioButtonGroup( buttonGroup ) {
  eventie.bind( buttonGroup, 'click', function( event ) {
    // only work with buttons
    if ( !matchesSelector( event.target, 'li' ) ) {
      return;
    }
    classie.remove( buttonGroup.querySelector('.is-checked'), 'is-checked' );
    classie.add( event.target, 'is-checked' );
  });
}

Pour en revenir à la page d'ouverture par défaut (ouverture que je ne désire donc pas, mais juste par curiosité je pose la question

lors de son ouverture, elle affiche donc toutes les photos y compris celles cachées (dans le cas de "test_2"), les photos cachées sont détectées et donc sont virtuellement présentes.
Page d'ouverture, on a donc, entre-autres : photo n°1 (de "test_2") / espace vierge / espace vierge / espace vierge / espace vierge/ photo du diaporama suivant
En cliquant sur "Test_2", le problème n'existe plus. Y'a t'il un moyen de résoudre cela (bien que je ne sois pas concerné si il y a une réponse à "Choisir son diaporama d'ouverture (Isotope)" ?
Merci pour votre aide et bonne soirée,
dh

**SylvainPV** · 17/01/2015, 00h51

Isotope ne sert pas à faire des diaporamas. C'est une bibliothèque servant à composer des grilles flexibles d'éléments de dimensions variables. Si j'ai bien compris, tu t'en sers pour afficher les vignettes et l'image principale est affichée avec la bibliothèque fancybox. Tu aurais pu aussi choisir une bibliothèque spécialisée pour les diaporamas plutôt que de combiner deux bibliothèques mais bon, admettons.

Je n'ai rien compris au fonctionnel désiré, et je ne sais pas ce qu'est un diaporama d'ouverture... Le fait de mentionner plusieurs bibliothèques dans les explications et le code qui n'ont a priori pas de lien avec le problème n'aide pas à la compréhension. Peut-on avoir une description simple du problème, sans hypothèses, idéalement un lien vers une démo ?

**NoSmoking** · 17/01/2015, 09h55

Bonjour,
pour info Sylvain c'est la suite de cette discussion, FancyBox et Isoptope.

@dhillig :
je vois que tu n'as pas mis à profit la lecture de la documentation

Dans cette ligne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="button is-checked" data-filter=".divers">Divers</li>

la class is-checked indique l'élément ayant la sélection de départ, application du style particulier.

la propriété filter d'un new Isotope indique la class de l'élément dont les vignettes seront visibles au départ donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  var iso = new Isotope( '.isotope', {
    filter: '.divers',      // n'affichera que les éléments du conteneur ayant pour class 'divers'
    itemSelector: '.vignette',
    layoutMode: 'fitRows'
  });

**dhillig** · 17/01/2015, 15h12

Bonjour NoSmoking & Sylvain,
Merci pour vos réponses !
@Sylvain : désolé de ne pas avoir été assez clair

Afin de respecter les règles du forum, je n'ai pas relancé une discussion mais en ai ouvert une nouvelle.
J'aurais du publier l'ancienne discussion comme l'a fait NoSmoking

@NoSmoking : je me suis bien penché sur la documentation, plusieurs fois même

Te dire que j'y ai compris qq chose serait te mentir

J'espère que mon HTML est correct ???
Pour ce qui est du JS, je pense peut-être avoir pu trouver si, sur le code initial (THX NoSmoking), était signalé "*":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 var iso = new Isotope( '.isotope', {
    filter: '.*',
    itemSelector: '.vignette',
    layoutMode: 'fitRows'
  });

Mais je sais que dans le cas précédent, cela n'était pas utile

BON, ENCORE TRES FORT NoSmoking !!! Problème RESOLU

Pour ce qui est du problème des espaces vierges laissés par des galeries "cachées" lorsque tout est affiché, même si cela ne me concerne pas (je n'ai plus de page "*"), je vais poster deux vidéos (pour rendre le lancement de la discussion compréhensible).
Bon week-end à vous et encore

NoSmoking

**dhillig** · 17/01/2015, 15h55

rebonjour,
Donc voici deux vidéos afin de rendre le sujet de cette discussion (résolue

) compréhensible.
Page de travail donc design très peu soigné

Donc voici la page "*" suivie de "divers" et de "test_2"
https://www.youtube.com/watch?v=ebUo...ature=youtu.be
Nous voyons bien 3 espaces avant la dernière photo de "*", espaces dus à 3 photos cachées.
Ce que j'appelle photos cachées (galerie "cachée") :
https://www.youtube.com/watch?v=00Bn...ature=youtu.be
Donc, est-il possible de supprimer ces espaces "vierges" sur "*" ?
Voilà, juste pour être compréhensible !

Je ne suis plus concerné par ce problème

(Encore MERCI NoSmoking

)

Choisir son diaporama d'ouverture (Isotope)

JavaScript

Discussions similaires

Partager

Partager