BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - éléments invisibles au départ .qu'on rend visibles
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

éléments invisibles au départ .qu'on rend visibles

 Répondre Répondre Page  <123
Auteur
Message
xplorer allez vers le bas
Senior Member
Senior Member


Depuis le: 04 Sep 2015
Status: Inactif
Points: 241
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer xplorer Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 10 Oct 2015 à 01:57
de retour, j'ai essayé un peu , j'arrive plus ou moins à une galerie mais il y a des trucs qui ne vont pas.
 
j'ai procédé selon cette structure html :
 
un élément div "galerie 1" , et un élément div galerie 2.
les deux panneaux se superposent.
 
dans chaque div galerie, trois images qui se superposent, chacune avec un id.
également dans le même panneau div, un autre panneau avec des boutons alignés.
 
> les boutons commandent la visibilité des images, selon le code que j'ai réécrit au début du post. en hide/show jquery.
 
> chaque div galerie a sa visibilité commandée par un panneau à l'extérieur, qui contient deux textes agissant comme des boutons.
 
> les images sont également actives, et permettent de passer à une autre image en cliquant dessus.
 
ça ressemble à ça :
 
 
 
>> en prévisualisation, ça marche plus ou moins, mais en changeant de galerie, il peut arriver que si j'en étais à l'image numéro 2 ou 3 de la première galerie, la deuxième galerie ne s'affiche pas, à moins que je ne clique sur des numéros d'images ...
ou bien qu'une galerie commence par l'image numéro 2 ( ?? )
 
