18041 sujets

Questions générales et questions de débutants

Image clickable pour faire apparaître un slider

Bonjour, je cherche à faire une image clickable qui ouvre un slider sur la même page. J'ai essayé de l'ouvrir via une modal mais je pense avoir un problème avec l'id, qui fait que je ne peux pas utiliser cette solution une deuxième fois dans mon code(les images de mon premier slider se répercute sur les suivants... Je pense également que l'idée de la modal n'est pas la plus optimale....


<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail"href="#">
<img class="img-responsive" src="img/Entete//01.jpg" alt="" data-toggle="modal" data-target="#myModal">
</a>
<div class="text-align rollopaque2">
<h4>ONF IGN</h4>
<p>Exposition Stratégique Forêt!, Hôtel de ville,Paris
Scénographie Agence Klapisch-Chaisse
Identité visuelle,Signalétique,BloStudio
</p>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-triangle-left btnslidegauche"></span>
</a>
<div class="modal-dialog" role="document">
<div class="modal-content slidersize">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">



<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img\projets\IGN/01.jpg" alt="...">
</div>
<div class="item">
<img src="img\projets\IGN/02.png" alt="...">
</div>
<div class="item">
<img src="img\projets\IGN/03.jpg" alt="...">
</div>
<div class="item">
<img src="img\projets\IGN/04.jpg" alt="...">
</div>

<!-- Controls -->
</div>

<div type="button"data-toggle="modal" data-target="#myModal">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
</div>
</div>
</div>
</div>
</div>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-triangle-right btnslidedroite"></span>
</a>
</div>
</div>
Bonjour LoicTipe,

La gestion de l'apparition/disparition de fenêtre modale se gère principalement par le CSS. Pourrais-tu s'il te plaît poster la partie qui fait référence au HTML que tu fournis ?

J'ai pas mal planché sur le sujet et j'ai constaté qu'il me fallait utiliser "une variante" des nombreux exemples que l'on peut trouver sur la toile. En effet, ce concept est souvent expliqué de cette façon (schématique) :
* liens afficher/masquer
* une boi-boîte avec le contenu (cible du lien afficher)
* une boi-boîte qui englobe le tout
Évidemment pour fonctionner, ces éléments ont besoin d'un ID. Ceci afin de fixer une ancre qui d'un e part permet bien sûr de faire d'un élément la cible d'un lien mais aussi et surtout parce qu'il permet l'utilisation de l'attribut Css :TARGET.

La subtilité consiste à paramétrer en Css le comportement de l'affichage/masquage non pas en se basant sur l'ID mais sur une constante commune contenue dans les ID.
Soit préférer :
... ID="mot_magique_truc bidulle"...
... ID="mot_magique_boiboite"...
à :
...ID="truc_bidulle"...
...ID="boiboite"...

En Css cela se traduit par :
[ID^="mot_magique"] // sélectionne les éléments dont l'ID commence par 'mot_magique'.

Attention toutefois à la rétro-compatibilité. Si tu souhaites rendre compatible ton affichage avec des navigateurs très anciens, il te faudra implémenter une variante.

A titre d'exemple j'utilises cette méthode sur la page du logiciel Elf de mon site notamment pour y afficher les réponses de la Faq. Dans cet exemple j'y affiche des blocs de texte mais on peut y insérer tout ce qu'on veut comme un carrousel, des vidéos, photos etc.

Je ne suis pas sûr que mes écris soient aussi clair que mes pensées. J'ai trouvé mon inspiration sur ce sujet par l'article du Hollandais Volant qui concerne les tricks CSS rubrique Slider.

Bon dev. Smiley smile
Merci pour votre aide.
J'ai réussi à m'en sortir avec un plugin lightbox (http://chocolat.insipi.de/fr/Explications/)
par contre je ne sais pas comment optimiser mon code pour éviter les duplication d'ID.
Actuellement je procède comme ceci :

HTML
====> 
<ul id="linksContainer"></ul>

         <div id="demoA">
                 <a href="img/projets/onf/01.jpg" rel="Title photoset 2"><img src="img/Entete/01.jpg"></a>
                        <a href="img/projets/onf/02.png"></a>
                        <a href="img/projets/onf/03.jpg"></a>
                        <a href="img/projets/onf/04.jpg"></a>
         </div>


<ul id="linksContainer"></ul>

       <div id="demoB">
            <a href="img/projets/Hermes/tanagram/10.jpg" rel="Title photoset 2"><img src="img/Entete/02.jpg"></a>
                        <a href="img/projets/Hermes/tanagram/02.jpg"></a>
                        <a href="img/projets/Hermes/tanagram/03.jpg"></a>
      </div>



JS
=====>
$(function() {

    $('#demoA a').Chocolat({
        displayAsALink : false,
        linksContainer : 'linksContainer'
    });
    $('#demoB a').Chocolat({
        displayAsALink : false,
        linksContainer : 'linksContainer'
    });
});


J'utilise donc une fonction pour chaque image qui se developpe en slider. Etant encore novice dans le domaine, je me dis qu'il est possible de pouvoir faire le même résultat sans dupliquer les fonctions.
Difficile à dire en l'état. En effet, tu utilises une fonction par DIV#demoX. Je dirais que si tu n'as que 2 éléments de ce type, la duplication de la fonction n'est pas très grave dans la mesure ou ça n’alourdit ni le poids ni l'exécution du script.

Dans le cas où les DIV sont plus nombreuses, effectivement il est intéressant de regrouper les similarités notamment au niveau des fonctions.

La question fondamentale à se poser est "Est-ce que je connais à l'avance le nombre de DIV ? Ce nombre est-il fixe ou sujet à variation ?"
C'est la réponse à cette question qui permettra de déterminer la méthode à suivre et éventuellement les modifications à apporter au code support (html, css...).

Et quel est le but de cette fonction JS ? (Je suis 0 en JS, pas encore appris ce chapitre).
Sujet clos
Aller à