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 Sujet: éléments invisibles au départ .qu'on rend visibles
    Envoyé : 04 Oct 2015 à 02:13
Bonjour !
 
Si jamais vous avez une idée ... Je suis en train de réussir à faire ma galerie animée, avec des panneaux d'éléments, des images, et du jquery, mais je me pose cette question ...
 
comment faire, simplement à priori, pour qu'un élément soit invisible à l'ouverture d'une page ?
parce que je peux appliquer à un élément du hide and show, du toggle ... en jquery, mais il sera de toute façon visible au départ, alors à moins de cacher cet élément sous d'autres éléments visibles à l'ouverture de la page .. je ne vois pas.
 
si j'ai par exemple une arborescence de textes simples qui chacun déclenche la visibilité de la galerie qui lui est affectée, tout en rendant invisibles les autres, il faut tout de même qu'il y en ait une visible à l'ouverture de la page, choisie, plutôt que d'autres.
 
ou plus simplement : plutôt que de superposer une dizaine d'images, et d'appliquer un code du genre hide and show en jquery ,ex :
 
$("#WEb1c").click(function(){
     $(".im").hide();
 });
 $("#WEb1c").click(function(){
     $("#WEcam2c").show();
 });
$("#WEb2c").click(function(){
     $(".im").hide();
 });
 $("#WEb2c").click(function(){
     $("#WEcam3c").show();
 });
 
...  avec une image au sommet de toutes les autres, est-ce qu'on peut choisir l'invisibilité des images qui doivent l'être, à l'ouverture de la page ?
 
est-ce que ça serait quelque chose du genre jquery appliqué au lien qui enclenche un élément <div>  </div>  ?
 
j'ai du mal à prendre du recul sur cette question.
 
encore plus simplement : ça revient à avoir une simple image invisible à l'ouverture d'un calque ou d'une page, en prévisualisation, qui deviendra visible grace à du jquery "show".
 
pour le moment je suis en train de me demander comment superposer 5 ou six galeries, donc une cinquantaine d'images ... sans que ça pose problème ;) , puisqu'on ne peut pas appeler des images en mode src= ... sous jquery, mais que par id ou classe. sinon ç'aurait été plus simple, et j'aurais pu appliquer un style css au conteneur des images "src=" laissées dans la bibliothèque .
 
merci.


Edité par xplorer - 04 Oct 2015 à 02:57
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Oct 2015 à 05:53
Tout ça me semble bien compliqué.  

Pourquoi ne pas mettre un panneau d'éléments et y changer l'image d'arrière plan au lieu de charger un grande quantité d'images qui, même si elles sont invisibles, alourdiront la page?