>> en prévisualisation, la flèche de la souris disparaît au profit d'un grand I, au survol des numéros, peut-être parce que je n'ai pas utilisé de liens textes ( puisqu'ils ne relient pas à des pages ) mais des textes simples ?
 
>> en superposant des galeries et des images, j'ai trouvé que j'aurais bien aimùé agir directement sur le html de "tout le code" mais c'est impossible.
j'aurais aimé au moins changer les valeurs d'index z par exemple, ou l'ordre des div
( la galerie 2 est première dans le code html, même si elle a un index z inférieur à la galerie 1, Est-ce que c'est ce qui pourrait poser problème ?  )
 
>> c'est là que le poids des images compte car si j'ai 5 galeries qui se superposent, avec pour chacune 10 images, ça va faire lourd quand la page va se loader, non ?
quels sont les "trucs" qui permettent de contourner le problème ? les plugins de sliders ont une astuce spéciale pour ça ? du genre un bouton qui appelle une image à la fois, dans un panneau d'éléments, plutôt que de jouer sur la visibilité de 50 images ?
 
Merci .
 
à tout hasard, voici le code html, si quelque chose vous choque ( j'imagine que vous optimisez vos codes comparé à ce genre de structure très longue :
 
<div id="XBody" class="BaseDiv RWidth OEPageXbody OESK_XBody_Default" style="z-index:0">
  <div class="OESZ OESZ_DivContent OESZG_XBody ">
   <div class="OESZ OESZ_XBodyContent OESZG_XBody  OECT OECT_Content OECTAbs">
    <div id="WEgalerie2" class="BaseDiv RBoth OEWEPanel OESK_WEPanel_Default  gal" style="z-index:2">
     <div class="OESZ OESZ_DivContent OESZG_WEgalerie2 ">
      <div class="OECT OECT_Content OECTAbs OEDynTag0" style="overflow:hidden">
      <div id="WE2b" class="BaseDiv RBoth OEWEImage OESK_WEImage_Default  im" style="z-index:3">
       <div class="OESZ OESZ_DivContent OESZG_WE2b ">
        <img style="" src="../WEFiles/Image/WEImage/cam6-adc2efa5.jpg" alt="image adrien 2" /></div>
      </div>
      <div id="WE1b" class="BaseDiv RBoth OEWEImage OESK_WEImage_Default  im" style="z-index:2">
       <div class="OESZ OESZ_DivContent OESZG_WE1b ">
        <img style="" src="../WEFiles/Image/WEImage/cam7-7f898005.jpg" alt="image adrien 3" /></div>
      </div>
      <div id="WE3b" class="BaseDiv RBoth OEWEImage OESK_WEImage_Default  im" style="z-index:1">
       <div class="OESZ OESZ_DivContent OESZG_WE3b ">
        <img style="" src="../WEFiles/Image/WEImage/cam5-89050ebd.jpg" alt="image adrien" /></div>
      </div>
      <div id="WEbout" class="BaseDiv RBoth OEWEPanel OESK_WEPanel_Default" style="z-index:4">
       <div class="OESZ OESZ_DivContent OESZG_WEbout ">
        <div class="OECT OECT_Content OECTAbs OEDynTag0">
        <div id="WE346a244cdb" class="BaseDiv RNone OEWELabel OESK_WELabel_Default" style="z-index:4">
         <div class="OESZ OESZ_DivContent OESZG_WE346a244cdb ">
          <span class="OESZ OESZ_Text OESZG_WE346a244cdb OEo OEd ContentBox">4</span></div>
        </div>
        <div id="WEb1b" class="BaseDiv RNone OEWELink OESK_WELink_Default" style="z-index:2">
         <div class="OESZ OESZ_DivContent OESZG_WEb1b ">
          <a class="OESZ OESZ_Link OESZG_WEb1b OEo OEd ContentBox">1</a></div>
        </div>
        <div id="WEb2b" class="BaseDiv RNone OEWELink OESK_WELink_Default" style="z-index:1">
         <div class="OESZ OESZ_DivContent OESZG_WEb2b ">
          <a class="OESZ OESZ_Link OESZG_WEb2b OEo OEd ContentBox">2</a></div>
        </div>
        <div id="WEb3b" class="BaseDiv RNone OEWELink OESK_WELink_Default" style="z-index:3">
         <div class="OESZ OESZ_DivContent OESZG_WEb3b ">
          <a class="OESZ OESZ_Link OESZG_WEb3b OEo OEd ContentBox">3</a></div>
        </div>
        </div></div>
      </div>
      </div></div>
    </div>
    <div id="WEgalerie1" class="BaseDiv RBoth OEWEPanel OESK_WEPanel_Default  gal" style="z-index:3">
     <div class="OESZ OESZ_DivContent OESZG_WEgalerie1 ">
      <div class="OECT OECT_Content OECTAbs OEDynTag0" style="overflow:hidden">
      <div id="WE1" class="BaseDiv RBoth OEWEImage OESK_WEImage_Default  im" style="z-index:3">
       <div class="OESZ OESZ_DivContent OESZG_WE1 ">
        <img style="" src="../WEFiles/Image/WEImage/cam3-23bbd208.jpg" alt="" /></div>
      </div>
      <div id="WE2" class="BaseDiv RBoth OEWEImage OESK_WEImage_Default  im" style="z-index:2">
       <div class="OESZ OESZ_DivContent OESZG_WE2 ">
        <img style="" src="../WEFiles/Image/WEImage/cam4-6f726f24.jpg" alt="" /></div>
      </div>
      <div id="WE3" class="BaseDiv RBoth OEWEImage OESK_WEImage_Default  im" style="z-index:1">
       <div class="OESZ OESZ_DivContent OESZG_WE3 ">
        <img style="" src="../WEFiles/Image/WEImage/cam2-b70884cd.jpg" alt="" /></div>
      </div>
      <div id="WEbout1" class="BaseDiv RBoth OEWEPanel OESK_WEPanel_Default" style="z-index:4">
       <div class="OESZ OESZ_DivContent OESZG_WEbout1 ">
        <div class="OECT OECT_Content OECTAbs OEDynTag0">
        <div id="WEb4" class="BaseDiv RNone OEWELabel OESK_WELabel_Default" style="z-index:4">
         <div class="OESZ OESZ_DivContent OESZG_WEb4 ">
          <span class="OESZ OESZ_Text OESZG_WEb4 OEo OEd ContentBox">4</span></div>
        </div>
        <div id="WEb1" class="BaseDiv RNone OEWELink OESK_WELink_Default" style="z-index:2">
         <div class="OESZ OESZ_DivContent OESZG_WEb1 ">
          <a class="OESZ OESZ_Link OESZG_WEb1 OEo OEd ContentBox">1</a></div>
        </div>
        <div id="WEb2" class="BaseDiv RNone OEWELink OESK_WELink_Default" style="z-index:1">
         <div class="OESZ OESZ_DivContent OESZG_WEb2 ">
          <a class="OESZ OESZ_Link OESZG_WEb2 OEo OEd ContentBox">2</a></div>
        </div>
        <div id="WEb3" class="BaseDiv RNone OEWELink OESK_WELink_Default" style="z-index:3">
         <div class="OESZ OESZ_DivContent OESZG_WEb3 ">
          <a class="OESZ OESZ_Link OESZG_WEb3 OEo OEd ContentBox">3</a></div>
        </div>
        </div></div>
      </div>
      </div></div>
    </div>
    <div id="WEa85fa04234" class="BaseDiv RBoth OEWEPanel OESK_WEPanel_Default" style="z-index:4">
     <div class="OESZ OESZ_DivContent OESZG_WEa85fa04234 ">
      <div class="OECT OECT_Content OECTAbs OEDynTag0">
      <div id="WEp1" class="BaseDiv RNone OEWELabel OESK_WELabel_Default  c" style="z-index:1">
       <div class="OESZ OESZ_DivContent OESZG_WEp1 ">
        <span class="OESZ OESZ_Text OESZG_WEp1 OEo OEd ContentBox">projet 1 &nbsp;</span></div>
      </div>
      <div id="WEp2" class="BaseDiv RNone OEWELabel OESK_WELabel_Default  c" style="z-index:2">
       <div class="OESZ OESZ_DivContent OESZG_WEp2 ">
        <span class="OESZ OESZ_Text OESZG_WEp2 OEo OEd ContentBox">projet 2 &nbsp;</span></div>
      </div>
      </div></div>
    </div>
    <div id="WE290749b9d3" class="BaseDiv RNone OEWELink OESK_WELink_Default" style="z-index:1">
     <div class="OESZ OESZ_DivContent OESZG_WE290749b9d3 ">
      <a class="OESZ OESZ_Link OESZG_WE290749b9d3 OEo OEd ContentBox">feuille</a></div>
    </div>
   </div>
   <div class="OESZ OESZ_XBodyFooter OESZG_XBody  OECT OECT_Footer OECTAbs">
   </div>
  </div>
 
 
 
 
et voilà le jquery :
 
$("#WEb1").click(function(){
     $(".im").hide();
 });
 $("#WEb1").click(function(){
     $("#WE1").show();
 });
$("#WEb2").click(function(){
     $(".im").hide();
 });
 $("#WEb2").click(function(){
     $("#WE2").show();
 });
$("#WEb3").click(function(){
     $(".im").hide();
 });
 $("#WEb3").click(function(){
     $("#WE3").show();
 });
 
 
$("#WE1").click(function(){
     $(".im").hide();
 });
 $("#WE1").click(function(){
     $("#WE2").show();
 });
$("#WE2").click(function(){
     $(".im").hide();
 });
 $("#WE2").click(function(){
     $("#WE3").show();
 });
$("#WEb3").click(function(){
     $(".im").hide();
 });
 $("#WEb3").click(function(){
     $("#WE3").show();
 });
 
 

$("#WEb1b").click(function(){
     $(".im").hide();
 });
 $("#WEb1b").click(function(){
     $("#WE1b").show();
 });
$("#WEb2b").click(function(){
     $(".im").hide();
 });
 $("#WEb2b").click(function(){
     $("#WE2b").show();
 });
$("#WEb3b").click(function(){
     $(".im").hide();
 });
 $("#WEb3b").click(function(){
     $("#WE3b").show();
 });
 
 
$("#WE1b").click(function(){
     $(".im").hide();
 });
 $("#WE1b").click(function(){
     $("#WE2b").show();
 });
$("#WE2b").click(function(){
     $(".im").hide();
 });
 $("#WE2b").click(function(){
     $("#WE3b").show();
 });
$("#WEb3b").click(function(){
     $(".im").hide();
 });
 $("#WEb3b").click(function(){
     $("#WE3b").show();
 });
 

$("#WEp1").click(function(){
     $(".gal").hide();
 });
 $("#WEp1").click(function(){
     $("#WEgalerie1").show();
 });

$("#WEp2").click(function(){
     $(".gal").hide();
 });
 $("#WEp2").click(function(){
     $("#WEgalerie2").show();
 });

 
 
 


Edité par xplorer - 10 Oct 2015 à 02:17
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 10 Oct 2015 à 10:24
Au lieu de show() et hide(), utilisez css('visibility', 'visible') et css('visibility', 'hidden') et n'utilisez pas display:none dans le code CSS (ou Affichage: Aucun dans OE), pour ne pas casser les calculs de galleries.
Haut de la page
xplorer allez vers le bas
Senior Member
Senior Member


Depuis le: 04 Sep 2015
Status: Inactif
Points: 241
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer xplorer Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 10 Oct 2015 à 14:55
merci Dmit, je vais essayer ça.
 
mais est-ce que les sliders qu'on trouve sur le marché fonctionnent de cette manière ? j'imagine qu'il y a une astuce mise en jeu si par exemple on a 500 images ( j'exagère ) dans un slider : on ne peut pas concevoir qu'elles soient toutes loadées sur la page, et rendues visibles ou non.
 
comment est-ce qu'ils fonctionnent ?
 
je suis à deux doigts d'acheter un slider du genre revolution slider, ou layer slider , mais même eux ne fonctionnent pas comme je le souhaite, c'est dingue, ils se ressemblent tous. et je me dis que ça serait illisoire de m'imaginer que ça va être plus simple à implanter. il n'y a pas d'approche graphique comme dans OE.
 
je reposte aussi ça à tout hasard. ( y a t'il un moyen de rentrer dans "tout le code" et d'affecter certaines valeurs comme z index par exemple ? avec 50 - 100 images, ça serait assez important je pense. )  
 
>> en prévisualisation, la flèche de la souris disparaît au profit d'un grand I, au survol des numéros
 
>> en superposant des galeries et des images, j'ai trouvé que j'aurais bien aimé agir directement sur le html de "tout le code" mais c'est impossible.
j'aurais aimé au moins changer les valeurs d'index z par exemple, ou l'ordre des div
( la galerie 2 est première dans le code html, même si elle a un index z inférieur à la galerie 1, Est-ce que c'est ce qui pourrait poser problème ?  )
 
EDIT : j'ai essayé avec css visibility , comme ça :
 
$("#WEb1").click(function(){
     $(".im").css('visibility', 'hidden');
 });
 $("#WEb1").click(function(){
     $("#WE1").css('visibility', 'visible');
 });
 
mais bizarrement, pas d'effet.
 
 


Edité par xplorer - 10 Oct 2015 à 15:23
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 02:16
il faut faire la différence entre une galerie d'images et un diaporama

écrivez le moins de code possible, jquery à justement été inventé pour les flemmards comme moi :
$("#WEb1").click(function(){
     $(".im").css('visibility', 'hidden');
     $("#WE1").css('visibility', 'visible');
 });


des slider ou galeries peuvent être "codées" de plein de manières différentes selon les besoins, les images, les fonctionnalités, les outils utilisés (oe, wp...), l'utilisateur etc...


Edité par nico38 - 11 Oct 2015 à 02:23
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
xplorer allez vers le bas
Senior Member
Senior Member


Depuis le: 04 Sep 2015
Status: Inactif
Points: 241
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer xplorer Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 03:19
merci.
 
mais j'ai essayé mais pas d'effet. tant pis.
 
$("#WEb1").click(function(){
     $(".im").css('visibility', 'hidden');
     $("#WE1").css('visibility', 'visible');
 });
$("#WEb2").click(function(){
     $(".im").css('visibility', 'hidden');
     $("#WE2").css('visibility', 'visible');
 });
 
.. etc .
 
EDIT : j'ai compris .... j'avais dupliqué la page et il faut que je renomme les id des éléments de cette nouvelle page pour que ça colle.
 
EDIT : après correction, pas d'effet quand même. je vais réessayer à petite échelle demain.
 
 
oui je comprends qu'il y ait plein de façons différentes de coder un slider, mais alors dans le cas qui m'intéresse, le seul exemple que j'avais était en version java min . avec le beautyfier d'un site je ne sais plus lequel j'ai pu en ressortir une conversion en version full ( avec des erreurs dedans apparemment ) mais ça m'étonnerait que je puisse le convertir en jquery pour l'observer, dommage.
 
le plus petit dénominateur commun d'un slider qui puisse accepter une grande quantité d'images sans que ça plombe le chargement de la page dans le cas d'un système hide/show des images qui sont toutes loadées à la fois , ce serait : 
un système de bouton déclencheur qui permette de loader une image depuis le dossier images déposé sur le serveur, seulement si le bouton en fait la demande, sinon l'image ne se loade pas sur la page. enfin je suppose. il faut que je commence à cherche de ce côté, à une échelle simple, puis la complexifier.  
je pensais à l'iframe à un moment ( autant de pages que d'images, visibles dans un panneau d'élément d'une seule page ) mais je pense que ce serait faire fausse route maintenant.


Edité par xplorer - 11 Oct 2015 à 03:37
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 08:07
Pour les flemmards, il existe le mot-concept "this" en jQuery, qui facilite bien le travail, et évite ces répétitions stupides de code quasi identique... Si, si, on en parle sur W3School...
Haut de la page
xplorer allez vers le bas
Senior Member
Senior Member


Depuis le: 04 Sep 2015
Status: Inactif
Points: 241
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer xplorer Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 08:09
oui, this, j'ai bien vu ça sur w3school , mais réduire le code n'était pas ma question, c'est pas très grave dans un premier temps s'il est long.
Haut de la page
 Répondre Répondre Page  <123
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.