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