$('#Panneau d'élément').css({'background-image':'fichier image'});




Edité par Hobby001 - 04 Oct 2015 à 05:58
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Oct 2015 à 10:32
Bonjour,

Regardez si c'est adaptable :

Afficher un élément (texte, image, etc...) seulement si une case est cochée.

Il faut ajouter un "Bloc de Code Source" type "Javascript" position "Headers" (entêtes), avec le code du genre :


$(function(){

$('#WE11111111  input').change(function() {

if($(this).is(":checked")) {
   $('#WE22222222').show().css('visibility', 'visible');
} else {
   $('#WE22222222').hide();
}

});

Changez WExxxxxxxx par ID de votre "check box" et WE22222222 par ID de l'élément texte à afficher.

Pour ce dernier décochez Propriétés -> Visible pour ne pas l'afficher au départ.

Cordialement


La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
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é : 04 Oct 2015 à 12:21
Message posté par Hobby001 Hobby001 a écrit:

Tout ça me semble bien compliqué.  

Pourquoi ne pas mettre un panneau d'éléments et y changer l'image d'arrière plan au lieu de charger un grande quantité d'images qui, même si elles sont invisibles, alourdiront la page?

$('#Panneau d'élément').css({'background-image':'fichier image'});


 
aaaah ! je crois que je cherchais exactement quelque chose de ce genre ! donc grace au css appelé en fonction jquery, on peut faire appel à une suite d'images  ( toujours avec des boutons ), en mode src= ?
cool ! je vais tester ça.
 
après, il faudra que je superpose quand même 4 ou 5 de ces panneaux d'éléments, de manière confondue, qu'il y en ait un seul de visible en premier , et qu'à l'intérieur il y ait une seule image visible en premier.
 
j'ai conscience que mon approche est plus ou moins empirique, elle fait de grands détours pas très optimisés mais autant commencer par cette voie là pour comprendre en quoi certains scripts sont plus intelligents.


Edité par xplorer - 04 Oct 2015 à 12:26
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é : 04 Oct 2015 à 12:24
Message posté par Maurice306 Maurice306 a écrit:

Bonjour,

Regardez si c'est adaptable :

Afficher un élément (texte, image, etc...) seulement si une case est cochée.

Il faut ajouter un "Bloc de Code Source" type "Javascript" position "Headers" (entêtes), avec le code du genre :


$(function(){

$('#WE11111111  input').change(function() {

if($(this).is(":checked")) {
   $('#WE22222222').show().css('visibility', 'visible');
} else {
   $('#WE22222222').hide();
}

});

Changez WExxxxxxxx par ID de votre "check box" et WE22222222 par ID de l'élément texte à afficher.

Pour ce dernier décochez Propriétés -> Visible pour ne pas l'afficher au départ.

Cordialement


 
merci c'est super, j'avais bien essayé de décocher la visibilité des images ou des panneaux, et d'activer leur visibilité avec "show" dans jquery mais ça ne marchait pas, je comprends pourquoi maintenant, votre code devrait être bien utile. je vais bricoler un peu tout ça et voir ce que j'arrive à faire.
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é : 04 Oct 2015 à 14:06
le seul inconvénient d'utiliser des arrières-plans pour faire défiler des images, c'est qu'elles ne sont pas référençables : introuvables sur les moteurs de recherche (pas de alt)

de toute façon que ce soit une arriere-plan ou une image, le poids est le même et il faudra bien dire à un moment ou un autre quel bouton correspond à quelle image quand on clique dessus


Edité par nico38 - 04 Oct 2015 à 14:10
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Oct 2015 à 16:54
Regardez ceci:


Un click sur une vignette est traité pour rendre visible un panneau d'éléments qui présente l'image requise avant que le zoom ne soit appliqué. 

L'astuce utilisée est que les noms des vignettes sont presque les mêmes que ceux des images à zoomer.  Ainsi V01.jpg est la vignette réduite de l'image G01.jpg

Peut-être y as-t-il une piste de solution pour vous.


Edité par Hobby001 - 04 Oct 2015 à 16:57
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Oct 2015 à 17:30
Message posté par Hobby001 Hobby001 a écrit:

Regardez ceci:


Un click sur une vignette est traité pour rendre visible un panneau d'éléments qui présente l'image requise avant que le zoom ne soit appliqué. 

L'astuce utilisée est que les noms des vignettes sont presque les mêmes que ceux des images à zoomer.  Ainsi V01.jpg est la vignette réduite de l'image G01.jpg

Peut-être y as-t-il une piste de solution pour vous.

pas mal du tout Hobby001. Bossant sur une galerie "de merde", j'essayes de rendre la mienne un peu spéciale. Full screen uniquement dans un panneau d'élément relative, donc, thumbnails à rendre responsive...gloups.
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é : 04 Oct 2015 à 17:45
merci, jolie galerie, avec de belles ombres.
par contre en cliquant sur la croix pour fermer les images, ça ne fonctionnait pas. peut-être mon navigateur internet explorer ?
 
mais la structure de ma galerie est bien différente. je n'ai pas encore eu le temps d'appliquer vos conseils et de tester.
Je compte aussi créer une fonction zoom, qui prendra en fait le panneau d'élément qui contient les images, et le zoomera. mais je n'en suis pas encore là. je regarde fonctionner des principes à petite échelle, pour les reprendre et els assembler dans quelque chose de plus complexe.
 
Nico, oui je me demandais justement ce qui faisait que les images pouvaient être référencées, dans les recherches Google, avec leur nom.
Donc c'est le nom de leur id qui compte ? ou c'est leur nom alternatif "alt" qui compte ?
il faudra que je renomme toutes mes images de manière intelligente avec des mots clés, avant, mais si ça fait des noms assez longs, ça risque d'être un peu difficile à utiliser en tant qu'id, avec en plus WE avant le nom.  


Edité par xplorer - 04 Oct 2015 à 17:46
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 (1) Thanks(1)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Oct 2015 à 18:34
pour le référencement des images seul le alt compte, le nom qu'on lui donne "maison-deco.jpg" et ce qu'il y a sur la page.
id et class n'a pas de rapport

et si vous faites des zoom comme ça, réfléchissez avant pour la structure de votre code (est-ce que le zoom sera fait avec OE ou codé personnellement)
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
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.