Discussion :

[mat_elot]

Bonjour,

je réédite mon topic car je viens d'installer colorbox qui convient parfaitement à ce que je recherchais.
J'ai une liste de lien avec à l'intérieur une miniature de l'image que je veux afficher:

Code html :

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

<a target="_blank" href="blabla/macarte.jpg" rel="group4" class="group4 cboxElement"><img alt="" src="blabla/mini/macarte.jpg"></a>

Je souhaite que quand on clique sur cette miniature, seule l'image s'affiche (dans un autre onglet ou dans une pop-in)

Au dessus de cette liste, j'ai un titre dans un h3 et je veux que la lecture des cartes en diaporama se lise sur le clic de ce H3. Voici donc mon code du h3:

Code html :

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

 <a class='boucle'><h3>Mon titre h3</h3></a>

Et celui de mon js:

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function() {
    $(".boucle").colorbox({
        rel: 'group4', 
        slideshow: true,
        scalePhotos: true,
        maxWidth: '500px',
        maxHeight: '707px'});
});

mais ca plante, quand je clique sur une image, la lecture se lance et sans prendre en compte les paramètre indiqués .
Et quand je clique sur mon h3, ca lance une pop-in vide.

voila mon blocage, et je vois pas d'ou ca peut venir car c'est bien l'élément 'boucle' qui lance le diapo sur les éléments dont la valeur rel est égal à 'group4'...

Merci pour vos lumières.

[mat_elot]

ok j'ai trouvé comment permettre d'ouvrir la galerie animée avec le h3.
Pour ceux que ca interesse:
il faut rajouter dans le scprit

Code :

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

1
2
3
4
5
var $gallery = $("a[rel=group4]").colorbox();
$("a#boucle").click(function(e) {
    e.preventDefault();
    $gallery.eq(0).click();
});

il me manque maintenant à trouver comment faire que les clics sur les images ne lancent pas la galerie animée mais juste ouvre l'image.
Car le problème vient du faut que le code rajouté attribue au lien du h3, le meme type d'ouverture colorbox que les images.
Or je souhaite qu'ils soient différents!

Merci pour votre aide parce que là je seche...

[SpaceFrog]

Code :

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

("a#boucle")

un selecteur par id ???
un id doit etre unique sir la page

[mat_elot]

Mon Id est bien unique je vois pas le pbm ?
Mais j'ai testé en mettant une classe et ca revient au meme.
Pour etre un peu plus clair et vous donner un exemple :
http://www.jacklmoore.com/colorbox/example1/

Prenez l'exemple Elastic Transition. Si on clique les 3 images, elles se lancent une par une, ce que je recherche!
Mais je cherche également, sur un clic de mon titre (qui ici serait "Elastic Transition") à lancer la même animation que celle quand on clique sur la première image de l'exemple Slideshow un peu plus bas.

Je souhaite donc ouvrir les image 1 par 1 quand on clique sur l'image. ET faire une boucle de ces memes images quand on clique sur mon titre.

le code HTML

Code :

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

1
2
3
4
5
  <h1>Colorbox Demonstration</h1>
        <h2 id="openGallery">Elastic Transition</h2>
        <p><a class="group1 lecture" rel='lecture' href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
        <p><a class="group1 lecture" rel='lecture' href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
        <p><a class="group1 lecture" rel='lecture' href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

Le JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <script>
            $(document).ready(function() {
 
                $("#openGallery").click(function(e) {
                    e.preventDefault();
                    // on lance la lecture des diapo
                     $(".lecture").colorbox({rel: 'lecture', slideshow: true}).eq(0).click();
                });
 
                //Examples of how to assign the Colorbox event to elements
                $(".group1").colorbox({rel: 'lecture', slideshow: false});
 });
        </script>

J'ai testé en faisant une fonction sur click des liens .group1 (comme pour l'id openGallery) mais ca plante quand on clique sur openGallery:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 $("#openGallery").click(function(e) {
                    e.preventDefault();
                    // on lance la lecture des diapo
                    $(".lecture").colorbox({rel: 'lecture', slideshow: true}).eq(0).click();
                });
 
                $(".group1").click(function(e) {
                    e.preventDefault();
                    // on lance la lecture des diapo
                   $(".group1").colorbox({rel: 'lecture', slideshow: false}).eq(0).click();
                });

Si je double les images (en les mettant en display none) et en leur assignant un autre rel (rel='lecture2') auquel je ferais référence sur le clic de mon titre, ca fonctionne. Mais je dois pouvoir éviter ca quand meme!

Et merci pour ta réponse !!

[mat_elot]

Toujours riens en tentant d'utiliser $.colorbox.remove() et autres attributs qui pourrait annuler l'attribution d'un type d'ouverture

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
        $("#openGallery").click(function(e) {
                    e.preventDefault();
                    // on lance la lecture des diapo
                    $(".lecture").colorbox({
                        rel: 'lecture',
                        slideshow: true,
                        cbox_closed: $.colorbox.remove() // pour tenter d'annuler le slideshow sur fermeture et repartir sur une autre colorbox
                    }).eq(0).click();
                });
 
                $(".group1").click(function(e) {
                    e.preventDefault();
                    // on lance la lecture des diapo
                   $(".group1").colorbox({rel: 'lecture', slideshow: false,cbox_closed: $.colorbox.remove()}).eq(0).click();
                });

Si qq un à une idée je serais bien preneur car je commence à chauffer du ciboulot