1485 sujets

Web Mobile et responsive web design

[Résolu] Suppression de lightbox en responsive

Bonjour à tous.
Je suis en train de faire le responsive d'un site et me voila arrivé au stade ou il faut faire des choix et couper dans le gras tout en gardant l'essentiel.
j'ai installé une lightbox d'une 12zaine de photos déclenchable au clic et j'aimerai la supprimer pour les petits écrans, mais j'avoue que je ne sais pas trop comment supprimer cette lightbox vu qu'elle est gérée par un fichier js et css qui sont à part.
je suis un peu novice et dans mon html il m'a suffit de quelque ligne pour la mettre en place et mon css n'a besoin que de 2 lignes

/* PAGE MATERIEL*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.lightmateriel{width:900px; height:auto; margin:20px auto;}
.lightmateriel a img{width:220px; height:auto; margin-bottom:15px;}


HTML
<div class="lightmateriel"><!--DEBUT PHOTO--> 
      <a href="image-max/1.jpg" rel="lightbox[landscpape]"><img src="image-mini/1.png" /></a> 
      <a href="image-max/2.jpg" rel="lightbox[landscpape]"><img src="image-mini/2.jpg" /></a> 
      <a href="image-max/3.jpg" rel="lightbox[landscpape]"><img src="image-mini/3.png" /></a> 
      <a href="image-max/4.jpg" rel="lightbox[landscpape]"><img src="image-mini/4.png" /></a> 
      <a href="image-max/5.jpg" rel="lightbox[landscpape]"><img src="image-mini/5.png" /></a> 
      <a href="image-max/6.jpg" rel="lightbox[landscpape]"><img src="image-mini/6.jpg" /></a> 
      <a href="image-max/7.jpg" rel="lightbox[landscpape]"><img src="image-mini/7.png" /></a> 
      <a href="image-max/8.jpg" rel="lightbox[landscpape]"><img src="image-mini/8.png" /></a> 
      <a href="image-max/9.jpg" rel="lightbox[landscpape]"><img src="image-mini/9.png" /></a> 
      <a href="image-max/10.jpg" rel="lightbox[landscpape]"><img src="image-mini/10.png" /></a> 
      <a href="image-max/11.jpg" rel="lightbox[landscpape]"><img src="image-mini/11.png" /></a> 
      <a href="image-max/12.jpg" rel="lightbox[landscpape]"><img src="image-mini/12.png" /></a> 
      </div>
    <!--FIN PHOTO->


merci
merci


mais en fait, c'est l'agrandissement de l'image au clic que je veux supprimer, au vu de la démo c'est la photo qui disparait.
mais si un script peut faire disparaitre une image suivant la taille de l’écran il doit aussi pouvoir supprimer l'image "clicable".
je vais chercher dans ce sens avec du .js
Tu peux en effet enlever l’événement sur le lien ($.off()) lorsque le petit écran est détecté.
merci pour ton info
j'ai cherché dans ce sens mais mes connaissances en js sont nulles
je vais essayer de trouver des formations pour essayer de comprendre un minimum de ce que je dois faire de ce ($.off()).
si tu as des bonnes adresses pour des formations basiques; elles seront les bienvenues.
a +
Salut à tous

j'ai résolu ce petit problème temporairement en créant une autre <div #lightmateriel1
sans la lightbox et que je cache { display:none} avec le css suivant la taille de l’écran.
c'est certainement pas très catholique, mais en attendant de meilleure connaissance en js pour le faire proprement, je me contenterai de ça.

A bientôt
Sujet clos
Aller à