Choisir son diaporama d'ouverture (Isotope)
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 :weird:... rien à faire :(
Si une personne savait si cela est possible, voici mon html :
Code:
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:
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
